TerrySJJ 2008-10-20 11:29
浏览 272
已采纳

使用ext的grid填充数据问题

这是ext中的代码如下
[code="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;
                        }
                    }
                }
            );
            }
        },'-');
        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.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'
}]
});
//判断字符串是否全部为数字
function isNumeric(s){
if(s.length return false;
}
var oneChar='';
for(var i=0;i oneChar=s.substring(i,i+1);
if(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);
[/code]

这是action中部分代码
[code="java"]
System.out.println("有记录");
jsonResult = "{\"totalCount\":" + list.size() + ",\"success\":true,\"data\":" + jsonArray.toString() + "}";
response.setCharacterEncoding("UTF-8");
response.getWriter().write(jsonResult);
System.out.println(jsonResult);
response.getWriter().flush();
[/code]
现在问题是在action中可以得到数据,但就是不显示,请问如何修改,请同仁帮帮我,这是别人做好的东西我改成我要用的,查询他就没做
[b]问题补充:[/b]
ds的autoload加在什么位置呢?最好给个具体的例子

  • 写回答

3条回答 默认 最新

  • iteye_5994 2008-10-20 11:56
    关注

    如果没有其他代码错误的话,ds加上autoLoad:true 配置项,页面打开后数据就显示了.你的代码里没有调用过ds的load.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 Python爬取指定微博话题下的内容,保存为txt
  • ¥15 vue2登录调用后端接口如何实现
  • ¥65 永磁型步进电机PID算法
  • ¥15 sqlite 附加(attach database)加密数据库时,返回26是什么原因呢?
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?