Extjs4.1插件开发总结（扩展主题风格选择框）

     经过一天的简单extjs4.1插件开发，自我感觉基本找到点头绪，和EXTJS2.2插件开发很相似。

EXTJS2.2的插件开发基本如下：

  定义别名

Ext.namespace("Swfu");
Ext.namespace("Swfu.BackMgr");

定义控件

Ext.ux.ThemeChange=Ext.extend(Ext.form.ComboBox,
    { /*控件基本属性 */editable:false,displayField　:'theme',valueField:'css',typeAhead:true,mode:'local',triggerAction:'all',selectOnFocus:true,
  /*初始化控件 */ initComponent:function(){

 /*定义扩展控件可能用到的变量或样式如ITEMS等 */

var theme=[['默认','ext-all.css'],['黑色','xtheme-black.css'],['巧克力','xtheme-chocolate.css'],['深灰色','xtheme-darkgray.css'],['粉色','xtheme-pink.css'],['浅灰色','xtheme-gray.css'],['墨绿','xtheme-green.css'],['靛青色','xtheme-indigo.css'],['深夜','xtheme-midnight.css'],['椒盐色','xtheme-peppermint.css'],['紫色','xtheme-purple.css'],['银白色','xtheme-silverCherry.css'],['暗蓝','xtheme-slate.css'],['Vista','xtheme-slickness.css']];
this.store=new Ext.data.SimpleStore({fields:['theme','css'],data:theme});
this.value=getCookie("cssSheet");

Ext.util.CSS.swapStyleSheet('theme','../Content/scripts/extjs/resources/css/'+getCookie("cssSheet"))},
//初始化事件

initEvents:function(){this.on('collapse',function(){Ext.util.CSS.swapStyleSheet('theme','../Content/scripts/extjs/resources/css/'+this.getValue());SetCookiecssSheet",this.getValue())})

//可能还有句Ext.ux.ThemeChange.superclass.initComponent.apply(this, arguments);控件父类初始化时应用该控件初始化的设置

});

//注册控件
Ext.reg('ThemeChange',Ext.ux.ThemeChange);

基本上如上格式。

Extjs4.0后的扩展控件定义格式如下：（以上面控件为例）

Ext.define('Ext.ux.themeChange', {

   //申明扩展基类

    extend: 'Ext.form.field.ComboBox',   

   //变量属性 

   xtype: 'themeChange',    //如果需要用{xtype:'themeChange'}定义该项
    id: 'themeChange',
    name: 'themeChange',
    width: 150,
    labelWidth: 60,
    labelSeparator: '：', //分隔符  
    fieldLabel: '风格',
    editable: false,
    triggerAction: 'all', //单击触发按钮显示全部数据  

    displayField: 'theme',
    valueField: 'css',
    queryMode: 'local', //本地模式  

//控件初始化
    initComponent: function () {

   

 /*定义扩展控件可能用到的变量或样式如ITEMS等 */

        var themes = [['默认', 'ext-all.css'],
                                  ['黑色', 'ext-all-access.css'],
                                  ['巧克力', 'xtheme-chocolate.css'],
                                  ['深灰色', 'xtheme-darkgray.css'],
                                  ['粉色', 'xtheme-pink.css'],
                                  ['浅灰色', 'xtheme-gray.css'],
                                  ['墨绿', 'xtheme-green.css'],
                                  ['靛青色', 'xtheme-indigo.css'],
                                  ['深夜', 'xtheme-midnight.css'],
                                  ['椒盐色', 'xtheme-peppermint.css'],
                                  ['紫色', 'xtheme-purple.css'],
                                  ['银白色', 'xtheme-silverCherry.css'],
                                  ['暗蓝', 'xtheme-slate.css'],
                                  ['Vista', 'xtheme-slickness.css']];

        Ext.regModel('Theme', {
            fields: ['theme', 'css']
        });

        var themeStore = Ext.create('Ext.data.Store', {
            model: 'Theme',
            data: themes
        });
      
        this.value = getCookie('cssSheet');
        Ext.util.CSS.swapStyleSheet('theme', '../Content/scripts/extjs/resources/css/' + getCookie('cssSheet'));

        Ext.applyIf(this, {
            store: themeStore,
            listeners: {

               //定义控件事件

                  collapse: function () {
                    SetCookie('cssSheet', this.value);
                    Ext.util.CSS.swapStyleSheet('theme', '../Content/scripts/extjs/resources/css/' + this.value);
                    contentIframe.window.themeChange(this.value);
                    scope: this
                }
            }
        });

        this.callParent(arguments);
    } //可能还有些控件自定义的函数或绑定函数

});

上面两上定义出来的的控件运行后如下：

。

c#加上extjs后就变成编写脚本了。就可惜调试功能太差，出错根本不知道在哪，界面也出不来。明天开始学GRIDPANEL和TREEPANEL扩展插件了。