当前位置: 代码迷 >> Ajax >> Ext grid 只显示一行数据解决思路
  详细解决方案

Ext grid 只显示一行数据解决思路

热度:370   发布时间:2012-03-19 22:03:05.0
Ext grid 只显示一行数据
请教各位为什么grid只显示一行数据,以下是截图:

但实际上还是有数据的,就是被隐藏了:

js代码中添加了高度设置,但是不管用:

JScript code

userManageWindow = Ext.extend(Ext.Panel, {
    title : '用户管理',
    //width: 765,
    //height: 525,
    layout : 'fit',
    height: 600,
    initComponent : function() {
        this.tbar = {
            xtype : 'toolbar',
            items : [ {
                id : '000002',
                xtype : 'button',
                text : '添加用户',
                listeners : {
                    'click' : function() {
                        userWindow.show();
                    }
                }
            }, {
                id : '000003',
                xtype : 'button',
                text : '修改所选用户'
            }, {
                id : '000004',
                xtype : 'button',
                text : '冻结所选用户'
            }, {
                id : '000005',
                xtype : 'button',
                text : '删除所选用户'
            }, {
                id : '000006',
                xtype : 'button',
                text : '查看用户列表',
                handler : getAllUser
            } ]
        };
        this.items = [ {  //Ext GRID
            xtype : 'grid',
            id : 'userinfo',
            height: 500,
            columns : [ {
                xtype : 'gridcolumn',
                dataIndex : 'string',
                header : '序号',
                sortable : true,
                width : 100
            }, {
                xtype : 'numbercolumn',
                dataIndex : 'number',
                header : '姓名',
                sortable : true,
                width : 100,
                align : 'right'
            }, {
                xtype : 'booleancolumn',
                dataIndex : 'bool',
                header : '所属组',
                sortable : true,
                width : 100
            }, {
                xtype : 'datecolumn',
                dataIndex : 'date',
                header : '当前状态',
                sortable : true,
                width : 100
            }, {
                xtype : 'datecolumn',
                dataIndex : 'date',
                header : '添加时间',
                sortable : true,
                width : 100
            }, {
                xtype : 'datecolumn',
                dataIndex : 'date',
                header : '添加人',
                sortable : true,
                width : 100
            } ]
        } ];
        this.bbar = {
            xtype : 'paging',
            items : [ {
                xtype : 'textfield'
            } ]
        };
        userManageWindow.superclass.initComponent.call(this);
    }

});

/*
 * 添加或显示用户信息的窗体
 */
var userForm = new Ext.form.FormPanel( {
    baseCls : 'x-plain',
    labelWidth : 55,
    url : 'addUser',
    layout : {
        type : 'vbox',
        align : 'stretch' // Child items are stretched to
    // full width
    },
    defaults : {
        xtype : 'textfield'
    },

    items : [ {
        plugins : [ Ext.ux.FieldLabeler ],
        fieldLabel : '用户名',
        name : 'username'
    }, {
        plugins : [ Ext.ux.FieldLabeler ],
        fieldLabel : '用户ID',
        name : 'userid'
    }, {
        plugins : [ Ext.ux.FieldLabeler ],
        fieldLabel : '所属部门',
        name : 'department'
    }, {
        plugins : [ Ext.ux.FieldLabeler ],
        fieldLabel : '电话',
        name : 'tel'
    }, {
        plugins : [ Ext.ux.FieldLabeler ],
        fieldLabel : '手机',
        name : 'cellphone'
    }, {
        plugins : [ Ext.ux.FieldLabeler ],
        fieldLabel : '传真',
        name : 'fax'
    }, {
        plugins : [ Ext.ux.FieldLabeler ],
        fieldLabel : '性别',
        name : 'sex'
    }, {
        plugins : [ Ext.ux.FieldLabeler ],
        fieldLabel : '状态',
        name : 'status'
    }, {
        plugins : [ Ext.ux.FieldLabeler ],
        fieldLabel : '所属组',
        name : 'usergroup'
    }, {
        plugins : [ Ext.ux.FieldLabeler ],
        fieldLabel : '备注',
        name : 'remark'
    } ]
});

var userWindow = new Ext.Window( {
    id : 'userWindow',
    title : '用户信息',
    collapsible : false,
    maximizable : false,
    closable : false,
    width : 400,
    height : 350,
    minWidth : 300,
    minHeight : 150,
    layout : 'fit',
    plain : true,
    bodyStyle : 'padding:5px;',
    buttonAlign : 'center',
    items : userForm,
    buttons : [ {
        id : 'btn_submit',
        text : '确定',
        handler : addUser
    }, {
        id : 'btn_reset',
        text : '取消',
        handler : hideUserWindow
    } ]
});

//添加用户
function addUser() {
    userForm.getForm().submit( {
        //clientValidation:true,
        waitMsg : '正在提交...',
        waitTitle : '正在提交',
        url : 'addUser',
        method : 'POST',
        failure : function(form, action) {
            Ext.Msg.alert('添加用户', '用户已经存在');
        }
    });
}

//关闭添加用户的窗体
function hideUserWindow() {
    userWindow.hide();
}

//获取所有用户
function getAllUser() {

    var ds= new Ext.data.Store( {
        url:'http://127.0.0.1/oa/getAllUser',
        reader : new Ext.data.JsonReader(
            {
                totalProperty : 'totalCount',
                root : 'data',
                id : 'userid',
            }, [ {
                name : 'userid',
                mapping : 'userid'
            }, {
                name : 'username',
                mapping : 'username'
            } ]
        )
    });
    var colModel = new Ext.grid.ColumnModel( [ {
        header : '用户ID',
        width : 120,
        sortable : true,
        dataIndex : 'userid'
    }, {
        header : '用户姓名',
        width : 120,
        sortable : true,
        dataIndex : 'username'
    } ]);
    
    Ext.getCmp('userinfo').reconfigure(ds, colModel);
    ds.load();
}

 
  相关解决方案