PDA

View Full Version : Panel with Horizontal layout



amist
10 Feb 2013, 3:13 AM
Dear All,
I want to display details of data as panel but with horizontal layout,
How i can set panel with horizontal columns ofrow details.

Thanks

StuartAshworth
10 Feb 2013, 7:21 PM
Your best bet would be to use the HBox (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.HBox) or Column (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Column) layout.

amist
10 Feb 2013, 11:39 PM
Thank you for replay
I don't htink that these URL's will solve ny problem.
what i want to do is when the end user click on specific row in gride panel another panel display the full details of this row

my listener of first gride panel is

listeners: {


'afterrender': function(panel) {

panel.body.on(
'click', function(rowIndex,cellIndex,columnIndex,e) {


/**************************************************************/


var pos = panel.getSelectionModel().getSelection();

record = pos[0].data[
'ISIN'];



if (record && (this.boundRecord !== record)) {

console.log(
'bind', record);



stock_store.load({

params: {

stock: record

},

scope :
this,

callback:
function(records, operation, success) {


//here the store has been loaded so you can use what functions you like


if(stock_store.getCount() !=0)

{




var westPanel = Ext.getCmp('westPanel');


var westRegion = Ext.getCmp('westRegion');

westRegion.remove(westPanel,
true);

westRegion.add(showpanel1);

}




console.log(
"count",stock_store.getCount());

console.log(
"data",stock_store.getAt(0).get('Cmp_Name_en'));



}


/******************************Display West Region**************************************************/



})






?

?

?

?

}


/*******************************************************************/



});

}

},

which replaod the details store and display the details panel

my details panel (which didn't display any thing i don't why)


var
showpanel1 = Ext.define('Ext.Panel',

{

store: stock_store,

tbar: [{

text:
'Template',

handler:
function(){


var
tpl= new Ext.XTemplate(

'<table style="margin:20px;font-size:13px;font-family:sans-serif">'

+
'<tr><td><i>Company Name:</i></td><td><b>{Cmp_Name_en}</b></td></tr>'

+
'<tr><td><i>Open:</i></td><td><b>{Open_Price}</b></td></tr>'

+
'<tr><td><i>Close:</i></td><td><b>{Close}</b></td></tr>'

+
'<tr><td><i>Change:</i></td><td><b>{Change}</b></td></tr>'

+
'<tr><td><i>Change %:</i></td><td><b>{ChangP}</b></td></tr>'

+
'<tr><td><i>Last Price:</i></td><td><b>{Last_Price}</b></td></tr>'

+
'<tr><td><i>Last Trade Qnt.:</i></td><td><b>{Last_Price_Qty}</b></td></tr>'

+
'<tr><td><i>High:</i></td><td><b>{High}</b></td></tr>'

+
'<tr><td><i>Low:</i></td><td><b>{Low}</b></td></tr>'

+
'<tr><td><i>Bids Vol.:</i></td><td><b>{AskV}</b></td></tr>'

+
'<tr><td><i>Asks Vol.:</i></td><td><b>{BidV}</b></td></tr>'

+
'<tr><td><i>Best Bid:</i></td><td><b>{High_Ask}</b></td></tr>'

+
'<tr><td><i>High Ask:</i></td><td><b>{high_bid}</b></td></tr>'

+
'<tr><td><i>Low Bid:</i></td><td><b>{Low_Ask}</b></td></tr>'

+
'<tr><td><i>Best Ask:</i></td><td><b>{low_bid}</b></td></tr>'

+
'<tr><td><i>Last Bid:</i></td><td><b>{last_ask}</b></td></tr>'

+
'<tr><td><i>Last Ask:</i></td><td><b>{last_bid}</b></td></tr>'

+
'<tr><td><i>Last Bid Qnt.:</i></td><td><b>{last_bid_volume}</b></td></tr>'

+
'<tr><td><i>Last Ask Qnt.:</i></td><td><b>{last_ask_volume}</b></td></tr>'

+
'<tr><td><i>Best Bid Qnt.:</i></td><td><b>{Low_Ask_Qty}</b></td></tr>'

+
'<tr><td><i>Best Bid Qnt.:</i></td><td><b>{High_Bid_Qty}</b></td></tr>'

+
'<tr><td><i>Trades Qnt.:</i></td><td><b>{Volume}</b></td></tr>'

+
'<tr><td><i>Total Value.:</i></td><td><b>{Value}</b></td></tr>'

+
'<tr><td><i>Trades #:</i></td><td><b>{Trades_num}</b></td></tr>'

+
'<tr><td><i>Currency:</i></td><td><b>{cucode}</b></td></tr>'

+
'</table>'

);

tpl.overwrite(showpanel1.body, stock_store);

}

}]
});


I want to bind the details of store to this show panel.
your reply will be appreciated

Thanks

amist
11 Feb 2013, 12:04 AM
Simply, How i can render my details store data (get data after user click on row) to this panel (showpanel)

Thanks