[3.0rc2] Grid Column don't show correct width in firefox

[atian25]

just as the attach images show.
in ie7, everything is ok.
but in firefox 3.5preview, the column width is wrong.

and below is the whole code :




file:///C:/DOCUME%7E1/ADMINI%7E1/LOCALS%7E1/Temp/moz-screenshot.pngfile:///C:/DOCUME%7E1/ADMINI%7E1/LOCALS%7E1/Temp/moz-screenshot-1.pngExt.ns("Elvis");

Elvis.NetCellAlarmMonitor = Ext.extend(Ext.Panel,{
//在组件初始化期间调用的代码
initComponent: function(config){
//初始化配置
Ext.applyIf(this, {
//title:'NetCellAlarmMonitor',
frame: true,
header: true,
border: false,
layout: "border"
});
//调用父类构造函数（必须）
Elvis.NetCellAlarmMonitor.superclass.initComponent.apply(this, arguments);
//调用父类代码之后.如：设置事件处理和渲染组件
this.init();
},
//私有辅助方法***************************************************************/
init: function(){
this.simpleRenderer = function(value){return "<div>"+value+"</div>";};
this.buildAlarmPanel();
this.buildBusinessPanel();
this.buildRecoverPanel();
},
buildAlarmPanel:function(){
//网元告警(近24小时)
var store = new Ext.data.JsonStore({
root:'data',
fields:['id','alarmCode','alarmName','alarmContent','alarmType','node','nodeType',{name:'firstTime',type:'date',dateFormat:'Y-m-d H:i:s'},{name:'createTime',type:'date',dateFormat:'Y-m-d H:i:s'},'stackTimes'],
sortInfo:{field: 'createTime', direction: 'DESC'}
});
var sm = new Ext.grid.CheckboxSelectionModel({
});
var cm = new Ext.grid.ColumnModel([
sm,
{
header:'名称',
dataIndex:'alarmName',
renderer:this.simpleRenderer,
width:30,
sortable:true
},{
header:'对象',
dataIndex:'node',
renderer:this.simpleRenderer,
width:30,
sortable:true
},{
header:'内容',
dataIndex:'alarmContent',
renderer:this.simpleRenderer,
sortable:true
},{
header:'最早发生时间',
dataIndex:'firstTime',
type:'date',
renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
css:"text-align:center;",
width:25,
sortable:true
},{
header:'生成时间',
dataIndex:'createTime',
type:'date',
renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
css:"text-align:center;",
width:25,
sortable:true
},{
header:'次数',
dataIndex:'stackTimes',
renderer:this.simpleRenderer,
css:"text-align:center",
width:11,
sortable:true
},{
header:'操作',
renderer:function(value,meta,record){
var resultStr = "<div class='controlBtn'><a href='javascript:void(0);' class='alarm_detail'>详细</a> | <a href='javascript:void(0);' class='alarm_check'>签阅</a> | <a href='javascript:void(0);' class='alarm_delete'>删除</a></div>";
return resultStr;
},
css:"text-align:center;",
width:25,
sortable:false
}
]);

var autoRefreshCheckbox = new Ext.form.Checkbox({
boxLabel: '自动刷新',
checked: true,
listeners: {
'check': function(checkbox,checked){
//alert('切换自动刷新');
}
}
});
var remainTimeLabel = new Ext.form.Label({
text:''
});
//工具栏
var toolbar =[
{
text: '签阅所选',
handler:function(){
}
},{
text: '删除所选',
handler:function(){
}
},
'->',
{
text: '查看历史告警',
style: 'text-decoration: underline',
handler:function(){
window.location.href = '/netCellAlarm.do?method=listNetworkAlarm';
}
},
'-',
autoRefreshCheckbox,
remainTimeLabel,
{
text: '立即刷新',
style: 'text-decoration: underline',
handler: function(){
loadData();
}
},new Ext.form.Checkbox({
boxLabel: '告警声音',
checked: true,
listeners: {
'check': function(checkbox,checked){
playAlarmSound = checked;
}
}
})
]
//GRID
var grid = new Ext.grid.GridPanel({
//title:'::网元告警&关注事件(近24小时)::',
region:'center',
//split:true,
//collapsible:true,
//id:'alarmGrid',
store:store,
enableColumnMove: false,
enableHdMenu: false,
autoScroll: true,
cm:cm,
sm:sm,
//tbar:toolbar,
//bodyStyle:'width:100%;height:100%;padding: 0px 0px 5px 0px;', //上右下左,顺时针
//autoExpandColumn:3,
viewConfig: {
forceFit: true,
deferEmptyText: true,
emptyText: "<div>业务运行正常xx:xx</div>"
}
});

this.add({
xtype:'panel',
title:'::网元告警&关注事件(近24小时)::',
region:'north',
layout: 'fit',
height:250,
// style:'height:250px;',
split:true,
collapsible:true,
frame:true,
items:[grid],
tbar:toolbar
});
this.alarmGrid=grid;
this.alarmStore=store;
},
buildRecoverPanel:function(){
//已恢复的网元告警(近一个小时)
var store = new Ext.data.JsonStore({
root:'data',
id:'id',
fields:['id','alarmCode','alarmName','alarmContent','alarmType','node','nodeType',{name:'firstTime',type:'date',dateFormat:'Y-m-d H:i:s'},{name:'createTime',type:'date',dateFormat:'Y-m-d H:i:s'},{name:'checkTime',type:'date',dateFormat:'Y-m-d H:i:s'},'stackTimes'],
sortInfo:{field: 'checkTime', direction: 'DESC'}
});

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
header:'名称',
dataIndex:'alarmName',
renderer:this.simpleRenderer,
sortable:true,
width:30
},{
header:'对象',
dataIndex:'node',
renderer:this.simpleRenderer,
sortable:true,
width:30
},{
header:'内容',
dataIndex:'alarmContent',
renderer:this.simpleRenderer,
sortable:true
},{
header:'最早发生时间',
dataIndex:'firstTime',
type:'date',
renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
css:"text-align:center;",
sortable:true,
width:25
},{
header:'生成时间',
dataIndex:'createTime',
type:'date',
renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
css:"text-align:center;",
sortable:true,
width:25
},{
header:'恢复(签阅)时间',
dataIndex:'checkTime',
type:'date',
renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
css:"text-align:center;",
sortable:true,
width:28
},{
header:'次数',
dataIndex:'stackTimes',
css:"text-align:center;",
renderer:this.simpleRenderer,
sortable:true,
width:11
},{
header:'操作',
renderer:function(value,meta,record){
var resultStr = "<div class='controlBtn'><a href='javascript:void(0);' class='alarm_detail'>详细</a></div>";
return resultStr;
},
css:"text-align:center;",
width:15
}
]);
//GRID
var grid = new Ext.grid.GridPanel({
store:store,
enableColumnMove: false,
enableHdMenu: false,
autoScroll: true,
cm:cm,
//bodyStyle:'width:100%;height:100%;padding: 0px 0px 5px 0px;', //上右下左,顺时针
viewConfig: {
forceFit: true,
deferEmptyText: true,
emptyText: "无相关数据"
}
});
this.add({
xtype:'panel',
title:'::已恢复的网元告警(近一小时)::',
region:'south',
layout: 'fit',
split:true,
collapsible:true,
frame:true,
height:200,
//style:'height:200px;',
items:[grid]
});
this.recoverGrid=grid;
this.recoverStore=store;
},
buildBusinessPanel:function(){
var toolbar = new Ext.Toolbar({
items:[
{text:'语音业务',enableToggle:true,toggleGroup:'business',pressed:true},
{text:'短信业务',enableToggle:true,toggleGroup:'business'},
{text:'数据业务',enableToggle:true,toggleGroup:'business'},
'-','->',
'<div style="background-color:yellow;padding-right:10px;">系统情况(15:00-15:30):语音业务(1000/1/10001/99.9%);短信业务(100/1/101/99.9%);数据业务(300/1/301/99.7%)</div>'
]
});
var p = new Ext.Panel({
title:'::业务成功率(近4个统计周期)::',
region:'center',
//layout: 'column',
layout:'hbox',
layoutConfig: {
align : 'stretch',
pack : 'start'
},
//height:300,
// style:'height:50%;',
split:true,
frame:true,
gridArr:[],
tbar:toolbar
});
var store = new Ext.data.SimpleStore({
fields:['name','data'],
data:[['bsc01','xxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc02','xxxxxx'],['bsc03','3xxxxxx']]
})
for(var i=0;i<4;i++){
var grid = new Ext.grid.GridPanel({
//columnWidth:1/4,
//bodyStyle:'width:100%;height:100%;',
//style:'height:100%;',
//height:500,
store: store,
columns:[
{header:'名称',dataIndex:'name'},
{header:'10:00-10:30<br/>成功/失败/成功率',dataIndex:'data',sortable:true}
],
viewConfig: {
forceFit: true
}
});
p.gridArr.push(grid);
p.add(grid);
}
p.on('afterlayout',function(view,layout){
//Ext.log(view.getWidth())
//Ext.log(this.getInnerHeight(),this.gridArr[0].getFrameHeight(),this.gridArr[0].getSize().height,this.gridArr[0].getInnerHeight())
//var height = Math.max(this.getInnerHeight()-30,100);
var w = (view.getWidth()-10)/this.gridArr.length;
for(var i=0;i<this.gridArr.length;i++){
this.gridArr[i].setWidth(w); //.doLayout()
}
},p);
this.add(p);
}
});

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/images/s.gif';
Ext.QuickTips.init();
var p = new Elvis.NetCellAlarmMonitor({
});
p2={
xtype:'panel',
title:'xx',
frame: true,
header: true,
border: false,
layout: "border",
items:[{xtype:'panel',html:'xx',region:'center'}]
}
var v = new Ext.Viewport({
layout:'fit',
items:[p]
});

});

[atian25]

if i set width to grid's parent panel, it works...

why.. any other solution

[Animal]

forceFit overrides any column width settings you may have.

[atian25]

forceFit overrides any column width settings you may have.

thanks
but in the second panel,girds dont have any width cfg.
then in ie it show well, in ff the last column is overflow.

[extjs_alan]

浏览器兼容的问题　唉~ 不能帮到你..
　:-?