轻松搞定ExtJs 3.4 (2)

时间：2022-06-28 18:25:22

ok，接上回，我们已经完成了一个界面，一颗ajax tree，那么今天我们将完成树的事件的侦听，表格的实现和extjs的继承。

首先，我们来完成最容易的东东，树的侦听，修改上一节的tree代码，使它看起来像这个样子：

轻松搞定ExtJs 3.4 (2)

easy吧，listeners是一个初始化属性，专门用于定义事件的，在api中大家可以自行查找，里面的东东很丰富，选择一个适合自己的吧，

什么？你问我这个attributes是哪里来的？其实，我是firebug来的......，别扔砖头啊。

轻松搞定ExtJs 3.4 (2)

好吧，我确实偷懒了，但是有神器干嘛不用呢？不能应为有了汽车就忘记自己还会走路的是吧，嘿嘿。

ok，其余的控件，大家都知道该如何搞定了吧。

那么我们继续，开始extjs的继承，重量级明星，鼓掌!~~~~

extjs的继承来自于这个函数：Ext.extend(),extjs 4之后的使用另外的一个函数好像叫Ext.define(),各位可以去查查。

我们重写一个button，来段实在的例子，它看起来像这样子：

轻松搞定ExtJs 3.4 (2)

看懂了吗？我们的Ext.ux.TestButton继承来自于Ext.Button，这个button在被运行后大概是这样子的

轻松搞定ExtJs 3.4 (2)

现在我们有了重量级武器，继承，那么意味着什么呢？意味着我们现在可以进入一个被到处吓人的境界，组件化开发。

我们在正式的项目的时候会有这方面的需求，因为为了保证界面的统一和用户习惯的统一，我们需要大部分的界面进行封装，

让调用的人使用简单，并且还可以根据需要在继承扩张，这样我们是不是更面向对象呢？

下面，主角来了哦，我们的table，我们先来个基类，让所有的table都来自于这个basetable，主要是定义下样式，看起来统一点^^。

 1 Ext.namespace("hyxy.base");                                         //命名空间
 2 
 3 //所有表格显示的基本类型
 4 //需要传入id，store，columnsmodel
 5 hyxy.base.BaseGridPanel = Ext.extend(Ext.grid.GridPanel,{
 6     constructor : function  (conf) {　　　　　　　　　　　　　　　　　　　　　　
 7         hyxy.base.BaseGridPanel.superclass.constructor.call(this,{
 8             id : conf.id,
 9             store : conf.store,
10             frame : true,
11             waitMsg : '正在载入数据......',
12             viewConfig : {
13                 forceFit : true
14                 //getRowClass : function(record,rowIndex,p,ds){                     //自定义行颜色
15 
16                 //}
17             },
18             columnLines : true,
19             stripeRows: true,
20             autoHeight : true,
21             autoScroll : true,
22             loadMask : true,
23             stateful: true,
24             sm : new Ext.grid.CheckboxSelectionModel(),                            //是否有复选模式
25             columns : conf.columns,                                                //列模式
26             bbar : new Ext.PagingToolbar ({
27                 pageSize : 20,                  //每页显示页数
28                 store : hyxy.templ.WebPart.webPartStore,
29                 displayInfo : true,
30                 emptyMsg : '没有数据'
31             }),
32             tbar : new Ext.Toolbar({
33                 id : 'webpartbar',
34                 items : [
35                     {
36                         xtype:'button',
37                         text : '添加',
38                         id : 'add',
39                         icon : '/images/add.ico'
40                     },
41                     {
42                         xtype:'button',
43                         text : '修改',
44                         id : 'update',
45                         icon : '/images/update.ico'
46                     },
47                     {
48                         xtype:'button',
49                         text : '删除',
50                         id : 'del',
51                         icon : '/images/del.ico'
52                     }
53                 ],
54                 listeners: {
55                     render : function(){
56                         var addBtn = Ext.getCmp('add');
57                         var upBtn = Ext.getCmp('update');
58                         var delBtn = Ext.getCmp('del');
59 
60                         addBtn.on('click',function(){
61                            
62                         });
63 
64                         upBtn.on('click',function(){
65                             alert('b');
66                         });
67 
68                         delBtn.on('click',function(){
69                             alert('c');
70                         });
71                     }
72                 }
73             })
74         })
75     }
76 });

 

这里重载了constructor方法，需要强调一点，如果我们重载constructor方法，那么Extjs的处理和其他的方法并不一样，特别强调哦，有什么不一样，大家看看Ext.extend的源码就知道，

这里不是我的重点，所以，掠过了哦^^。

ok，今天我们学习了tree的listeners，extjs的继承，并且通过继承重写了一个table，下一张我将给大家介绍extjs中的table是如何加载数据的，如何建立表结构的，其实秘密就在Store,columns

这两个属性中哦。

标签：

相关文章