代码量,BUG和维护成本是水涨船高的关系,这点应该不能被否认的,因此如何的减少代码的编写量成了很多人努力的一个方向.当然,这肯定不是为了偷懒
减少代码量的编写自然是对象的重复利用,以前所写的组件化,它确实是一个独立的对象,可以拿来重用,但是,写到最后会发现,这些组件往往只是使用了一次而已,而且根据需求的不同会发现这个组件根本就无法被重新使用了(定制性太强)
于是,我们就需要拆分这个组件,看看这些组件中都有哪些东西是经常被用到的.
比如导航栏,一排导航十多个按钮,他们都是按钮,但是他们的handler虽然都是切换显示页面,但是每个按钮所负责的页面却是不同的,曾经有人问过,我是不是要为每一个按钮都编写一个handler处理函数?
Ext.onReady(function(){
var panel = new Ext.Panel({
renderTo:Ext.getBody(),
border:false,
tbar: [{
xtype: 'buttongroup',
columns: 6,
title: '客户管理',
// defaults:{xtype:"xmenubutton"},
items: [{
text: '客户信息',
scale: 'large',
rowspan: 2,
handler:function(){
//TODO 处理
},
iconCls: 'menuDefault_32',
iconAlign: 'top'
},{
text: '新增客户',
scale: 'large',
rowspan: 2,
handler:function(){
//TODO 处理
},
iconCls: 'menuDefault_32',
iconAlign: 'top'
},{
text: '客户通讯录',
scale: 'large',
rowspan: 2,
handler:function(){
//TODO 处理
},
iconCls: 'menuDefault_32',
iconAlign: 'top'
}]
}]
});
});
这样写起来,一旦导航多了,就比较麻烦了,代码显得很乱,不好维护,怎么办?
也许有人会这么去写它:
Ext.onReady(function(){
function onBtnClickHandler(btn){
switch (btn.text){
case "客户信息":
//TODO
alert("aaa");
break;
case "新增客户":
//TODO
break;
case "客户通讯录":
//TODO
break;
}
}
var panel = new Ext.Panel({
renderTo:Ext.getBody(),
border:false,
tbar: [{
xtype: 'buttongroup',
columns: 6,
title: '客户管理',
items: [{
text: '客户信息',
scale: 'large',
rowspan: 2,
handler:onBtnClickHandler,
iconCls: 'menuDefault_32',
iconAlign: 'top'
},{
text: '新增客户',
scale: 'large',
rowspan: 2,
handler:onBtnClickHandler,
iconCls: 'menuDefault_32',
iconAlign: 'top'
},{
text: '客户通讯录',
scale: 'large',
rowspan: 2,
handler:onBtnClickHandler,
iconCls: 'menuDefault_32',
iconAlign: 'top'
}]
}]
});
});
这样看起来就好很多,实现了业务与现实的分离,但是按钮多了,还是很郁闷,要写很多switch/case,
如何省去这些步骤呢?
我们发现他们的handler有一个共同点就是,都是负责切换显示页面的(也可能是弹出Window).
那么有这点相同就可以了,我直接就贴上来我的处理方法吧:
先写一个全局的对象,用于处理这些按钮如下:
Ext.namespace("Crm.Control.ConstEvent");
/**
* 核心控制器
* @type
*/
Crm.Control.ConstEvent = {
isInit:false,
//初始化,主要是为该对象提供一个可以切换的容器,相当于Iframe
init:function(panel){
this.panel = panel;//当做IFrame来使
this.isInit = true;
},
/**
* 切换主容器显示的内容函数(就是初始化传递进来的Panel)
* @param {} obj 一个字符串(具体是什么字符串请看下面的例子)
*/
changePanel:function(obj){
//如果已经初始化
if (this.isInit) {
//由于时间关系,我这里就不判断是否已经存在相同的对象了,按理来讲应该判断一下传递进来的obj是否与
//当前显示的obj是一个东西,如果是一个东西则return,至于如何判断,还是等下次再说吧
try{
this.panel.removeAll();//先移除先前加载进来的Panel(注意释放内存,此处省略)
}catch(e){
//EXTJS自带报表切换时会出现异常,具体原因不明,仅在IE下会出现此异常
}finally{
this.panel.add(eval(obj));//eval menuButton传递进来的对象(实际是个字符串具体看下面的例子)
this.panel.doLayout();//调用布局函数,这样才会显示你刚刚添加进来的组件
}
}
},
/**
* 如果按钮指向的对象是window则使用此函数
* @param {} obj 一个字符串
*/
showWindow:function(obj){
if (Ext.getCmp(obj.id)) {
Ext.getCmp(obj.id).show();
return;
}
if (this.isInit) {
if(Ext.getCmp(obj.substring(4,obj.length-2))){
Ext.getCmp(obj.substring(4,obj.length-2)).show();
return;
}
eval(obj).show();
}
}
};
下面是所有MenuButton的父类:
Ext.namespace("Ext.ux.MenuButton.Button","Ext.ux.MenuButton.SplitButton");
Ext.ux.MenuButton.Button = Ext.extend(Ext.Button,{
pageObject:"",//此按钮将要指向的那个模块(例如"new AAA.bbb.ccc()")
isWindow:false,//此按钮指向的那个模块是否是一个window
handler:function(btn){
if (btn.isWindow) {
Crm.Control.ConstEvent.showWindow(btn.pageObject);//如果按钮所包含的实体类是个window,则调用window展示函数
return;
}
if (this.pageObject!="") {
Crm.Control.ConstEvent.changePanel(btn.pageObject);//如果按钮所包含的实体类是个页面,则调用展示Panel的函数
}
}
});
Ext.reg("xmenubutton",Ext.ux.MenuButton.Button);
Ext.ux.MenuButton.SplitButton = Ext.extend(Ext.SplitButton,{
pageObject:"",
handler:function(btn){
if (btn.isWindow) {
Crm.Control.ConstEvent.showWindow(btn.pageObject);
return;
}
if (this.pageObject!="") {
Crm.Control.ConstEvent.changePanel(btn.pageObject);
}
}
});
Ext.reg("xsplitbutton",Ext.ux.MenuButton.SplitButton);
那么我们最上面的Menu就可以这么去写它
var panel = new Ext.Panel({
renderTo:Ext.getBody(),
border:false,
tbar: [{
xtype: 'buttongroup',
columns: 6,
defaults:{xtype:"xmenubutton"},
title: '客户管理',
items: [{
text: '客户信息',
scale: 'large',
rowspan: 2,
pageObject:"new Crm.Module.Client.BaseInfo()",//一个对象,用于传递给所谓的"核心控制器",就是上面的全局变量
iconCls: 'menuDefault_32',
iconAlign: 'top'
},{
text: '新增客户',
scale: 'large',
rowspan: 2,
isWindow:true,
pageObject:"new Crm.Module.Client.NewClient()",
iconCls: 'menuDefault_32',
iconAlign: 'top'
},{
text: '客户通讯录',
scale: 'large',
rowspan: 2,
pageObject:"new Crm.Module.Client.AddList()",
iconCls: 'menuDefault_32',
iconAlign: 'top'
}]
}]
});
这样一来,我们就可以少写很多代码了.
最近很忙,没时间来JE逛,所写的东西基本上是代码多,话少,写的比较乱....没办法...为了能好好的过年...老命豁出去了,对不住了.
2009年11月11日2:14:20 北京
分享到:
相关推荐
5. **模板和样本**:IDE可能提供了一些预定义的模板和代码样本,方便开发者快速创建常见的ExtJS组件或布局。 **配合使用** 将Spket 1.6.11与ExtJS 2.0结合,开发者可以在一个集成的环境中高效地编写和测试ExtJS应用...
##### 4.5 ExtJS组件的事件处理 - **事件管理**:事件统一由`Ext.EventManager`对象管理,与浏览器W3C标准事件对象`Event`相对应,Ext封装了一个`Ext.EventObject`事件对象。 - **事件绑定**:Ext支持多种方式来...
它提供了一整套组件化的用户界面元素,并支持丰富的数据绑定和交互模式。在开发过程中,有时需要根据数据库结构或者业务需求自动生成相应的ExtJS代码,以提高开发效率和代码一致性。下面将详细解释如何使用ExtJS进行...
综上所述,正确理解和运用ExtJS组件扩展的两个层次,不仅能够帮助开发者构建高效稳定的Web应用,还能显著提升开发效率和代码质量。通过避免常见的错误,合理规划组件扩展的层次,并遵循最佳实践,可以有效促进项目的...
EXTJS是一种基于JavaScript的前端框架,它提供了丰富的组件库,用于构建富客户端应用程序。这个压缩包文件的内容看起来是一个完整的EXTJS项目,包含了数据库交互、动态树结构和菜单功能,并且集成了SpringMVC后端...
在编写EXTJS代码的过程中,保持代码的整洁和规范是至关重要的,这有助于提高代码可读性,减少错误,并便于团队协作。因此,有一个良好的代码格式化工具对于EXTJS开发者来说是必不可少的。 在JavaScript和HTML开发中...
- 数据展示:提供了各种图表组件,如饼图、柱状图、线图等,用于数据可视化。 - 表格操作:具有排序、筛选、分页等功能,支持远程数据加载。 - 表单元素:包含了多种表单输入控件,如文本框、下拉框、日期选择器...
ExtJS 的核心特性包括组件化设计、数据绑定、丰富的UI组件、强大的表单处理、灵活的布局管理以及响应式设计。在6.2.0 版本中,这些方面可能有所增强和完善: 1. **组件系统**:ExtJS 采用组件化开发模式,允许...
这些工具能提高开发效率,减少手动编写代码的时间。 总之,掌握ExtJS 3.1组件的使用,不仅需要熟悉其组件模型、样式系统和JavaScript API,还需要理解如何与后端(如JSP)进行数据交互,以及利用源码和工具提升开发...
通过使用这样一个定制化的ExtJS代码编辑工具,开发者可以更高效地进行ExtJS应用的开发,减少出错率,提升开发体验。记得按照提供的安装说明进行操作,确保工具能够正确地安装和运行。在使用过程中,如果遇到任何问题...
1. **可视化设计**:该编译器提供了拖放功能,用户可以直接在界面上选择和放置EXTJS组件,如按钮、表格、面板等,无需编写任何HTML或JavaScript代码。这种设计方式使得非程序员也能快速搭建网页界面。 2. **组件库*...
8. **图表组件**:ExtJS的图表组件功能强大,可以创建各种复杂的图表,如柱状图、折线图、饼图等,适合数据可视化需求。 9. **社区支持**:作为一款成熟的开源框架,ExtJS拥有庞大的开发者社区,这意味着丰富的插件...
开发者可以通过这个DEMO学习到如何在实际项目中运用Struts2的Action和Result,Spring的依赖注入和事务管理,Hibernate的ORM机制,以及ExtJS的组件和数据绑定。同时,它也揭示了现代Web开发中前后端分离的趋势,通过...
ExtJS强调组件化开发,每个UI元素都可以看作一个独立的组件,可以组合使用构建复杂的用户界面。这种模块化的设计思路使得代码复用性高,减少了工作量。 8. **数据绑定** 数据绑定是ExtJS的一个强大特性,它允许...
该设计工具提供了直观的拖放界面,用户可以通过选择不同的EXTJS组件(如面板、表格、按钮等)并调整它们的属性来设计页面布局。这种设计方式极大地简化了EXTJS应用的开发流程,尤其是对于那些不熟悉EXTJS底层代码...
1. **组件化开发**:EXTJS 4.1.1 强调组件化编程,允许开发者通过组合各种UI组件(如表格、面板、按钮等)来构建复杂的用户界面。这些组件具有自包含的样式和行为,易于重用和维护。 2. **布局管理**:EXTJS 提供了...
#### 四、ExtJS与其他JavaScript库的兼容性 - **适配器(Adapters)**:ExtJS提供了适配器机制,使得它可以与其他JavaScript库(如jQuery)无缝协作。这对于希望同时利用多个库优势的开发者来说非常有用。 #### 五...
设计师可以快速创建复杂的表格、表单、树形结构和其他EXTJS组件,而无需手动编写大量的HTML和JavaScript代码。此外,这款工具还支持代码与设计视图之间的无缝切换,便于高级开发者对生成的代码进行微调。 免安装版...
GuiDesigner提供了直观的拖放界面,支持创建、编辑和预览ExtJS组件,使开发者能够快速构建用户界面。它包括了对多种组件的支持,如表格、面板、按钮等,并能自定义布局和样式。 3. **GuiDesigner版本** - Gui...
通过这些配置,开发者可以更快地学习和掌握ExtJS的API,减少编写代码时的错误,提高开发速度。同时,对于团队协作和代码一致性也有积极的促进作用。在实际开发过程中,配合Spket的其他功能,如代码格式化和错误检查...