может кто-нибудь помочь мне с расширением компонентов extjs с помощью extjs версии 4. Я ищу правильный синтаксис для этого. пожалуйста, помогите..!!
ExtJs 4... Как расширить компоненты Extjs 4?
Ответ 1
Ниже приведен пример кода расширения текстового поля в 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
}
Ответ 2
Ext.define('myApp.Grid', {
extend: 'Ext.Grid',
alias: 'widget.mygrid'
....
....
}
теперь вы можете использовать xtype: 'mygrid'
Ответ 3
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);
}
});
Ответ 4
почему бы не увидеть src компонентов extjs4, таких как Grid, Table...
и вот документы:
http://docs.sencha.com/ext-js/4-0/#/guide/components < == important
http://docs.sencha.com/ext-js/4-0/#/guide/class_system
Ext.define('My.custom.Component', {
extend: 'Ext.Component'
});