ext表格范例

/**
 * @include "http://www.cnblogs.com/extclient/appbase.js"
 * @include "./SearchField.js"
 */
 
/*
 * 客户资料管理
 */
//创建命名空间
Ext.namespace('net.meetrice');
Ext.namespace('net.meetrice.zdglobal');
  

/**
 * 内容表单
 * @class net.meetrice.zdglobal.dtlformpanel
 * @extends Ext.form.FormPanel
 */
net.meetrice.zdglobal.dtlformpanel = Ext.extend(Ext.form.FormPanel,{
    initComponent:function() {
        Ext.apply(this,{
            labelWidth:60,
            labelAlign:'right',
            bodyStyle:'padding:10px',
            id:'dtlformpanel',
            items:[{
                xtype:'fieldset',
                title:'数据字典',
                autoHeight:true,
                items:[
                    {xtype:'textfield',fieldLabel:'编号',name:'jsbh',width:388},
                    {xtype:'textfield',fieldLabel:'业务类型',name:'ktype',width:388},
                    {xtype:'textfield',fieldLabel:'数字代码',name:'numkey',width:388},
                    {xtype:'textfield',fieldLabel:'拼音代码',name:'pykey',width:388},
                    {xtype:'textfield',fieldLabel:'字典内容',name:'kvalue',width:388},
                    {xtype:'textfield',fieldLabel:'备用A',name:'valuea',width:388},
                    {xtype:'textfield',fieldLabel:'备用B',name:'valueb',width:388},
                    {xtype:'textfield',fieldLabel:'备用C',name:'valuec',width:388}
                    ]
            }]
        });
        net.meetrice.zdglobal.dtlformpanel .superclass.initComponent.call(this);
    }
    
});

/**
 * 表单窗口
 * @class net.meetrice.zdglobal.dtlwin
 * @extends Ext.Window
 */        

net.meetrice.zdglobal.dtlwin =  Ext.extend(Ext.Window,{
    initComponent:function() {
        Ext.apply(this,{
            width:535,
            height:400,
            layout:'fit',
            closeAction:'hide',
            modal:true
        });
        net.meetrice.zdglobal.dtlwin.superclass.initComponent.call(this);
    }
});



/**
 * 主表格入口
 * @class net.meetrice.ZdGlobal
 * @extends Ext.grid.GridPanel
 */
net.meetrice.ZdGlobal = Ext.extend(Ext.grid.GridPanel,{
    
    
    initComponent:function() {
        
        var pageSize=10;
        var ds = new Ext.data.Store({
            url:'./extlist.do',
            reader:new Ext.data.JsonReader({
                root:'list',
                totalProperty:'totalSize',
                id:'id'
            },['id','jsbh','ktype','numkey','pykey','kvalue','valuea','valueb','valuec']),
            baseParams:{
                limit:pageSize
            },
            remoteSort:true
        });
        var sm = new Ext.grid.CheckboxSelectionModel();
        var cm = new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),
            sm,
            {header:'编号',width:100,sortable:true,dataIndex:'jsbh'},
            {header:'业务类型',width:100,sortable:true,dataIndex:'ktype'},
            {header:'数字代码',width:100,sortable:true,dataIndex:'numkey'},
            {header:'拼音代码',width:100,sortable:true,dataIndex:'pykey'},
            {header:'字典内容',width:300,sortable:true,dataIndex:'kvalue'},
            {header:'备用字段A',width:100,sortable:true,dataIndex:'valuea'},
//            {header:'s备用字段B',width:100,sortable:true,dataIndex:'bvalueb'},
//            {header:'s备s用字段C',width:100,sortable:true,dataIndex:'cvaluec'},
            {header: "",
             width:25,
             align: 'center',
             renderer: function() {
                return '<div class="controlBtn" >}]
    })
});