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'}]
    })
});


posted @ 2009-07-06 14:28 meetrice 阅读(...) 评论(...) 编辑 收藏