经过一天的简单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扩展插件了。