ExtJs 4 ...如何擴展Extjs 4組件？

Question

有人可以幫助我如何使用extjs版本4來擴展extjs組件。我正在尋找適當的語法。請幫忙..！！

Answer 1

爲何不見extjs4的組件，如網格，表的src ...

，這裏是文檔：

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' 
}); 

Answer 2

Ext.define('myApp.Grid', { 
     extend: 'Ext.Grid', 
     alias: 'widget.mygrid' 
     .... 
     .... 
     } 

現在你可以使用xtype：'myg擺脫」

Answer 3

以下是延伸文本字段的在ExtJS的示例代碼4.

其他然後使用現有的configs和方法，該擴展組件還具有創建了一個新的配置屬性和新的方法來創建&具有相關聯的事件。

組件的用途很簡單，如果該值是強制性的，它將以紅色顯示標籤，修改該字段的背景顏色（如果其只讀）並且還會在聚焦時更改該字段的背景顏色。

該代碼已正確評論。希望能幫助到你。

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 
} 

Answer 4

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); 
    } 
});