PDA

View Full Version : 4.1.1-rc1 layout: Chrome Tree Panel Column Widths Messed Up



persrap
21 May 2012, 2:58 PM
I am using the latest ExtJS 4.1.1-rc1 and displaying a tree panel with about 6 columns on the page and it shows perfect in Internet Explorer and Firefox but it the column sizes and layout is all messed up on Google Chrome web browser. I am using the latest version chrome which is v19.0.1084.46 on Windows 7. I have tried EVERYTHING to get it to work and it just won't display correctly in Chrome. I even tried using an older version of extjs 4.0.7 and same thing. There are no errors or css issues on the page either.

Here is the code I have:


myObj.tree = Ext.create('Ext.tree.Panel', {
id: 'my-tree-panel',
preventHeader: true,
height: 350,
renderTo: 'my-tree',
collapsible: true,
useArrows: true,
rootVisible: false,
store: myObj.dataStore,
multiSelect: true,
singleExpand: true,
stateId: 'myTreeState',
stateful: false,
frame: true,

//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Field 1',
flex: 2,
sortable: true,
dataIndex: 'display_name'
},{
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'File Type',
flex: 1,
sortable: true,
dataIndex: 'mimetype',
align: 'center',
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{banner_mimetype:this.formatMimeType}', {
formatMimeType: function (v) {
return v;
}
})
},{
text: 'Width (px)',
flex: 1,
dataIndex: 'width',
sortable: true,
align: 'center',
xtype: 'templatecolumn',
tpl: Ext.create('Ext.XTemplate', '{banner_width:this.formatDimensionSize}', {
formatDimensionSize: function (v) {
if (v) {
return v;
}
}
})
},{
text: 'Height (px)',
flex: 1,
dataIndex: 'height',
sortable: true,
align: 'center',
xtype: 'templatecolumn',
tpl: Ext.create('Ext.XTemplate', '{banner_height:this.formatDimensionSize}', {
formatDimensionSize: function (v) {
if (v) {
return v;
}
}
})
},{
text: 'File Size',
flex: 1,
dataIndex: 'filesize',
sortable: true,
align: 'center',
xtype: 'templatecolumn',
tpl: Ext.create('Ext.XTemplate', '{banner_filesize:this.formatFilesize}', {
formatFilesize: function (bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
if (bytes == 0) return bytes;

var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return ((i == 0)? (bytes / Math.pow(1024, i)) : (bytes / Math.pow(1024, i)).toFixed(1)) + ' ' + sizes[i];
}
})
},{
text: 'Last Modified',
flex: 1,
dataIndex: 'mdate',
sortable: true,
align: 'center',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}],


dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: ['',
{
xtype: 'checkbox',
name: 'show_preview_on_mouseover',
id: 'show_preview_on_mouseover',
boxLabel: '<span style="font-size: 0.85em;">Display Mouse-Over Previews</span>',
checked: true
}

}]
});

scottmartin
26 May 2012, 7:05 AM
Please post a screenshot of what you are having problems with.

Please use code tags around your code. I have done this for you this time ;)

Regards,
Scott.

scottmartin
26 May 2012, 7:14 AM
This seems to work fine: There were are few code errors ... brackets, etc..
I also added onWindowResize to resize your tree when the browser re-sizes.



Ext.onReady(function() {

var tree = Ext.create('Ext.tree.Panel', {
id: 'my-tree-panel',
preventHeader: true,
height: 350,
renderTo: 'sencha-div',
collapsible: true,
useArrows: true,
rootVisible: false,
//store: myObj.dataStore,
multiSelect: true,
singleExpand: true,
stateId: 'myTreeState',
stateful: false,
frame: true,

//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn',
//this is so we know which column will show the tree
text: 'Field 1',
flex: 2,
sortable: true,
dataIndex: 'display_name'
}, {
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'File Type',
flex: 1,
sortable: true,
dataIndex: 'mimetype',
align: 'center',
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{banner_mimetype:this.formatMimeType}', {
formatMimeType: function(v) {
return v;
}
})
}, {
text: 'Width (px)',
flex: 1,
dataIndex: 'width',
sortable: true,
align: 'center',
xtype: 'templatecolumn',
tpl: Ext.create('Ext.XTemplate', '{banner_width:this.formatDimensionSize}', {
formatDimensionSize: function(v) {
if (v) {
return v;
}
}
})
}, {
text: 'Height (px)',
flex: 1,
dataIndex: 'height',
sortable: true,
align: 'center',
xtype: 'templatecolumn',
tpl: Ext.create('Ext.XTemplate', '{banner_height:this.formatDimensionSize}', {
formatDimensionSize: function(v) {
if (v) {
return v;
}
}
})
}, {
text: 'File Size',
flex: 1,
dataIndex: 'filesize',
sortable: true,
align: 'center',
xtype: 'templatecolumn',
tpl: Ext.create('Ext.XTemplate', '{banner_filesize:this.formatFilesize}', {
formatFilesize: function(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
if (bytes == 0) return bytes;

var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return ((i == 0) ? (bytes / Math.pow(1024, i)) : (bytes / Math.pow(1024, i)).toFixed(1)) + ' ' + sizes[i];
}
})
}, {
text: 'Last Modified',
flex: 1,
dataIndex: 'mdate',
sortable: true,
align: 'center',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}],


dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: ['',
{
xtype: 'checkbox',
name: 'show_preview_on_mouseover',
id: 'show_preview_on_mouseover',
boxLabel: '<span style="font-size: 0.85em;">Display Mouse-Over Previews</span>',
checked: true
}]
}]
});

Ext.EventManager.onWindowResize(tree.doLayout, tree);
});


Scott.