Results 1 to 4 of 4

Thread: Ext.BindMgr is undefined

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    34
    Vote Rating
    0
      0  

    Default Ext.BindMgr is undefined

    Hi All,
    I need help in my app.
    When i click on panel record i need some details on this record display in show panel
    i face this problem
    TypeError: Ext.BindMgr is undefined
    Error area
    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); 
    
                            Ext.BindMgr.unbind(
    this.boundRecord);
    
                            Ext.BindMgr.bind(record, [
    'westRegion']);
    
                            
    this.boundRecord = record;
    
                        }
    
                           
    /*******************************************************************/
    
                          
    
                       });
    
                    }
    
                }
    
    my full js is

    Code:
    Ext.define(
    'Market_Watch', {
        extend: 
    'Ext.data.Model',
        fields: [
    'Cmp_Name', 'Last_Price', 'Last_Price_Qty',
        
    'Change', 'ChangP', 'Low',{name:'High',type:'float'},  'AskV', 'Low_Ask_Qty', 'Low_Ask_Price', 'High_Bid_Price','High_Bid_Qty'
         ,
    'BidV','Volume','Value','Open_Price', 'Close','ISIN'],
        proxy: {
            type: 
    'ajax',
            url : 
    'data/Streamer.ashx',
            method: 
    'GET',
            reader: {
                type: 
    'json'
                }
        }
    });
    //eo define model
    var
     market_store;
    Ext.require(
    'Ext.data.Store');
    market_store = Ext.create(
    'Ext.data.Store', {
    model: 
    'Market_Watch',
    autoLoad: 
    true
    });
    // eo store define
    var
     showpanel1 = Ext.define('Ext.Panel', {
    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}</b></td></tr>'
    + 
    '<tr><td><i>Last Price:</i></td><td><b>{Last_Price}</b></td></tr>'
    + 
    '</table>'
    )
    , updateBound: 
    function (record) {
        
    var data = record && record.data ? record.data : {};
        
    this.tpl.overwrite(this.body, data);
    }
    , initComponent: 
    function () {
        
    var config = {
            afterEdit: 
    this.updateBound
    , afterReject: 
    this.updateBound
    , onBind: 
    function (record) {
        
    this.boundRecord = record;
        
    this.updateBound(record);
    }
    , onUnbind: 
    function (record) {
        
    this.boundRecord = null;
        
    this.updateBound();
    }
        }; 
    // eo config object 
        
    // apply config 
        Ext.apply(
    this, Ext.apply(this.initialConfig, config));
        
    this.callParent();
        
    // call parent 
        
    //Example.ShowPanel.superclass.initComponent.apply(this, arguments);
    } 
    // eo function initComponent 
    }); 
    // eo extend 
    ?
    ?
    Ext.onReady(
    function() {
    Ext.create(
    'Ext.container.Viewport',{
    title:
    'Border Example',
    layout:
    'border',
    defaults:{
           frame:
    true,
           split:
    true
      },
      items:[
      {
            title : 
    'North Panel', // 2
            region : 
    'north',
            height : 100,
            minHeight : 100,
            maxHeight : 150,
            collapsible : 
    true
        
      },
      {
            title:
    'South Panel',
            region:
    'south',
            split:
    false,
            height:75,
            margins:
        {
              top:5
            }
        
      },
      {
            title:
    'East Panel',
            region:
    'east',
            collapsible:
    true,
            width:100,
            minWidth:100,
            maxWidth:150
        
      },
      {
            xtype : 
    'container',
            region : 
    'west',
            layout : 
    'fit',
            id : 
    'westRegion',
            collapsible : 
    true,
            width:100,
            minWidth:100,
            maxWidth:150,
            autoEl : {},
            items : {
                title : 
    'Stock Details',
                id : 
    'westPanel',
                html : 
    'Ready On Click',
                frame : 
    true
            }
        },
        {
            xtype : 
    'container',
            region : 
    'center',
            layout : 
    'fit',
            id : 
    'centerRegion',
            collapsible : 
    true,
            autoEl : {},
            items : {
                title : 
    'Center Region',
                id : 
    'centerPanel',
                html : 
    'I am disposable',
                frame : 
    true
            }
        }
      ]
    });
    // eo viewport define
    ?
    market_store.load();
    var
     streamer;
    streamer=Ext.create(
    'Ext.grid.Panel', {
    store: market_store,
    width: 900,
    height: 200,
    align: 
    'center',
    columns: [
            {header: 
    'ISIN', width:50, dataIndex: 'ISIN'},
            {header: 
    'Name', width:250, dataIndex: 'Cmp_Name'},
            {header: 
    'Last', width:50, dataIndex: 'Last_Price'},
            {header: 
    'LastVol', width:50, dataIndex: 'Last_Price_Qty'},
            {header: 
    'Change', width:50, dataIndex: 'Change'},
            {header: 
    'Change %', width:70, dataIndex: 'ChangP'},
            {header: 
    'Low', width:50, dataIndex: 'Low'},
            {header: 
    'High', width:50, dataIndex: 'High',tdCls: 'x-high-cell', },
            {header: 
    'AsksVol', width:50, dataIndex: 'AskV'},
            {header: 
    'BestAskVol', width:50, dataIndex: 'Low_Ask_Qty'},
            {header: 
    'AskPrice', width:50, dataIndex: 'Low_Ask_Price'},
            {header: 
    'BidPrice', width:50, dataIndex: 'High_Bid_Price'},
            {header: 
    'BestBidVol', width:50, dataIndex: 'High_Bid_Qty'},
            {header: 
    'BidsVol', width:50, dataIndex: 'BidV'},
            {header: 
    'Volume',  width:50, dataIndex: 'Volume'},
            {header: 
    'Value',  width:50, dataIndex: 'Value'},
            {header: 
    'Open', width:50, dataIndex: 'Open_Price'},
            {header: 
    'Close', width:50, dataIndex: 'Close'}     
            ],
                stripeRows: 
    true,
                autoSizeColumns: 
    true,
                autoSizeGrid: 
    true,
                title:
    'Mist Market Watch',
                collapsible: 
    false,
                animCollapse: 
    false,
                height: 445,
                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); 
                            Ext.BindMgr.unbind(
    this.boundRecord);
                            Ext.BindMgr.bind(record, [
    'westRegion']);
                            
    this.boundRecord = record;
                        }
                           
    /*******************************************************************/
                          
                       });
                    }
                },
                viewConfig: {
                getRowClass: 
    function(rec, index) { 
            
    if (rec.get('rendered') === undefined) { 
            
            Ext.Function.defer(
    function() { 
                
    this.removeRowCls(index, 'price-fall'); 
                
    this.removeRowCls(index, 'price-rise'); 
                rec.set(
    'rendered', true); // mark row, in case there repaint occur 
            }, 2000, 
    this); 
     
            
    if (rec.get('high') < 0) { 
                
    return'price-fall'; 
            } 
    else { 
                
    return'price-rise'; 
            } 
        } 
    } 
        },
        columnLines: 
    true
                
    });
    // eo market watch panel define
    /******************************Display Center Region**************************************************/
    streamer.columns[0].setVisible(
    false);
    var
     centerPanel = Ext.getCmp('centerPanel');
    var
     centerRegion = Ext.getCmp('centerRegion');
    centerRegion.remove(centerPanel, 
    true);
    centerRegion.add(streamer);
    /******************************Display West Region**************************************************/
    
     
    var westPanel = Ext.getCmp('westPanel');
    var
     westRegion = Ext.getCmp('westRegion');
    westRegion.remove(westPanel, 
    true);
    westRegion.add(showpanel1);    
    });
    

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,233
    Answers
    755
    Vote Rating
    1012
      0  

    Default

    Because there's no BindMgr in ExtJS.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    34
    Vote Rating
    0
      0  

    Default

    what i want to do is to bind store data to show panel in run time

    Store data load in case of click on row in gride panel

    Code:
    stock_store = Ext.create(
    'Ext.data.Store', {
    
    type: 
    'ajax',
    
    url : 
    'data/stock_details.ashx',
    
     fields: [
    'Cmp_Name_en', 'Last_Price', 'Last_Price_Qty',
    
        
    'Change', 'ChangP', 'Low','High',  'AskV', 'Low_Ask_Qty', 'Low_Ask', 'High_Ask','last_ask'
    
         ,
    'last_Ask_volume','Low_Ask_Qty','low_bid','high_bid','last_bid','last_bid_volume','High_Bid_Qty','BidV','Volume','Value','Open_Price', 'Close','cucode'],
    
    autoLoad: 
    false
    
    });
    // eo store define
    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); 
    
                            
    // Ext.BindMgr.unbind(this.boundRecord);
    
                            
    //Ext.BindMgr.bind(record, ['westRegion']);
    
                            
    // westRegion.bind(record);
    
                            
    //this.boundRecord = record;
    
                            stock_store.load({
    
                              params: {
    
                                stock: record
    
                              }
    
                            })
    
    
    ?
    
    ?
    
    ?
    
    ?
    
                        }
    
    show panel data is
    Code:
    var
     showpanel1 = Ext.define('Ext.Panel', {
    
    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>Last Price:</i></td><td><b>{Last_Price}</b></td></tr>'
    
    + 
    '</table>'
    
    )
    
    , updateBound: 
    function (record) {
    
        
    var data = record && record.data ? record.data : {};
    
        
    this.tpl.overwrite(this.body, data);
    
    }
    
    , initComponent: 
    function () {
    
    
        
    var config = {
    
            afterEdit: 
    this.updateBound
    
    , afterReject: 
    this.updateBound
    
    , onBind: 
    function (record) {
    
        
    this.boundRecord = record;
    
        
    this.updateBound(record);
    
    }
    
    , onUnbind: 
    function (record) {
    
        
    this.boundRecord = null;
    
        
    this.updateBound();
    
    }
    
        }; 
    // eo config object 
    
    
        
    // apply config 
    
        Ext.apply(
    this, Ext.apply(this.initialConfig, config));
    
        
    this.callParent();
    
        
    // call parent 
    
        
    //Example.ShowPanel.superclass.initComponent.apply(this, arguments);
    
    
    } 
    // eo function initComponent 
    
    }); 
    // eo extend 
    
    
    How can i bind store data after load to show panel?

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    34
    Vote Rating
    0
      0  

    Default

    Hi All,
    i need to know if this applicable or not i try to bind store data to panel (contains XTemplate)
    i wrote this code but the panel didn't appear

    Code:
    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)
    
                                    {
    
                                      showpanel1.bind(stock_store.getAt(0));
    
                                    }
    
                                    
    
    
                              console.log(
    "count",stock_store.getCount());
    
                              console.log(
    "data",stock_store.getAt(0).get('Cmp_Name_en'));}
    Show panel1 is
    Code:
    var
     showpanel1 = Ext.define('Ext.Panel',
    
    {
    
    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>'
    
    ),
    
    store: stock_store
    
    , updateBound: 
    function (record) {
    
        
    var data = record && record.data ? record.data : {};
    
        
    this.tpl.overwrite(this.body, data);
    
    }
    
    , initComponent: 
    function () {
    
    
        
    var config = {
    
            afterEdit: 
    this.updateBound
    
    , afterReject: 
    this.updateBound
    
    , onBind: 
    function (record) {
    
        
    this.boundRecord = record;
    
        
    this.updateBound(record);
    
    }
    
    , onUnbind: 
    function (record) {
    
        
    this.boundRecord = null;
    
        
    this.updateBound();
    
    }
    
        }; 
    // eo config object 
    
    
        
    // apply config 
    
        Ext.apply(
    this, Ext.apply(this.initialConfig, config));
    
        
    this.callParent();
    
        
    // call parent 
    
        
    //Example.ShowPanel.superclass.initComponent.apply(this, arguments);
    
    
    } 
    // eo function initComponent 
    
    }); 
    // eo extend 
    if this code is wrong how can i display this data once store has data

    Thanks All

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •