PDA

View Full Version : Fluid design - Help Needed



renganathan
15 Dec 2011, 11:31 PM
Hi all,

I am trying to do fluid design in our project . I have one panel with one grid and one chart .

But it shows only grid , chart is not showing .pls refer this image



30085

Here is my code . please tell me what i am doing wrong




var summaryGrid = Ext.create('Ext.grid.Panel', {
store: summaryStore,
anchor: '50%',
columns:
[{
text: 'Lab',
sortable: true,
dataIndex: 'lab'
}, {
text: 'Assets',
sortable: true,
dataIndex: 'asset'
}, {
text: 'Chassis',
sortable: true,
dataIndex: 'chassis'
}, {
text: 'EOL',
sortable: true,
dataIndex: 'eol'
}],
width: '50%',
forceFit: true,
viewConfig: {
stripeRows: true
}
});

var GraphPanel = Ext.create('Ext.form.Panel', {
anchor: '50%',
width: '50%',
id : 'GraphPanel',
loadMask : true,
maximizable: true,
layout: 'fit',
stateful: false,
items: {
id: 'chartCmp',
xtype: 'chart',
style: 'background:#fff',
animate: true,
shadow: true,
store: graphStore,
legend :
{
position: 'bottom'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['assets'],
title: 'Assets',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Lab',
label: {
rotate: {
degrees: 360
}
}
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ' : ' + storeItem.get('assets'));
}
},
xField: 'name',
yField: 'assets'
}]
}
});
var dashboard = new Ext.Panel(
{
layout: 'anchor',
autoWidh: true,
width : '100%',
autoHeight: true,
padding: 5,
autoScroll: true,
items: [
{
autoHeight: true,
width : '100%',
autoWidh: true,
id : 'IRP',
xtype: 'panel',
frame: false,
autoScroll: true,
items:
[
{
height: 300,
autoWidh: true,
id : 'inventorypart',
xtype: 'panel',
title: 'Inventory',
collapsible: true,
layout:
{
type: 'hbox',
align: 'stretch',
flex: 1
},
items:
[
GraphPanel,
summaryGrid
]
}
]
}
});

friend
16 Dec 2011, 5:10 AM
Panel attributes autoWidth: true and autoHeight: true are no longer supported in ExtJs 4.

According to the API docs, width now only accepts a numeric value (not '100%'), where you're expected to use containers/layouts to handle percentage-based widths.

Your dashboard panel should probably look something like this:



var dashboard = Ext.create('Ext.panel.Panel', {
layout: {
type: 'hbox',
align: 'stretch'
},
width: 800,
items: [{
xtype: 'chart',
flex: 1
// rest of config...
},{
xtype: 'grid',
flex: 1
// rest of config...
}]
});


If you're wanting the dashboard panel to occupy 100% of the page width, then you'll need to remove the width: 800 line above and set the dashboard panel to be the 'center' region of a Viewport.