关于ext的grid显示数据集问题，续帖

Question

js代码如下Ext.BLANK_IMAGE_URL='extjs/resources/images/default/s.gif';Ext.namespace('Ext.kehu.Layout.Main');Ext.kehu.Layout.Main.initPage=function(){
    var layout,grid,ds,cm,selectChanged=false;
    return{
        getGrid:function(){
            return grid;
        },
        init:function(){
            Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
            ds=new Ext.data.Store({
                proxy:new Ext.data.HttpProxy({url:'UserAction!getAllUser.action'}),
                reader:new Ext.data.JsonReader({
                    id:'infoId',
                    root:'data',
                    totalProperty:'totalCount',
                    fields:[
                        {name:'infoId',type:'int'},
                        {name:'chePai',type:'string'},
                        {name:'beiBaoXianRen',type:'string'},
                        {name:'touBaoRiQi',type:'string'},
                        {name:'chuDengRiQi',type:'string'},
                        {name:'faDongJiHao',type:'string'},
                        {name:'cheJiaHao',type:'string'},
                        {name:'canBaoXiangMu',type:'string'},
                        {name:'baoDanHao',type:'string'},
                        {name:'beiZhu',type:'string'}
                    ]}),
                remoteSort:true
            });
            /*
ds.on('beforeload',function(t,opts){
Ext.get('center-main').mask('正在加载用户信息,请稍后...','x-mask-loading');
});
ds.on('load',function(){
Ext.get('center-main').unmask();
});*/
            cm=new Ext.grid.ColumnModel([
                {header:'序号',width:60,dataIndex:'infoId',sortable:true},
                {header:'车牌号',width:60,dataIndex:'chePai'},
                {header:'被保险人姓名',width:80,dataIndex:'beiBaoXianRen'},
                {header:'投保日期',width:60,dataIndex:'touBaoRiQi'},
                {header:'初登日期',width:60,dataIndex:'chuDengRiQi'},
                {header:'发动机号',width:60,dataIndex:'faDongJiHao'},
                {header:'车架号',width:100,dataIndex:'cheJiaHao'},
                {header:'参保项目',width:100,dataIndex:'canBaoXiangMu'},
                {header:'保单号',width:100,dataIndex:'baoDanHao'},
                {header:'备注',width:200,dataIndex:'beiZhu'}
            ]);

            grid=new Ext.grid.GridPanel({
                store:ds,
                cm:cm,
                sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
                tbar:[],
                loadMask:true,
                stripeRows:true,
                height:505,
                viewConfig: {
                    forceFit:false
                }
            });
            grid.render('center-main');
            grid.getTopToolbar().add('-',{
                text:'加载',
                id:'tb-load-user',
                cls:'x-btn-text-icon',
                icon:'image/ext/user.png',
                tooltip:'加载所有用户',
                handler:function(){
                    grid.getStore().load();
                }
            },'-',{
                text:'添加',
                id:'tb-add-user',
                cls:'x-btn-text-icon',
                icon:'image/ext/user_add.png',
                handler:function(){
                    Ext.kehu.Layout.Main.ShowDialog.showDlg(Ext.get('tb-add-user').dom,
                    {type:'n',record:[]});
                }
            },'-',{
                text:'修改',
                id:'tb-edit-user',
                cls:'x-btn-text-icon',
                icon:'image/ext/user_edit.png',
                handler:function(){
                    if(grid.getSelectionModel().getSelected()){
                        Ext.kehu.Layout.Main.ShowDialog.showDlg(Ext.get('tb-add-user').dom,
                        {type:'m',record:grid.getSelectionModel().getSelected()});
                    }else{
                        Ext.Msg.alert('提示','请先选择要修改的记录!');
                        return false;
                    }
                }
            },'-',{
                text:'查询',
                id:'tb-comment-user',
                cls:'x-btn-text-icon',
                icon:'image/ext/user_comment.png',
                handler:function(){
                    var conn=new Ext.data.Connection({});
                    conn.request({
                        url:'UserAction!getAllUser.action',
                        method:'POST',
                        params:{chePai:'a'},
                        success:function(response,options){
                            if(response.responseText.length>0){
                                Ext.Msg.alert('提示',response.responseText);
                                return false;
                            }
                        },
                        failure:function(response,options){
                            Ext.Msg.alert('提示','删除用户失败!');
                            return false;
                        }
                    });
                }
            },'-',{
                text:'删除',
                id:'tb-delete-user',
                cls:'x-btn-text-icon',
                icon:'image/ext/user_delete.png',
                handler:function(){
                    Ext.Msg.confirm('提示','确实要删除吗?',function(btn){
                        if(btn=='yes'){
                            if(grid.getSelectionModel().getSelected()){
                                var conn=new Ext.data.Connection({});
                                conn.request({
                                    url:'UserAction!deleteUser.action',
                                    method:'POST',
                                    params:{userID:grid.getSelectionModel().getSelected().get('userID')},
                                    success:function(response,options){
                                        if(response.responseText.length>0){
                                            Ext.Msg.alert('提示',response.responseText);
                                            return false;
                                        }else{
                                            grid.getStore().load();
                                        }
                                    },
                                    failure:function(response,options){
                                        Ext.Msg.alert('提示','删除用户失败!');
                                        return false;
                                    }
                                });
                            }else{
                                Ext.Msg.alert('提示','请先选择要删除的记录!');
                                return false;
                            }
                        }
                    }
                );
                }
            },'-');

Answer 1

            layout=new Ext.Viewport({
                layout:'border',
                items:[{
                        //定义north布局
                        region:'north',
                        contentEl:'north-title',
                        title:'客户信息',
                        height:25,
                        minSize:25,
                        maxSize:25
                    },{
                        region:'center',
                        contentEl:'center-main',
                        title:'客户信息管理',
                        autoScroll:true
                    },{
                        region:'west',
                        contentEl:'west-menu',
                        collapsible:true,
                        title:'系统菜单',
                        width:180,
                        minSize:120,
                        maxSize:300
                    },{
                        region:'east',
                        contentEl:'east-tree',
                        collapsible:true,
                        title:'导航树',
                        width:180,
                        minSize:120,
                        maxSize:300
                    },{
                        region:'south',
                        contentEl:'south-footer',
                        title:'提高服务质量!',
                        height:25
                    }]
            });
            /////////再次单击,取消选择////////////////
            grid.on('rowclick',function(t,index,e){
                if(!selectChanged){
                    grid.getSelectionModel().clearSelections();
                }
                selectChanged=false;
            });
            grid.getSelectionModel().on('rowselect',function(t,index,e){
                selectChanged=true;
            });
        }
    }
}();
Ext.kehu.Layout.Main.ShowDialog=function(){
    var dlg,form,cfg;
    function clearFormData(){
        if(form){
            for(var i=0;i<form.items.getCount();i++){
                form.items.itemAt(i).setValue('');
            }
        }
    }
    function loadFormData(record){
        if(form && record){
            form.items.item('infoId').setValue(record.get('infoId'));
            form.items.item('chePai').setValue(record.get('chePai'));
            form.items.item('beiBaoXianRen').setValue(record.get('beiBaoXianRen'));
            form.items.item('touBaoRiQi').setValue(record.get('touBaoRiQi'));
            form.items.item('chuDengRiQi').setValue(record.get('chuDengRiQi'));
            form.items.item('faDongJiHao').setValue(record.get('faDongJiHao'));
            form.items.item('cheJiaHao').setValue(record.get('cheJiaHao'));
            form.items.item('canBaoXiangMu').setValue(record.get('canBaoXiangMu'));
            form.items.item('baoDanHao').setValue(record.get('baoDanHao'));
            form.items.item('beiZhu').setValue(record.get('beiZhu'));
        }
    }
    return{
        showDlg:function(eDom,c){
            cfg=c;
            if(!dlg){
                form=new Ext.form.FormPanel({
                    labelWidth:60,
                    labelAlign:'right',
                    width:220,
                    height:200,
                    title:'',
                    defaultType:'textfield',
                    bodyStyle:'padding:10px 0 0 0;background-color:white;',
                    reader:new Ext.data.JsonReader({
                        id:'infoId',
                        root:'data'
                    },[
                        {name:'infoId',type:'int'},
                        {name:'chePai',type:'string'},
                        {name:'beiBaoXianRen',type:'string'},
                        {name:'touBaoRiQi',type:'string'},
                        {name:'chuDengRiQi',type:'string'},
                        {name:'faDongJiHao',type:'string'},
                        {name:'cheJiaHao',type:'string'},
                        {name:'canBaoXiangMu',type:'string'},
                        {name:'baoDanHao',type:'string'},
                        {name:'beiZhu',type:'string'}
                    ]),
                    items:[{
                            fieldLabel:'车牌号',
                            name:'chePai',
                            allowBlank:false,
                            width:140,
                            id:'chePai'
                        },{
                            fieldLabel:'被保险人',
                            name:'beiBaoXianRen',
                            allowBlank:false,
                            width:140,
                            id:'beiBaoXianRen'
                        },{
                            fieldLabel:'投保日期',
                            name:'touBaoRiQi',
                            allowBlank:false,
                            width:140,
                            id:'touBaoRiQi'
                        },{
                            fieldLabel:'初登日期',
                            name:'chuDengRiQi',
                            allowBlank:false,
                            width:140,
                            id:'chuDengRiQi'
                        },{
                            fieldLabel:'发动机号',
                            allowBlank:false,
                            name:'faDongJiHao',
                            width:140,
                            id:'faDongJiHao'
                        },{
                            fieldLabel:'车架号',
                            allowBlank:false,
                            name:'cheJiaHao',
                            width:140,
                            id:'cheJiaHao'
                        },{
                            fieldLabel:'参保项目',
                            allowBlank:false,
                            name:'canBaoXiangMu',
                            width:140,
                            id:'canBaoXiangMu'
                        },{
                            fieldLabel:'保单号',
                            allowBlank:false,
                            name:'baoDanHao',
                            width:140,
                            id:'baoDanHao'
                        },{
                            fieldLabel:'备注',
                            allowBlank:false,
                            name:'beiZhu',
                            width:140,
                            id:'beiZhu'
                        }]
                });

Answer 2

                //判断字符串是否全部为数字
                function isNumeric(s){
                    if(s.length<=0){
                        return false;
                    }
                    var oneChar='';
                    for(var i=0;i<s.length;i++){
                        oneChar=s.substring(i,i+1);
                        if(oneChar<'0' || oneChar>'9'){
                            return false;
                        }
                    }
                    return true;
                }
                function saveAction(){                    var conn=new Ext.data.Connection({});
                    if(cfg.type=='m'){
                        conn.request({
                            url:'UserAction!updateUser.action',
                            method:'POST',
                            params:{
                                chePai:Ext.getCmp('chePai').getValue(),
                                beiBaoXianRen:Ext.getCmp('beiBaoXianRen').getValue(),
                                touBaoRiQi:Ext.getCmp('touBaoRiQi').getValue(),
                                chuDengRiQi:Ext.getCmp('chuDengRiQi').getValue(),
                                faDongJiHao:Ext.getCmp('faDongJiHao').getValue(),
                                cheJiaHao:Ext.getCmp('cheJiaHao').getValue(),
                                canBaoXiangMu:Ext.getCmp('canBaoXiangMu').getValue(),
                                baoDanHao:Ext.getCmp('baoDanHao').getValue(),
                                beiZhu:Ext.getCmp('beiZhu').getValue()
                            },
                            success:function(response,options){
                                if(response.responseText.length>0){
                                    Ext.Msg.alert('提示',response.responseText);
                                    return false;
                                }else{
                                    Ext.kehu.Layout.Main.initPage.getGrid().getStore().load();
                                    dlg.hide();
                                }
                            },
                            failure:function(response,options){
                                Ext.Msg.alert('提示','修改用户信息失败!\n'+response.reponseText);
                                return false;
                            }
                        });
                    }else if(cfg.type=='n'){
                        conn.request({
                            url:'UserAction!insertUser.action',
                            method:'POST',
                            params:{
                                chePai:Ext.getCmp('chePai').getValue(),
                                beiBaoXianRen:Ext.getCmp('beiBaoXianRen').getValue(),
                                touBaoRiQi:Ext.getCmp('touBaoRiQi').getValue(),
                                chuDengRiQi:Ext.getCmp('chuDengRiQi').getValue(),
                                faDongJiHao:Ext.getCmp('faDongJiHao').getValue(),
                                cheJiaHao:Ext.getCmp('cheJiaHao').getValue(),
                                canBaoXiangMu:Ext.getCmp('canBaoXiangMu').getValue(),
                                baoDanHao:Ext.getCmp('baoDanHao').getValue(),
                                beiZhu:Ext.getCmp('beiZhu').getValue()
                            },
                            
                            success:function(response,options){
                                if(response.responseText.length>0){
                                    Ext.Msg.alert('提示',response.responseText);
                                    return false;
                                }else{
                                    Ext.kehu.Layout.Main.initPage.getGrid().getStore().load();
                                    dlg.hide();
                                }
                            },
                            failure:function(response,options){
                                Ext.Msg.alert('提示','新用户添加失败!\n'+response.reponseText);
                                return false;
                            }
                        });
                    }
                };
                dlg=new Ext.Window({
                    el:'center-dlg',
                    title:'添加客户',
                    width:240,
                    height:320,
                    plain:true,
                    layout:'fit',
                    resizable:false,
                    closeAction:'hide',
                    items:[form],
                    buttons:[{
                            id:'save',
                            text:'保存',
                            handler:saveAction
                        },{
                            id:'cancel',
                            text:'取消',
                            handler:function(){
                                dlg.hide();
                            }
                        }]
                });
            }
            dlg.show(eDom);

            if(cfg.type=='m'){
                clearFormData();
                loadFormData(cfg.record);
            }
            //dlg.center();
        }

    }
}();
Ext.onReady(Ext.kehu.Layout.Main.initPage.init,Ext.kehu.Layout.Main.initPage,true);

Answer 3

问题补充，这原来是别人提供在网上，我改的，现在就是在action那能得到数据，不知道怎么显示，请大侠帮忙改改

Answer 4

你看我刚才给你的那个链接了吗现在主要是把你action内的数据以JSON的形式输出http://www.17ext.com/showtopic-126.aspx你把这里的DEMO下载下来研究研究吧！后台是NET的可能需要注册