一个Ext继承例子（下拉tree、grid、panel、form等组件的基类）

问题描述：

最近为了新项目的开发，针对后台和实际需要对前端框架进行了2次封装。什么都是从零开始，开始一点不会，但经过研究还是做了几个基类，封装了一些常用的方法。

　　2次封装带来了不少好处，如代码复用，效率提高了，为框架积累了不少，最重要是把Ctrl+C+V的习惯给改了，日产上千行代码到现在的上百行，现在除了新鲜的用户体验吸引我外还有继承、封装基类和组件。

　　现在，拿其中一个基类进行图解，希望对大家有帮助，如果发现有bug，请联系我，谢谢。

图1：基类代码

图2：运行子类

问题补充

joehe 写道

还有待加强，这个基本不能满足现实需要

这只是一个基类，你可以按照实际情况去继承创建
问题补充
这个主要意图在于说明封装的重要性
问题补充
[quote="shangtang004"]
我写的这个在IE下无法显示，但在firefox下可以
帮看看

this.on('expand',function(){
this.tree.render(this.treeId);
this.tree.root.reload();
});
},

这里最后一个 ‘}’, 多了一个逗号 ‘，’

答

[quote="littleJava"]Ext.reg('ContainerCombo',Mic.ux.ContainerCombo) 这句貌似不用写了，
直接就可以 myCombo = new Mic.ux.ContainerCombo();[/quote]
这个是注册机制

答

只用过Ext Core 方式,这种方式感觉还阔以,有待学习,.

答

还有待加强，这个基本不能满足现实需要

答

下拉表格我也扩展了一个,但是不好用,看看楼主怎么样

答

Ext.reg('ContainerCombo',Mic.ux.ContainerCombo) 这句貌似不用写了，
直接就可以 myCombo = new Mic.ux.ContainerCombo();

答

楼主有空的话是不是可以像efs框架那样做一个ext-all.js的二次封装。

答

Ext.ux.ComboBoxWithTree = function(boxfig){
Ext.apply(boxfig,{
store: new Ext.data.SimpleStore({
fields: [],
data: [[]]
}),
editable: false,
mode: 'local',
triggerAction: 'all',
tpl: "

",
selectedClass: '',
onSelect: Ext.emptyFn
});
Ext.ux.ComboBoxWithTree.superclass.constructor.call(this,boxfig);
};
Ext.extend(Ext.ux.ComboBoxWithTree,Ext.form.ComboBox,{
initComponent : function(){
Ext.ux.ComboBoxWithTree.superclass.initComponent.call(this,arguments);
this.tree = new Ext.tree.TreePanel({
animate: true,
frame: true,
height:200,
iconCls: "icon-tree",
autoScroll : true,
containerScroll : true,
submitId :this.submitId,
loader : new Ext.tree.TreeLoader({
dataUrl : this.dataUrl
}),
root: new Ext.tree.AsyncTreeNode({
text : '根组',
id : '0',
expanded:true
})
});
var combo = this;
this.tree.on('click',function(node,e){
Ext.getCmp( node.getOwnerTree().submitId).setValue(node.id);
combo.setValue(node.text);
combo.collapse(); // 隐藏ComboBox列表

    });
    this.on('expand',function(){
         this.tree.render(this.treeId);
         this.tree.root.reload();
    });
},

});
Ext.reg('comboWithTree',Ext.ux.ComboBoxWithTree);

     var combo = new Ext.ux.ComboBoxWithTree({
        fieldLabel: '所属组',
        name:'pgName',
        allowBlank:false,
        submitId : 'submitId',
        treeId : 'tree1',
        dataUrl : 'jsonData.jsp',
        emptyText : '请选择所属组'
    });
     var orign = new Ext.form.ComboBox({
        store:['男','女'],
     });

     Ext.onReady(function(){
        combo.render('combo');
        orign.render('orign');
     });

</script>

我写的这个在IE下无法显示，但在firefox下可以
帮看看

答

谢谢回答，终于第一个ext extend在IE通过了。

今天还出现了c00ce56e错误，这是因为客户端与服务端编码不一致，我服务端有了，utf8,客户端用了utf-8就出这样错了。

再次感谢

一个Ext继承例子（下拉tree、grid、panel、form等组件的基类）

相关推荐