PDA

View Full Version : Layout Problem with Ext.Ajax.request



LedrickLeron
21 Feb 2008, 10:51 AM
This problem seems trival however can't figure it out:

I want to have 2 items in the center region of the border layout.

I have a FusionChart that I want on top and a GridPanel I want on the bottom of the center region...

I want chartPanel on top and storageGrid on the bottom of my center region... how and where would I do that?

Here is my code:


Ext.QuickTips.init();

this.Storage = new mainStorPanel();
this.Home = new HomePanel();
//this.Switch = new switchPanel();

var viewport = new Ext.Viewport({
layout:'border',
items: [{
region:'north',
height: 50,
border: false,
html:'<div id="header"><div class="api-title">SANMobility DashBoard - V0.2 </div></div>'
},{
region:'center',
border: false,
layout: 'fit',
items: {
id: 'main-tabs',
xtype:'tabpanel',
activeTab:0,
items:[this.Home,this.Storage]
}
},{
region:'south',
height:25,
border:false,
html:'<div id="footer" unselectable="on">Copyright <span>&copy;</span> <?php echo date('Y'); ?> AT&T - SANMobility Team </div>'
}]
});
});
var mainStorPanel = function() {
var search = function() {
if(!this.form.getForm().isValid()) {
return;
}
//this.storageGrid.setCondition(this.form.getForm().getValues());
//this.storageGrid.load();
};

today.setDate(yar);

this.form = new Ext.FormPanel({
region: 'north',
border: false,
height: 200,
labelWidth: 90,
defaults: {width:120, maxLength:10},
bodyStyle: 'border-bottom:#777777 1px solid;padding:10px;',
keys: {
key: Ext.EventObject.ENTER,
fn: search.createDelegate(this)
},
items: [{
xtype: 'datefield',
fieldLabel: 'Date of View',
name: 'endDate',
format: 'Y-m-d',
value: today,
maxValue: yesterday
}, {
xtype: 'combo',
fieldLabel: 'Storage Type',
hiddenName: 'storageType',
valueField: 'key',
displayField: 'value',
editable: false,
mode: 'local',
triggerAction: 'all',
store: new Ext.data.SimpleStore({
fields: ['key', 'value'],
data : CATEGORY_TYPES
})
}, {
xtype: 'combo',
fieldLabel: 'By Location',
hiddenName: 'locations',
valueField: 'key',
displayField: 'value',
editable: false,
mode: 'local',
triggerAction: 'all',
store: new Ext.data.SimpleStore({
fields: ['key', 'value'],
data : LOCATIONS
})
}]
});

this.storage = new storageGrid();
this.storeChart = new chartBuild();

mainStorPanel.superclass.constructor.call(this, {
title: 'Storage Panel',
layout: 'border',
autoScroll: true,
items: [this.storage ,{
region: 'east',
title: 'Drill Down',
layout: 'fit',
collapsible: true,
border: false,
width: 240,
margins: '0 0 0 2',
cls: 'x-lb',
items: [this.form],
tools: [{
id: 'search',
qtip: 'Search records based on conditions',
handler: search.createDelegate(this)
},{
id: 'close',
qtip: 'Clear all Conditions',
handler: function() {
this.form.getForm().reset();
}.createDelegate(this)
}]
}]
});
}

Ext.extend(mainStorPanel, Ext.Panel, { });

/** =======================================================
* StorageGrid.js
** ==================================================== */
var storageGrid = function() {
this.store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/newBuilds/displayGrid.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'frames',
totalProperty: 'totalCount'
},[
{name: 'location'},
{name: 'array'},
{name: 'model'}
])
});

// NEW 02/20/08
this.showAccountWindow = function(isAdd) {
if (!this.accountWindow) {
this.accountWindow = new Ext.Window({
width: 450,
height: 440,
iconCls: 'form',
closeAction: 'hide',
resizable: false,
constrain: true,
modal: true,
layout: 'fit'
});
}

if (isAdd) {
this.accountWindow.setTitle('Add Account');
this.form.getForm().reset();
categoryStore.removeAll();
} else {
var formData = this.getSelectionModel().getSelected().data;
this.accountWindow.setTitle('Detailed Frame Information for: ' +formData.array);

Ext.Ajax.request({
url: '/newBuilds/createBreakChart.php',
params: {action: 'getDate',location: formData.location},
method: 'GET',
extraParams: {date: '2007-11-28'},
success: function ( result, request ) {
Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', result.responseText);
}
});
}
this.accountWindow.show(this.getEl());
};
// END NEW

storageGrid.superclass.constructor.call(this, {
region: 'center',
border: false,
loadMask: true,
height: 500,
viewConfig: {forceFit: true},
ds: this.store,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header:'DataCenter',dataIndex:'location'},
{header:'Frame Name',dataIndex:'array',sortable:true},
{header:'Model',dataIndex:'model',sortable:true},
{header:'Building',dataIndex:'building',sortable:true},
{header:'Floor',dataIndex:'floor',sortable:true},
{header:'Tile',dataIndex:'tile',sortable:true}
]),
trackMouseOver: false, tbar: [{
text: 'Chart',
iconCls: 'chart',
handler: this.showAccountWindow.createDelegate(this, [false])
}],
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: this.store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
listeners: {
'render': {
fn: function() {
this.store.load({params:{start:0, limit:25}});
},
scope: this,
single: true
}
}
});
this.on('rowdblclick', this.showAccountWindow.createDelegate(this, [false]));
}

Ext.extend(storageGrid, Ext.grid.GridPanel, {});

/** =======================================================
* chartBuild.js
** ==================================================== */
var chartBuild = function() {
var strURL = "createChart.php?chartType=stacked&view=all&date=2007-11-08";
//var strURL = "createChart.php?date=2007-11-28&chartType=stacked&view=all"
strURL = unescape(strURL);

chart_chartID = new FusionCharts("flash/MSStackedColumn2D.swf", "chartID", 950, 370, "0", "1");
chart_chartID.addParam("wmode", "transparent");
chart_chartID.setDataURL(strURL);

chartBuild.superclass.constructor.call(this, {
region: 'north',
id: 'chartIDDiv',
autoScroll: true,
border: false,
loadMask: true,
listeners: {
'render': {
fn: function() {
chart_chartID.render("chartIDDiv");
},
scope: this,
single: true
}
}
});
}

Ext.extend(chartBuild, Ext.Panel, { });

LedrickLeron
21 Feb 2008, 1:08 PM
Figured it out, except for a bit of sizing problems I got going on here...



mainStorPanel.superclass.constructor.call(this, {
title: 'Storage Panel',
layout: 'border',
autoScroll: true,
items: [{
region: 'center',
autoScroll: true,
layout: 'fit',
items: [this.chartPanel,this.storageGrid]
},{
region: 'east',
title: 'Drill Down',
layout: 'fit',
collapsible: true,
border: false,
width: 240,
margins: '0 0 0 2',
cls: 'x-lb',
items: [this.form],
tools: [{
id: 'search',
qtip: 'Search records based on conditions',
handler: search.createDelegate(this)
},{
id: 'close',
qtip: 'Clear all Conditions',
handler: function() {
this.form.getForm().reset();
}.createDelegate(this)
}]
}]