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',388},
                    {xtype:'textfield',fieldLabel:'业务类型',name:'ktype',388},
                    {xtype:'textfield',fieldLabel:'数字代码',name:'numkey',388},
                    {xtype:'textfield',fieldLabel:'拼音代码',name:'pykey',388},
                    {xtype:'textfield',fieldLabel:'字典内容',name:'kvalue',388},
                    {xtype:'textfield',fieldLabel:'备用A',name:'valuea',388},
                    {xtype:'textfield',fieldLabel:'备用B',name:'valueb',388},
                    {xtype:'textfield',fieldLabel:'备用C',name:'valuec',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,{
            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:'编号',100,sortable:true,dataIndex:'jsbh'},
            {header:'业务类型',100,sortable:true,dataIndex:'ktype'},
            {header:'数字代码',100,sortable:true,dataIndex:'numkey'},
            {header:'拼音代码',100,sortable:true,dataIndex:'pykey'},
            {header:'字典内容',300,sortable:true,dataIndex:'kvalue'},
            {header:'备用字段A',100,sortable:true,dataIndex:'valuea'},
//            {header:'s备用字段B',100,sortable:true,dataIndex:'bvalueb'},
//            {header:'s备s用字段C',100,sortable:true,dataIndex:'cvaluec'},
            {header: "",
             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'}]
    })
});