extjs3 自定义组件

来源：互联网发布：盛杰影视网络课编辑：程序博客网时间：2024/06/08 22:21

1、extjs3自定义组件的一种写法

2、代码

自定义组件：

CreateTablePanel=Ext.extend(Ext.grid.GridPanel,{        height:200,        width:500,        initComponent : function(){            //1. 定义表格            this.cm = new Ext.grid.ColumnModel([                { header: '编号', dataIndex: 'id' },                { header: '性别', dataIndex: 'sex' },                { header: '名称', dataIndex: 'name' },                { header: '描述', dataIndex: 'desc' }            ]);            //2. 创建数据源            var data = [                ['1', '男', '张三丰', '是个作家'],                ['2', '男', '石曼迪', '会武功'],                ['3', '男', '姜子牙', '能捉鬼'],                ['4', '女', '穆桂英', '好像是皇帝'],                ['5', '男', '孙悟空', '高级程序员']            ];            //3. 解析数据源            this.ds = new Ext.data.Store({                proxy: new Ext.data.MemoryProxy(data),                reader: new Ext.data.ArrayReader({}, [                    { name: 'id' }, { name: 'sex' }, { name: 'name' }, { name: 'desc' }                ])            });            this.ds.load();            CreateTablePanel.superclass.initComponent.call(this);        }    });

调用组件：

var panel = new Ext.Panel({        title: '测试',        width:500,        renderTo: document.body    });    var grid = new CreateTablePanel();    panel.add(grid);    panel.doLayout();

3、效果

0 0