自定義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;