Extjs实战(Extjs+Spring+Hibernate+dwr)章二:控件的组件化(二) 代码演示
来源:互联网 发布:办理英语四级证书 淘宝 编辑:程序博客网 时间:2024/06/05 07:07
OK,接着上一篇文章说extjs中的组件化,现在我直接贴出我做的系统的代码,进行讲解,希望对各位同学有帮助。
一般而言,我们在使用extjs进行富客户端的开发的时候,一般会在系统主界面的左边显示如图所示的菜单:
那么这个功能是怎么实现的?没错就是用到了组件化的概念(当然,不用组件化也是能实现的,组件化就是以面向对象的思维来编写我们的extjs代码),具体代码如下:
Ext.namespace('Ext.left');Ext.left.LeftPanel = Ext.extend(Ext.Panel, {initComponent : function() {Ext.left.LeftPanel.superclass.initComponent.call(this, arguments);},getOneTreePanel : function() {return this.treeOnePanel || (function() {this.treeOnePanel = new Ext.tree.TreePanel({title : '订单管理',collapsible : true,xtype : 'treepanel',width : 200,autoScroll : true,split : true,rootVisible : false,loader : new Ext.tree.TreeLoader(),root : new Ext.tree.AsyncTreeNode({expanded : true,children : [{text : '全部订单',leaf : true,iconCls : 'plugs',listeners : {"click" : this.qureyAllOrder}}, {text : '新增订单',iconCls : 'addorder',leaf : true,listeners : {"click" : this.addNewOrder}}, {text : '订单计划',iconCls : 'orderplan',leaf : true,listeners : {"click" : this.carsPlan}}]})});return this.treeOnePanel;}.createDelegate(this)());},//这里我值列出一个功能模块的菜单});
现在主要对以上代码进行讲解:
Ext.namespace('Ext.left');Ext.left.LeftPanel = Ext.extend(Ext.Panel, {initComponent : function() {Ext.left.LeftPanel.superclass.initComponent.call(this, arguments); }})
上面这点代码就如java里面我们申明了一个包,这个包是:Ext.left,在extjs里面这个叫做命名空间,在这个包里面我们自己申明了一个自己的类:LeftPanel,这个类继承了extjs里面已经有了的类:Ext.Panel,其实这里我们就相当于创建了一个panel(后续会在这个panel里面添加东西),我们创建的这个类呢有一个构造函数:initComponent(){},我们在使用这个类的时候,构造函数里面的代码会首先执行(如java)。
基本而言,在进行组件化的时候,我们 都会按照这样的格式来写。
我们已经申明了这么一个类,这个类只有一个骨架并没有具体的内容,我们就需要在里面添加自己要添加的内容,如第一段代码一样,我自己写了一个方法,叫:getOneTreePanel(),这个方法用于返回一个panel,返回的panel是一棵树,树里面有我们自己需要的以一些菜单(注意,创建树的时候我用了单例模式的概念来创建),
那么这只是一个类里面的方法而已,我们在创建这个类的时候并没有执行到这个函数(说明,像这样创建类:var myPanel=new Ext.left.LeftPanel()。靠,你确定不是java代码?。。。。好吧),那么就是说这棵树还不能显示在我们的主panel中,现在只要在initComponent(){}里面执行:this.add(this.getOneTreePanel());就可以把树加入到panel中(没事儿闲着那就试试呗)。
要加入其它的panel也是一样的。这TM就是组件化,哎。。。。。
- Extjs实战(Extjs+Spring+Hibernate+dwr)章二:控件的组件化(二) 代码演示
- Extjs实战(Extjs+Spring+Hibernate+dwr)章二:控件的组件化(一)
- Extjs实战(Extjs+Spring+Hibernate+dwr)章二:控件的组件化(三)通常问题
- Extjs实战(Extjs+Spring+Hibernate+dwr)章一:各框架的整合
- ExtJS 自定义组件(二)
- ExtJs表格控件(二)
- EXTjs的案例(二)
- ExtJS学习心得(二)
- ExtJS学习心得(二)
- ExtJS学习心得(二)
- Extjs介绍(二)
- extjs Grid (二)
- extjs学习(二)
- extjs入门(二)
- ExtJS 组件扩展 组件化编程 扩展组件 组件编程(二)
- ExtJS+DWR+Spring+Hibernate开发HRMS(1)
- ExtJS+DWR+Spring+Hibernate开发HRMS(2)
- ExtJS+DWR+Spring+Hibernate开发HRMS(3)
- UVa10098 Generating Fast, Sorted Permutation
- [MFC]选择目录对话框和选择文件对话框
- 《Android内核剖析》笔记 第2章 Java基础&异步消息处理模型
- Linux xargs命令
- Deploying Studio Applications
- Extjs实战(Extjs+Spring+Hibernate+dwr)章二:控件的组件化(二) 代码演示
- asp.net中session的原理及应用
- 指针基础
- django 非常实用的无限级分类功能
- 新的征程
- Svn——安装说明
- Oracle—— scott解锁
- Oracle——暂停/启用服务
- JAVA 遍历文件夹下的所有文件(递归调用和非递归调用)