本文目录一览：
- 1、Extjs 4如何自定义Panel
- 2、extjs3 中怎么动态的增加自定义样式
- 3、extjs怎样自定义图片，并把它变成iconcls类
- 4、extjs怎么自定义函数
- 5、extjs4.0 怎么修改背景颜色和字体
Extjs 4如何自定义Panel
要达到你的效果，可以用2种方法
1是每次使用都new一个panel组件，使用相同配置
2是只创建一个panel组件，每次使用时更新它的内容
这里你自己取舍吧
方法1
function createNP(target){
var config = {
width: 200,
height: 200,
bodyStyle: {
background: '#F00'
},
renderTo: target
};
return Ext.create('Ext.panel.Panel', config);
}
方法2
var p = Ext.create('Ext.panel.Panel', {
width: 200,
height: 200,
bodyStyle: {
background: '#F00'
},
renderTo: Ext.getBody()
});
p.update('字符串或html');
p.removeAll();
p.add({
//新组件
})
extjs3 中怎么动态的增加自定义样式
代码：Ext.get('div-id').setStyle({color:'red'});
Ext.get('div-id')是通过id返回一个Ext.Element对象，类似于jQuery的 $('#div-id')返回的对象
.setStyle({color:'red'})是Ext.Element对象上的一个方法，用来设置这个层的样式
更多Ext.Element对象的API请参考文档。
extjs怎样自定义图片，并把它变成iconcls类
iconCls类?? 比如一个按钮的图标??
这个你参考一下就可以了...
比如在css里定义一个
.ico_add {background-image:url(../ico/add.png)}
然后再Js中
{xtype:"button" , text:"添加" , iconCls:"ico_add}
就可以显示上面的图标了...当然图标尺寸一般16X16就可以
extjs怎么自定义函数
extjs的自定义事件主要分三步
1.在类中定义事件名称：
Person = function(config) {
Person.superclass.constructor.call(this, config);
this.name = config.name || '';
this.sex = config.sex || '';
this.addEvents({
"nameChange": true,
"sexChange": true
});
};
2.实例化对象，并在该对象中定义事件的监听函数
var person = new Person({
name: 'binoruv',
sex: 'man'
});
person.on("nameChange", function() { alert("Name has been changed to " + this.name); });
person.on("sexChange", function() { alert("Sex has been changed to " + this.sex); });
3.触发事件
Ext.extend(Person, Ext.util.Observable, {
//extend函数中可以自定义新的方法，也可以重写原类的方法
setName: function(_name) {
if (this.name != _name) {
this.name = _name;
this.fireEvent("nameChange", this);
}
},
setSex: function(_sex) {
if (this.sex != _sex) {
this.sex = _sex;
this.fireEvent("sexChange", this);
}
}
});
person.setName("binoruv");
person.setSex("woman");
整个代码如下：
script type="text/javascript"
Person = function(config) {
/*
此处addEvents是调用Person父类Ext.util.Observable的方法
api中对Observable的描述：一个抽象基类（Abstract base class），为事件
机制的管理提供一个公共接口。子类应有一个"events"属性来
定义所有的事件。
*/
Person.superclass.constructor.call(this, config);
this.name = config.name || '';
this.sex = config.sex || '';
this.addEvents({
"nameChange": true,
"sexChange": true
});
};
Ext.extend(Person, Ext.util.Observable, {
setName : function(_name) {
if (this.name != _name) {
this.name = _name;
this.fireEvent("nameChange", this);
}
},
setSex : function(_sex) {
if (this.sex != _sex) {
this.sex = _sex;
this.fireEvent("sexChange", this);
}
}
});
Ext.onReady(function() {
var person = new Person({
name: 'binoruv',
sex: 'Man'
});
person.on("nameChange", function() { /*debugger;*/Ext.Msg.alert("Message","Name has been changed to " + this.name); });
person.on("sexChange", function() { /*debugger;*/Ext.Msg.alert("Message", "Sex has been changed to " + this.sex); });
person.setName("binoruv");
person.setSex("Woman");
});
/script
extjs4.0 怎么修改背景颜色和字体
在extjs4.0中修改背景颜色和字体可以用style配置选项：
如下：
Ext.define 'App.your_package.CustomToolbar',
extend: 'Ext.toolbar.Toolbar'
xtype: 'my-custom-toolbar'
style: 'background-color: #112D41;font-family:"Times New Roman",Georgia,Serif;'
style设置了背景颜色为#112D41，字体为：Times New Roman",Georgia,Serif;