PDA

View Full Version : Ext.BindMgr is undefined



amist
31 Jan 2013, 2:36 AM
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

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


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);
});

evant
31 Jan 2013, 3:30 AM
Because there's no BindMgr in ExtJS.

amist
3 Feb 2013, 1:29 AM
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



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

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?

amist
3 Feb 2013, 5:33 AM
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


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

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