iteye_17458
2009-09-06 09:20
浏览 256
已采纳

用extjs 的editorgrid 表格自己乱动

刚接触ext ,我用了一个editorgrid,每次想要修改单元格中的数据时,表格就会乱跑,然后表格下面会出一个横向滚动条,改怎么解决,好像ff下没什么问题,ie7就会有这个问题
[b]问题补充:[/b]
[code="java"]{
header:'编号',
sortable:true,// 是否能排序
menuDisabled:false,// 是否允许菜单操作
width:40,
dataIndex:'id',
editor:new Ext.form.TextField({
maxLength:20
})
},{
header:'收支',
sortable:true,
menuDisabled:false,
width:40,
dataIndex:'title',
editor:new Ext.form.TextField({
maxLength:20
})
}, {[/code]
代码里我都加了width ,
如图所示: 这是点击以后的结果,我左边的一些就这样跑到里面去了
[img]http://dl.iteye.com/upload/attachment/143407/dac90cdd-0bcb-347a-8aad-fbb780c8221f.bmp[/img]
[b]问题补充:[/b]
而右边却空出一块空白的来
[b]问题补充:[/b]
可能刚才截的图不是太好,我加上allowBlank:false也不行,
在编辑前是这样的:
[img]http://dl.iteye.com/upload/attachment/143413/53180234-4993-31dc-8cba-07a515687c9e.jpg[/img]

当点击开始编辑时就成这样了:

[img]http://dl.iteye.com/upload/attachment/143415/0657bea1-dba1-3fdf-924b-46e7bed959a9.jpg[/img]

[b]问题补充:[/b]
是不是有个属性在ie中有问题,同样的代码在Firefox下没问题

[code="java"]

var user_in_out = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{
header:'编号',
sortable:true,// 是否能排序
menuDisabled:false,// 是否允许菜单操作
width:40,
dataIndex:'id',
editor:new Ext.form.TextField({
maxLength:20,
allowBlank:false
})
},{
header:'收支',
sortable:true,
menuDisabled:false,
width:40,
dataIndex:'income',
renderer : income,
editor:new Ext.form.TextField({
allowBlank:false,
maxLength:20
})
}, {
header:'金额',
sortable:true,
menuDisabled:false,
width:40,
dataIndex:'money',
renderer : money,
editor:new Ext.form.TextField({
allowBlank:false,
maxLength:20
})
}, {
header:'操作人',
id:'user',
sortable:true,
dataIndex:'user',
width:40,
menuDisabled:false,
editor:new Ext.form.TextField({
allowBlank:false,
maxLength : 100
})
},{
header:'备注',
id : 'remark',
width:60,
menuDisabled:true,
dataIndex:'remark',
editor:new Ext.form.TextField({
allowBlank:false,
maxLength:20
})

    },{
        header:'日期',
        sortable:true,
        id : 'date',
        width : 40,
        renderer :  Ext.util.Format.dateRenderer('d/m/Y'),//格式化日期格式
        dataIdex:'date',
        menuDisabled:true
    }]);

// 设置money格式
function money(val){
return ''+val+'元' ;
};
// 设置收支格式
function income(val){
return ''+val+'';
}

user_in_out.defaultSortable = false;
var ds_duty = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({//在同一个域中,使用httpproxy
url : 'duty.php'
}),
// proxy : new Ext.data.MemoryProxy(data),
reader : new Ext.data.JsonReader({//读取json数据格式
root : 'topics',//数据节点
totalProperty: 'totalCount'//总的记录数
}, [{

},{
    name:'id',
    type:'int'
}, {
    name:'income',
    type:'string'
}, {
    name:'money',

    type:'string'
},{
    name:'user',
    type:'string'
},{
    name:'remark',
    type:'string'
},{
    name:'date',
    type:'date'
}])

});
//添加相应按钮
var item_add = new Ext.Button({
text : ' 添加条目',
iconCls : 'add',
style : 'margin-left:20px',
handler : function(){
}
});
var item_del = new Ext.Button({
text : ' 删除条目',
iconCls : 'del',
handler : function (){
}

});
var item_show = new Ext.Button({
text : '&nbsp显示条目',
handler : function (){
}

});
// 添加Search

var item_ser = new Ext.ux.form.SearchField({
ds : ds_duty,
width : 236

});

var grid_duty = new Ext.grid.EditorGridPanel({
title : '收支管理',
// iconCls : 'icon-grid',
loadMask : {
msg : '数据加载中...'
},
region : 'center',
autoWidth : true,
height : 300,
cm : user_in_out,
ds : ds_duty,
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),
enableColumnMove : false,
trackMouseOver : false,
frame : true,
autoExpandColumn : 'date',//该条目将沾满省余的空间
clicksToEdit : 1,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true
},
collapsible: false,
animCollapse: false,

tbar : [item_add,'-',item_del,'-',item_show,'-',item_ser,'查询'],
bbar : new Ext.PagingToolbar({
        pageSize: 5,
        store: ds_duty,
        displayInfo: true,
        displayMsg: '当前显示 {0} - {1} of {2}',
        emptyMsg: "No topics to display"


})

});
ds_duty.load({params:{start:0, limit:5}});// 将数据分页载入表格,
Ext.ns('app.grid');//设置命名空间
var p_duty = {
id : 'duty-panel',
border : false,
layout : 'border',
items : [grid_duty]
};[/code]
[b]问题补充:[/b]
谢谢大家的帮助,我把[color=darkred]// autoExpandColumn : 'date',[/color]和[color=darkred]forceFit:true,[/color]这两条注释掉以后就好了,这样的话就是表格会严格按照我cm里定义的width 来显示,虽然好了,但我还是不明白为什么会在IE下出现这样的问题
[b]问题补充:[/b]
因为外层的容器比较多,数据也是从服务器读取的,所以没有贴出来
[b]问题补充:[/b]
我把其中刚注释的任意一条打开都会出现刚开始的问题,但是用firefrox 就能正常显示,是不是这里面的属性,有的在ie下显示有问题呀
[b]问题补充:[/b]
按照你说的,我把上面的代码提取出来测试发现以下几个问题:
1、 [color=red] autoExpandColumn : 'date',和forceFit:true[/color]
二者择其一则在ie和ff下显示都没有问题
2、我又把它放到原来的容器里,如果不指定[color=red]forceFit:true[/color]
那么ff也会出问题,而ie是无论怎样都会出问题
3、我的上层容器的部分代码:
[code="java"]var view = new Ext.Viewport({// create the main frame
// 主界面
layout : 'border',
title : '理财系统 V1.0',
items : [{
region :'north',
title :'理财系统 V1.0',
height :0,
margins:'5 0 0 0'
},{
region : 'west',
split : true,//加入分割线
collapsible : true,//可以收起展开
layout : 'accordion',
title : '管理选项',
items : [managerTree],//装载其它的panel
width : 200,
bbar : [{text : '开始',
width : 50,

        style : 'margin-left:10px',
        iconCls : 'start',

        menu : {
             items : [{
                text : '注销',
                width : 30,
                iconCls : 'logout'
             },'-',{
                text : '关闭',
                iconCls : 'close',
                handler : function (){

// Ext.Msg.alert('afdafda');
}
}]
}
}]

    }, {
        id : 'center',
        region : 'center',
        border : true,
        layout : 'card',//采用card 布局方式,每次只显示一个页面
        activeItem : 0,
        items : [p_duty]
}]

});
    Ext.getCmp('center').layout.setActiveItem('duty-panel');

});[/code]

麻烦你看一下那个地方有问题,谢谢了
[b]问题补充:[/b]
非常感谢atian25架构师不辞厌倦的帮我解决这个问题,但是我的还是有问题,我用的3.0版本的,不过还是那个问题,我现在把那个项目大了一个包,希望能有空帮我看一下,直接运行manage.html,即可,谢谢

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

