PDA

View Full Version : why i can not show combobox and graph in formpanel at the same time??



big
4 Mar 2010, 4:38 AM
why i can not show combobox and graph in formpanel at the same time?
such as this picture.
http://img96.imageshack.us/img96/4863/piclp.jpg

and this is my code.


Ext.chart.Chart.CHART_URL = '../ext-3.0.0/resources/charts.swf';
Ext.onReady(function(){

Ext.QuickTips.init();

/////////grid////////
var store = new Ext.data.JsonStore({
url: 'simplegrid2.php',
root: 'results',
method:'POST',/////////////////
totalProperty: 'total',
fields: ['gid', 'ddate','station','dis','aavg'],
remoteSort: true
});



// store.setDefaultSort('amphoe', 'desc');
var grid = new Ext.grid.GridPanel({
title: 'data',
collapsible:true,
renderTo: "table",
//closeAction: 'hide',
store: store,
//ds:store,
columns: [{
header: "GID",
width: 100,
dataIndex: 'gid',
sortable: true,
hidden:false,
align: 'center'
},{
id: 'ddate',
header: "ddate",
width: 120,
dataIndex: 'ddate',
sortable: true,
align: 'center'
},{
id: 'station',
header: "station",
width: 40,
dataIndex: 'station',
sortable: true,
align: 'center'
},{
id: 'dis',
header: "dis",
width: 100,
dataIndex: 'dis',
sortable: true,
align: 'center'

},{
id: 'aavg',
header: "aavg",
width: 100,
dataIndex: 'aavg',
sortable: true,
align: 'center'

}],
autoExpandColumn: 'station',
//renderTo: Ext.getBody(),
renderTo: "table",
width: 600,
height: 300,
loadMask: true,
columnLines:true
});
store.load();

//////////////combobox/////////////////////
//////////for eq_id////////
var station=new Ext.data.JsonStore({
url: 'eq_id.php',
//baseParams:{cmd:'makes'},
root: 'station',
fields: ['station']
});

///////////for choose day/month/years///////
var sortby = new Ext.data.SimpleStore({
fields: ['sortby'],
data : [['Day'],['Month'],['Year']]
});

//////////////////end combo/////////



//////////////////Chart///////////////////////
var linestore= new Ext.data.Store({
autoLoad:true,
proxy: new Ext.data.HttpProxy({
url: 'chartserver.php'
}),
reader: new Ext.data.JsonReader({
root: 'data'
}, [
{name: 'ddate'},
{name: 'dis',type: 'float'},
//{name:'eq_id'}
//{name: 'views',type: 'int'}
])/*,
listeners:{
load: function(){
}
}*/
});
var line = new Ext.FormPanel({
title: 'DATA FROM HYDRO',
//renderTo: 'container',
width:1000,
height:500,
//frame: true,
//layout:'fit',
//modal: true,
closable:true,
//closeAction:'hide',

items: [{
xtype: 'linechart',
store: linestore,
xField: 'ddate',
yField: 'dis',
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('ddate'));
}
}
},{
fieldLabel: 'Station',
name: 'aa',
id: 'aa',
xtype: 'combo',
allowBlank:false


}]
});





var SimpleWindow= new Ext.Window({
title: 'Form Add File',
closable:true,
closeAction:'hide',
width: 340,
height:300,
layout: 'fit',
modal: true,

items: line,

});
////////////////////////////////////



///////////////////simple form//////////
var simpleForm = new Ext.FormPanel ({
labelWidth: 75,
method: 'POST',//////////////////
renderTo: "simple-form",
frame: true,
title: 'Search',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
items: [{



xtype: 'combo',
id: 'station',
fieldLabel: 'Station',
anchor: '94%',
store: station,
displayField: 'station',
valueField: 'station',
editable: false,
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
//fieldLabel: 'Name',
emptyText: 'Select Station',
selectOnFocus: true,
name: 'station'
},{



fieldLabel: 'Date From',
name: 'datefrom',
id: 'datefrom',
xtype:'datefield',
format:'Y-m-d',
emptyText: 'Select Date From'
},{

fieldLabel: 'Date To',
name: 'dateto',
id: 'dateto',
xtype:'datefield',
format:'Y-m-d',
emptyText: 'Select Date To'

},{
xtype: 'combo',
id:'sortby',
//store:storeavg,
name: 'sortby',
fieldLabel: 'Sort by',
editable: false,
forceSelection: true,
triggerAction: 'all',
mode: 'local',
store: sortby,
emptyText: 'Select Sort',
displayField:'sortby',
width: 120






}],

buttons: [{
text: 'Search',
handler: function () {

store.reload({
params: {
sortby: Ext.getCmp("sortby").getValue(),
station: Ext.getCmp("station").getValue(),

datefrom: Ext.getCmp("datefrom").getRawValue(),
dateto: Ext.getCmp("dateto").getRawValue()

}
});






}
},{
text:'Graph',
handler: function () {


if(!SimpleWindow.isVisible()){
linestore.reload({
params: {
sortby: Ext.getCmp("sortby").getValue(),
station: Ext.getCmp("station").getValue(),

datefrom: Ext.getCmp("datefrom").getRawValue(),
dateto: Ext.getCmp("dateto").getRawValue()

}
});
SimpleWindow.show();
} else {
SimpleWindow.toFront();
}


}

},{
text: 'Cancel',
handler: function () {
simpleForm.getForm().reset();

}
}]
});


/////////////////
});

steffenk
4 Mar 2010, 4:53 AM
it's hard to get it by the code, but i would not use renderTo but create a panel with the created items at the end to show all.

big
4 Mar 2010, 9:10 AM
but the graph overlap combobox.

how to show combobox below the graph.

steffenk
4 Mar 2010, 9:43 AM
make it simple


var MyPanel = new Ext.FormPanel({
items: [line,simpleForm]
)};