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" id="abcd"> '   +
                         ' <img src="http://images.cnblogs.com/delete.gif" width="16" height="16" class="control_del"> '   +
                         ' </div> ' ;
                        }
            }
        ]);
        
         /* *
         * 扩展类的构建开始
          */
        Ext.apply( this ,{
            store:ds
            ,sm:sm
            ,cm: cm
            ,bbar: new  Ext.PagingToolbar({
                pageSize:pageSize,
                store:ds,
                displayInfo: true
            })
            , tbar:[
                {text: ' 新增 ' ,cls: ' x-btn-text-icon ' ,icon: ' http://images.cnblogs.com/add.gif ' ,handler: this .newZdGlobal,scope: this }, ' - ' ,
                {text: ' 修改 ' ,cls: ' x-btn-text-icon ' ,icon: ' http://images.cnblogs.com/edit.gif ' ,handler: this .editZdGlobal,scope: this }, ' - ' ,
                {text: ' 删除 ' ,cls: ' x-btn-text-icon ' ,icon: ' http://images.cnblogs.com/delete.gif ' ,handler: this .deleteZdGlobal,scope: this }, ' - ' ,
                {text: ' 查询 ' ,id: ' btn-query ' ,cls: ' x-btn-text-icon ' ,icon: ' http://images.cnblogs.com/query.gif ' ,handler: this .buildQueryWin,scope: this },
                 ' -> '
            ]
        });
         // 调用父类构建函数
        net.meetrice.ZdGlobal.superclass.initComponent.call( this );
         // 加载数据
        ds.load({params:{start: 0 }});
        

          // 扩展类的弹出窗口
          this .dtlformpanel  =   new  net.meetrice.zdglobal.dtlformpanel();
          this .dtlwin  =    new  net.meetrice.zdglobal.dtlwin({items: this .dtlformpanel,buttons:[{
                text: ' 保存 ' ,
                handler: this .saveZdGlobal,
                scope: this
            },{
                text: ' 取消 ' ,
                handler: function (){ this .dtlwin.hide();},
                scope: this
            }]});
            
         // 双击操作
          this .on({ " dblclick " : this .dblclick});
         
          this .addListener( ' rowcontextmenu ' ,  this .onMessageContextMenu);
         
    }
    /* *
    * 构建函数结束
     */
    
     // 右键菜单
    ,onMessageContextMenu :  function  (grid, rowIndex, e) {
        e.stopEvent();
         var  coords  =  e.getXY();
         var  record  =  grid.getStore().getAt(rowIndex);
         var  messageContextMenu  =   new  Ext.menu.Menu({
            id:  ' messageContextMenu ' ,
            items: [
                    {icon: ' http://images.cnblogs.com/edit.gif ' ,text:  ' 编辑 ' ,handler: rgtEdit,scope:  this },
                    {id:  ' delete ' ,icon: ' http://images.cnblogs.com/delete.gif ' ,handler: rgtDelete,text:  ' 删除 ' }
                   ]
        });
         // 右键编辑
         function  rgtEdit() {
                        messageContextMenu.hide();
                         this .dtlwin.setTitle( ' 修改业务字典 ' );
                         this .dtlwin.show();
                         this .dtlformpanel.form.reset();
                         this .dtlformpanel.form.loadRecord(record);
                         this .dtlformpanel.url  =   ' ./extupdate.do?id= ' + record.data.id;
        };
         // 右键删除
         function  rgtDelete() {
            messageContextMenu.hide();
            
             if  ( ! record || record.length  ==   0 ) {
                Ext.Msg.alert( " 提示 " ,  " 请先选择要删除的�记录 " );
                 return ;
            }
            Ext.MessageBox.confirm( ' 确认删除 ' , ' 确定要删除这些记录? ' , function (btn){
                 if  (btn  ==   ' yes ' ){
                        Ext.Ajax.request({
                        url: ' ./extdelete.do?ids= ' + record.data.id,
                        method: ' POST ' ,
                        success: function (response){
                             var  data  =  Ext.util.JSON.decode(response.responseText);
                             if  (data.success  ==   true ){
                                grid.getStore().remove(record);
                                grid.getView().refresh();
                            }
                             else {
                                Ext.MessageBox.alert( ' 警告 ' ,data.msg);
                            }
                             grid.getStore().reload();
                        },
                        scope: this
                    });
                }}, this );
        };
        messageContextMenu.showAt([coords[ 0 ], coords[ 1 ]]);
        e.preventDefault(); // to disable the standard browser context menu
    }
    
     // 双击事件
    ,dblclick : function (){
             var  sm  =   this .getSelectionModel();
                var  record = null ;
             try {
                record = sm.getSelected();
                 if (record == null ){
                     return ;
                }
            }
             catch (e){
                 try {
                    record = sm.selection.record();
                }
                 catch (ex){}
            }
             this .showWinForm(record);
    }
     // 双击打开窗口
    ,showWinForm: function (record){
 
         this .dtlwin.setTitle( ' 修改业务字典 ' );
         this .dtlwin.show();
         this .dtlformpanel.form.reset();
         this .dtlformpanel.form.loadRecord(record);
         this .dtlformpanel.url  =   ' ./extupdate.do?id= ' + record.data.id;

    }
    
     // 新建窗口
    ,newZdGlobal :  function (){
         this .dtlwin.setTitle( ' 新建业务字典 ' );
         this .dtlwin.show();
         this .dtlformpanel.form.reset();
         this .dtlformpanel.url  =   ' ./extsave.do ' ;
    }
    
     // 编辑操作
    ,editZdGlobal: function (){
         var  records  =   this .getSelectionModel().getSelections(); // 单选
        
        if  (records.length != 1 ) {
            Ext.Msg.alert( " 提示 " ,  " 请先选择要修改的记录 " );
             return ;
        }
         this .dtlwin.setTitle( ' 修改业务字典 ' );
         this .dtlwin.show();
         this .dtlformpanel.form.reset();
         this .dtlformpanel.form.loadRecord(records[ 0 ]);
         this .dtlformpanel.url  =   ' ./extupdate.do?id= ' + records[ 0 ].data.id;

    }
    
     // 删除操作
    ,deleteZdGlobal: function (){
         var  records  =   this .getSelectionModel().getSelections();
         if  ( ! records || records.length  ==   0 ) {
            Ext.Msg.alert( " 提示 " ,  " 请先选择要删除的�记录 " );
             return ;
        }
        Ext.MessageBox.confirm( ' 确认删除 ' , ' 确定要删除这些记录? ' , function (btn){
             if  (btn  ==   ' yes ' ){
                Ext.Ajax.request({
                    url: ' ./extdelete.do?ids= ' + RecordArrayUtils.get(records,  ' id ' ),
                    method: ' POST ' ,
                    success: function (response){
                         var  data  =  Ext.util.JSON.decode(response.responseText);
                         if  (data.success  ==   true ){
                             for ( var  i  =   0 ; i  <  records.length; i ++ ) {
                                  this .getStore().remove(records[i]);
                                 this .getView().refresh();
                             }
                              this .getStore().reload();
                        }
                         else {
                            Ext.MessageBox.alert( ' 警告 ' ,data.msg);
                        }
                    },
                    scope: this
                });
            }
        }, this );
    }
    
     // 保存操作
    ,saveZdGlobal: function (){
        
         if  ( this .dtlformpanel.form.isValid()  ==   false ){
             return ;
        }
         this .dtlformpanel.form.submit({
            url: this .dtlformpanel.url,
            success: function (form,action){
                Ext.MessageBox.alert( ' 警告 ' ,action.result.msg);
                 this .dtlwin.hide();
                   this .getStore().reload();
            },
            scope: this ,
            failure: function (form,action){
                Ext.MessageBox.alert( ' 警告 ' ,action.result.msg);
            }
        })
    
    }

});
 
/* *
 * 注册主表格的xtype
  */
Ext.reg( ' zdglobal ' , net.meetrice.ZdGlobal);

/* *
 * 程序入口
  */
Ext.onReady( function (){
    Ext.QuickTips.init();
     var  vp  =   new  Ext.Viewport({
            layout: ' fit ' ,
            items:[{xtype: ' zdglobal ' ,region: ' center ' }]
    })
});