10条回答 默认 最新

  • iteye_10013 2009-09-07 00:23
    已采纳

    刚测试了, 2.2不正常,2.3/3.0正常

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • iteye_18964 2009-09-06 13:33

    editorgrid里面的field加width啦?贴代码

    评论
    解决 无用
    打赏 举报
  • iteye_18964 2009-09-06 13:54

    你的CM直接加 editor:new Ext.form.TextField({allowBlank:false})就行了
    隐藏列width属性去掉

    评论
    解决 无用
    打赏 举报
  • iteye_18964 2009-09-06 14:25

    代码贴全一点看看

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-09-06 21:29

    forceFit后,就不要对cm设置width了, 设置了也是算百分比.

    另外,你的代码是没办法本地测试的,因为没有给出最外层的容器

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-09-06 22:11

    1.autoExpandColumn 和forceFit是不能同时出现,
    2.出现forceFit的时候,cm的width是算百分比的,以所有的cm的width为基数

    [quote]Ext.grid.Column
    width : Number

    Optional. The initial width in pixels of the column. The width of each column can also be affected if any of the following are configured:
    Ext.grid.GridPanel.autoExpandColumn
    Ext.grid.GridView.forceFit
    By specifying forceFit:true, non-fixed width columns will be re-proportioned (based on the relative initial widths) to fill the width of the grid so that no horizontal scrollbar is shown.
    Ext.grid.GridView.autoFill
    Ext.grid.GridPanel.minColumnWidth

    Note: when the width of each column is determined, a space on the right side is reserved for the vertical scrollbar. The Ext.grid.GridView.scrollOffset can be modified to reduce or eliminate the reserved offset.[/quote]

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-09-06 22:52

    这些配置会导致生成不同的css,对ie/ff在某些地方是不同的.
    譬如以前常见的grid最后一列在firefox下有问题.

    建议你把你这段代码提取出来,放在一个简单的文件里面测试下.
    怀疑有可能是外层的布局导致的.
    复杂的布局会导致某些莫名其妙的问题.

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-09-06 23:59

    貌似是个2.2的bug.

    一个border布局的viewport,有west和center,当center中放一个forceFit的grid,
    在IE点击一下grid就会出问题了.

    试着升级到2.3看看吧.
    我用3.0的,没问题, 2.2就不行.

    测试代码如下:
    [code="java"]
    var view = new Ext.Viewport({
    layout: 'border',
    items: [{
    xtype: 'panel',
    region: 'west',
    title: '管理选项',
    width: 200,
    html: 'xxx'

    },
    {
    xtype: 'panel',
    region: 'center',
    layout: 'fit',
    items: [
    new Ext.grid.GridPanel({
    autoScroll: true,
    trackMouseOver: false,
    ddGroup: 'myDDGroup',
    sm: new Ext.grid.CellSelectionModel({}),
    columns: [{
    header: '序号',
    dataIndex: 'id',
    sortable: true
    },
    {
    header: '名字',
    dataIndex: 'name',
    sortable: true
    },
    {
    header: '描述',
    dataIndex: 'descript',
    sortable: true
    }],
    viewConfig: {
    forceFit: true
    },
    store: new Ext.data.SimpleStore({
    fields: ['id', 'name', 'descript'],
    data: [
    [1, 'name001', 'this is name001'],
    [2, 'name002', 'this is name002'],
    [3, 'name003', 'this is name003'],
    [4, 'name004', 'this is name004']]
    })
    })]
    }]
    });[/code]

    评论
    解决 无用
    打赏 举报
  • iteye_10013 2009-09-07 09:28

    又找了几个朋友测了.

    2.2.0 没问题
    [b]2.2.1 有问题[/b]
    2.3.0 没问题
    3.0.0 没问题

    你更新到2.3.0吧

    评论
    解决 无用
    打赏 举报
  • ansj 2009-09-09 17:27

    是不是测试版的啊

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题