Extjs 通过继承自定义控件

// 1、引入命名空间
Ext.namespace("ExtUD.Ext");//相当于java中包的作用
// 2、编写自定义控件类
ExtUD.Ext.UDPanel = Ext.extend(Ext.Panel, {
   title : '自定义控件',
   html:'自定义控件面板',
   layout:'fit',
   getAlert:function(){alert('自定义控件函数！');}
  });
// 3、注册控件
Ext.reg('udpanel', ExtUD.Ext.UDPanel);//第一个参数为自定义控件的xtype

//4、使用自定义控件
Ext.onReady(function() {
var temp = new ExtUD.Ext.UDPanel({
   renderTo : document.body
  });
 temp.show(); 
 temp.getAlert();
});

Js代码  

1. Ext.grid.DynamicGrid = Ext.extend(Ext.grid.GridPanel, {  
2.     initComponent: function() {  
3.         //创建store  
4.         var ds = new Ext.data.Store({  
5.             url: this.storeUrl,  
6.             reader: new Ext.data.JsonReader()  
7.         });  
8.           
9.         //设置默认配置  
10.         var config = {  
11.             viewConfig: {  
12.                 forceFit: true  
13.             },  
14.             enableColLock: false,  
15.             loadMask: true,  
16.             border: true,  
17.             stripeRows: true,  
18.             ds: ds,  
19.             columns: []  
20.         };  
21.           
22.         //给分页PagingToolbar绑定store  
23.         this.bbar.bindStore(ds, true);  
24.           
25.         Ext.apply(this, config);  
26.         Ext.apply(this.initialConfig, config);  
27.         Ext.grid.DynamicGrid.superclass.initComponent.apply(this, arguments);  
28.     },  
29.       
30.     onRender: function(ct, position) {  
31.         this.colModel.defaultSortable = true;  
32.         Ext.grid.DynamicGrid.superclass.onRender.call(this, ct, position);  
33.   
34.         this.el.mask('Loading...');  
35.         this.store.on('load', function() {  
36.             if (typeof(this.store.reader.jsonData.columns) === 'object') {  
37.                 var columns = [];  
38.                   
39.                 if (this.rowNumberer) {  
40.                     columns.push(new Ext.grid.RowNumberer());  
41.                 }  
42.                   
43.                 if (this.checkboxSelModel) {  
44.                     columns.push(new Ext.grid.CheckboxSelectionModel());  
45.                 }  
46.                   
47.                 Ext.each(this.store.reader.jsonData.columns,   
48.                     function(column) {  
49.                         columns.push(column);  
50.                     }  
51.                 );  
52.                       
53.                 this.getColumnModel().setConfig(columns);  
54.             }  
55.                   
56.             this.el.unmask();  
57.         }, this);  
58.           
59.         this.store.load();  
60.     }  
61. });  

 

创建grid

Js代码  

1. var dynamicGrid = new Ext.grid.DynamicGrid({  
2.         title: '测试动态列',  
3.         renderTo: 'dynamic-grid',  
4.         storeUrl: 'goods/dynamicGrid.do',  
5.         width : 600,  
6.         height: 200,  
7.         rowNumberer: true,  
8.         checkboxSelModel: true,  
9.         sm: new Ext.grid.CheckboxSelectionModel(),  
10.         bbar : new Ext.PagingToolbar({  
11.             pageSize : 5,  
12.             displayInfo : true,  
13.             displayMsg : '显示第{0}到{1}条数据,共{2}条',  
14.             emptyMsg : "没有数据",  
15.             beforePageText : "第",  
16.             afterPageText : '页 共{0}页'  
17.         })  
18.     });  

 

返回的数据格式

Json代码  

1. {  
2.     'metaData': {  
3.         'totalProperty': 'total',  
4.         'root': 'records',  
5.         'id': 'id',  
6.         'fields': [  
7.             {'name': 'id', 'type': 'int'},  
8.             {'name': 'name', 'type': 'string'}  
9.         ]  
10.     },  
11.     'success': true,  
12.     'total': 50,  
13.     'records': [  
14.         {'id': '1', 'name': 'AAA'},  
15.         {'id': '2', 'name': 'BBB'}  
16.     ],  
17.     'columns': [  
18.         {'header': '#', 'dataIndex': 'id'},  
19.         {'header': 'User', 'dataIndex': 'name'}  
20.     ]  
21. }