Hello everybody
I need to implement Extjs gridpanel to make it add new record from limestreamer message
My limestreamer message is a json string
My problem is that I cannot call the store of the grid to add new record when
onItemUpdate event happen
Because the adding new record execute code is taken place in the event onItemUpdate, so that the pointer this.mygrid.getStore is out of scope
Following is my code
1. MyWindow.ui.js:
MyWindowUi = Ext.extend(Ext.Window, {
title: 'My Window',
width: 448,
height: 434,
initComponent: function() {
this.items = [
{
xtype: 'grid',
title: 'My Grid',
ref:'MyGrid',
store: 'MyStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'symbol',
header: 'Symbol',
sortable: true,
width: 100
},
{
xtype: 'numbercolumn',
dataIndex: 'quanlity',
header: 'Quanlity',
sortable: true,
width: 100,
align: 'right'
},
{
xtype: 'datecolumn',
dataIndex: 'price',
header: 'Price',
sortable: true,
width: 100
}
]
}
];
MyWindowUi.superclass.initComponent.call(this);
}
});
MyWindow.js code:
MyWindow = Ext.extend(MyWindowUi,
{
initComponent: function()
{
MyWindow.superclass.initComponent.call(this);
var page = new PushPage();
page.onEngineCreation = function (engine)
{
engine.connection.setAdapterName("PROXY_HELLOWORLD");
engine.changeStatus("STREAMING");
}
page.bind();
page.createEngine("HelloWorldApp", "LS", "SHARE_SESSION");
var group = "greetings"
var schema = "message";
var myTable = new NonVisualTable(group,schema,"MERGE");
myTable.setSnapshotRequired(true);
var i=0;
myTable.on('onItemUpdate', function(item, itemUpdate, itemName)
{
var updateText = "updating item " + item + ". ";
if (itemUpdate.isValueChanged(1))
{
updateText = itemUpdate.getNewValue(1);
//AddRecord(updateText);
var defaultData = updateText;
[COLOR="Red"]var store = this.MyGrid.getStore();//I have problem here[/COLOR] //var grid = Ext.getCmp('myGrid');
console.log(grid);
var r = new MyStore.recordType(defaultData,3);
MyStore.insert(0, r);
}
});
page.addTable(myTable, "1");
},
}
);
My Store .js
MyStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
MyStore.superclass.constructor.call(this, Ext.apply({
storeId: 'MyStore',
ref:'MyStore',
fields: [
{
name: 'symbol'
},
{
name: 'quanlity'
},
{
name: 'price'
}
]
}, cfg));
}
});
new MyStore();
And the last one is my html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>project.xds</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="MyWindow.ui.js"></script>
<script type="text/javascript" src="MyWindow.js"></script>
<script type="text/javascript" src="MyStore.js"></script>
<script type="text/javascript" src="xds_index.js"></script>
<script type="text/javascript" language='JavaScript' src = 'LS/lscommons.js'></script>
<script type="text/javascript" language='JavaScript' src = 'LS/lspushpage.js'></script>
</head>
<body>
<script>
Ext.onReady(function() {
Ext.QuickTips.init();
var cmp1 = new MyWindow({
renderTo: Ext.getBody()
});
cmp1.show();
});
</script>
</body>
</html>
Is there anyway to make it recognize the store?
Thank you so much
