web-dev-qa-db-ja.com

ExtJs 4 ... Extjs 4コンポーネントを拡張するには？

誰かがextjsバージョン4を使用してextjsコンポーネントを拡張する方法を教えてくれませんか。同じものの適切な構文を探しています。助けてください..！！

extjs4
20
Riya

以下は、ExtJS 4でテキストフィールドを拡張するコードの例です。

その他、既存の構成とメソッドを使用して、この拡張コンポーネントには新しい構成プロパティが作成され、新しいメソッドが作成されてイベントに関連付けられます。

コンポーネントの目的は単純で、値が必須の場合はラベルを赤色で表示し、readOnlyの場合はフィールドの背景色を変更し、フォーカスされている場合はフィールドの背景色も変更します。

コードは適切にコメント化されています。それが役に立てば幸い。

Ext.define('Ext.pnc.Textfield', {

extend: 'Ext.form.field.Text',//Extending the TextField

alias: 'widget.pnctextfield',//Defining the xtype

config:{
    focusCls:'focusClassFieldPnC',//Providing value for existing config property.
    testConfig:'testConfigValue'//Creating a new config. Accessor functions will be created for this one by ExtJS engine
},

constructor:function(cnfg){
    this.callParent(arguments);//Calling the parent class constructor
    this.initConfig(cnfg);//Initializing the component
    this.on('beforerender',this.beforeRender);//Associating a new defined method with an event
},

//Defining a method below and associating this with an event in the constructor above
beforeRender:function(){

    if(!this.allowBlank){
        this.labelStyle =   'color:#FF0000';        
    }

    if(this.readOnly){
        this.fieldCls   =   'readOnlyClass';
    }
},

//Over-riding a function which already exists in parent class. Note that this has not been associated with any event in constructor as it already defined in parent class
afterRender:function(){
    console.log('after render function');
    this.callParent();//Calling the parent class method. This can be omitted if not     required and is not a must
}
});

.readOnlyClass{
background:#FF0000 !important
}


.focusClassFieldPnC{
background:#00ff00 !important
}
23
netemp
Ext.define('myApp.Grid', {
        extend: 'Ext.Grid',
        alias: 'widget.mygrid'
        ....
        ....
        }

これでxtype： 'mygrid'を使用できます

7
Kunal
Ext.define('BS.view.MyGrid' , {
    extend: 'Ext.grid.Panel',
    alias: 'widget.my-grid',

    // Non-complex config types (booleans, integers, strings) go here
    width: 1000,
    autoHeight: true

    initComponent: function() {
        Ext.apply(this, {
            // complex configs (objects / arrays) go here
            columns: colModel,  
        });

        this.callParent(arguments);
    }
});
6
Izhaki

grid、Tableなどのextjs4のコンポーネントのソースを表示しないのはなぜですか。

そしてここにドキュメントがあります：

http://docs.sencha.com/ext-js/4-0/#/guide/components <==重要

http://docs.sencha.com/ext-js/4-0/#/guide/class_system

Ext.define('My.custom.Component', {
    extend: 'Ext.Component'
});
5
atian25