Have problem with handling event in extjs

Pphancongphuoc · Dec 17, 2010

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

DDario Crivelli · Dec 20, 2010

The "this" pointer you put in onItemUpdate refers to the table object,
whose reference is owned by your code as myTable.
Hence, before adding onItemUpdateto myTable , you can decorate the object with your own attributes and methods, which will be visible inside onItemUpdate;
for instance, you could add a pointer to MyGrid (but I don't know if this would be legal in extjs).