Panel with Horizontal layout

[amist]

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

[Stoot98]

Your best bet would be to use the HBox or Column layout.

[amist]

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]

Simply, How i can render my details store data (get data after user click on row) to this panel (showpanel)

Thanks