自定义extjs主题的简单介绍

• 1、Extjs 4如何自定义Panel
• 2、extjs3 中怎么动态的增加自定义样式
• 3、extjs怎样自定义图片，并把它变成iconcls类
• 4、extjs怎么自定义函数
• 5、extjs4.0 怎么修改背景颜色和字体

要达到你的效果，可以用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({

    //新组件

})

代码：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请参考文档。

iconCls类?? 比如一个按钮的图标??

这个你参考一下就可以了…

比如在css里定义一个

.ico_add {background-image:url(../ico/add.png)}

然后再Js中

{xtype:”button” , text:”添加” , iconCls:”ico_add}

就可以显示上面的图标了…当然图标尺寸一般16X16就可以

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中修改背景颜色和字体可以用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;