PDA

View Full Version : [3.0rc2] Grid Column don't show correct width in firefox



atian25
12 Jun 2009, 1:29 AM
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
12 Jun 2009, 1:40 AM
if i set width to grid's parent panel, it works...

why.. any other solution

Animal
12 Jun 2009, 1:51 AM
forceFit overrides any column width settings you may have.

atian25
12 Jun 2009, 5:20 AM
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
17 Sep 2009, 8:05 PM
??????????~ ?????..
?:-?