1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    34
    Vote Rating
    0
    amist is on a distinguished road

      0  

    Default Unanswered: Panel with Horizontal layout

    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

  2. #2
    Sencha Premium Member StuartAshworth's Avatar
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    359
    Vote Rating
    20
    Answers
    11
    StuartAshworth has a spectacular aura about StuartAshworth has a spectacular aura about

      0  

    Default

    Your best bet would be to use the HBox or Column layout.
    Want to build better Sencha apps? Check out my free email course Best Practices for Improving your Sencha Apps

    Learn Ext JS 6 with my new ebook - Ext JS 6: Getting Started. Use code "extjs6" for 33% off!

    Need help with Sencha development, code reviews or training? Get in touch!

    stuart@stuartashworth.com
    @StuartAshworth9

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    34
    Vote Rating
    0
    amist is on a distinguished road

      0  

    Default

    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
    Code:
    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)

    Code:
    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

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    34
    Vote Rating
    0
    amist is on a distinguished road

      0  

    Default

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

    Thanks

Thread Participants: 1