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,{

            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,{

        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>';

                        }

            }

        ]);

        /**

         * 擴充類的建構開始

         */

            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();},

            }]});

        //輕按兩下操作

         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.dtlformpanel.url = './extsave.do';

    //編輯操作

    ,editZdGlobal:function(){

        var records = this.getSelectionModel().getSelections();//單選

       if (records.length!=1) {

            Ext.Msg.alert("提示", "請先選擇要修改的記錄");

            return;

        }

        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("提示", "請先選擇要删除的�記錄");

        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){

        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){

        })

 * 注冊主表格的xtype

Ext.reg('zdglobal', net.meetrice.ZdGlobal);

 * 程式入口

Ext.onReady(function(){

    Ext.QuickTips.init();

    var vp = new Ext.Viewport({

            items:[{xtype:'zdglobal',region:'center'}]

    })