Solved

ExtJS Metachange event with GroupingStore

Posted on 2010-09-08
4
2,727 Views
Last Modified: 2013-11-11
Greetings all,

I am simply trying to use the metachange event to dynamically load data in from the server. In this case, the metachange event is not even firing (no alerts). Any ideas?

Ext.BLANK_IMAGE_URL = '/bin/js/ext-3.2.1/resources/images/default/s.gif';

Ext.ns('Weekend');

Open in new window


This is the grid (extending a GridPanel):
Weekend.Grid = Ext.extend(Ext.grid.GridPanel, {
    initComponent:function() {
        var config = {

            columns:[]
           
        };

        Ext.apply(this, Ext.apply(this.initialConfig, config));

        this.store = weekendStore;
        this.viewConfig = {forceFit: true};
        this.loadMask = true;

        this.id = 'weekend';

        Weekend.Grid.superclass.initComponent.apply(this, arguments);

        this.on({
            activate: {scope:this, single:true, fn:function() {
                this.store.load({params:{start:0, limit:10}});
            }}
        });

    }

});

Open in new window


...and this is the the GroupingStore:

Ext.reg('weekendGrid', Weekend.Grid);

var weekendStore = new Ext.data.GroupingStore({
   
    url: '/bin/php/do/weekend.do.php',
   
    reader: new Ext.data.JsonReader({
        root: 'data',

        listeners: {

            metachange: function(store, meta) {
               
                var g = Ext.getCmp('weekendGrid');
               
                alert(g);
               
                var cm = g.getColumnModel();
               
                alert(cm);
               
                cm.setConfig(meta.colModel);
                g.reconfigure(store, cm);
            }
        }
    }),

    sortInfo:{field: 'company', direction: "ASC"},
    groupField:'industry',
    storeId: 'weekendStore'
});

Open in new window


Any clue on what might be the issue here?
0
Comment
Question by:strimp101
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 3

Expert Comment

by:Gjslick
ID: 33633677
The metachange event is only going to fire if you dynamically re-configure your store's fields by having the store load json data with a special 'metaData' property inside of it.  What does your response data look like when your store loads?  There is an example in the docs for JsonReader of how your data should look to achieve this dynamic configuration by metaData: http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.JsonReader

Is your store loading at all by the way?  You may want the 'autoLoad: true' config in there. You will be able to tell if your store is loading by using a utility like Firebug, and seeing if an ajax request is being made for the store's data (i.e. an ajax request is being made to /bin/php/do/weekend.do.php).

Are you sure that you want to do this configuration by metaData though?  Will your store's fields be changing with different requests to load the store?  If not, and you just want the dynamic data, then you should really just specify the fields that are going to be used directly on the store (or reader) with the 'fields' config, as well as directly specifying your columns for the grid too.

Hope that helps, and let me know if you have any more questions.

-Greg
0
 

Author Comment

by:strimp101
ID: 33636435
Thanks for the reply.

The is the JSON response from the server which includes the metaData property:

{
    "metaData":{
        "root":"data",
        "fields":["company","price","change","pctChange","lastChange","industry"],
        "colModel":[
            {"id":"company","header":"Company","sortable":true,"dataIndex":"company"},
            {"header":"Price","sortable":true,"dataIndex":"price"},
            {"header":"Change","sortable":true,"dataIndex":"change"},
            {"header":"Percent Updated","sortable":true,"dataIndex":"pctChange"},
            {"header":"Last Updated","sortable":true,"dataIndex":"lastChange"},
            {"header":"Industry","sortable":true,"dataIndex":"industry"}
        ]
    },
    "data":[
        {"company":"3m Co","price":71.72,"change":0.02,"pctChange":0.03,"lastChange":"09\/09\/1010","industry":"Manufacturing"},
        {"company":"Alcoa Inc","price":29.01,"change":0.42,"pctChange":1.47,"lastChange":"09\/09\/1010","industry":"Manufacturing"},
        {"company":"Altria Group Inc","price":83.81,"change":0.28,"pctChange":0.34,"lastChange":"09\/09\/1010","industry":"Manufacturing"},
        {"company":"American Express Company","price":52.55,"change":0.01,"pctChange":0.02,"lastChange":"09\/09\/1010","industry":"Finance"},
        {"company":"American International Group, Inc.","price":64.13,"change":0.31,"pctChange":0.49,"lastChange":"09\/09\/1010","industry":"Services"},
        {"company":"AT&T Inc.","price":31.61,"change":-0.48,"pctChange":-1.54,"lastChange":"09\/09\/1010","industry":"Services"},
        {"company":"Boeing Co.","price":75.43,"change":0.53,"pctChange":0.71,"lastChange":"09\/09\/1010","industry":"Manufacturing"},
        {"company":"Caterpillar Inc.","price":67.27,"change":0.92,"pctChange":1.39,"lastChange":"09\/09\/1010","industry":"Services"},
        {"company":"Citigroup, Inc.","price":49.37,"change":0.02,"pctChange":0.04,"lastChange":"09\/09\/1010","industry":"Finance"},
        {"company":"E.I. du Pont de Nemours and Company","price":40.48,"change":0.51,"pctChange":1.28,"lastChange":"09\/09\/1010","industry":"Manufacturing"},
        {"company":"Exxon Mobil Corp","price":68.1,"change":-0.43,"pctChange":-0.64,"lastChange":"09\/09\/1010","industry":"Manufacturing"}
    ]
}

I know that the data is loaded because I copied the above response right from Firebug.

I do want to load the columns dynamically because I am using this code to return many different sizes of data grids, some with upwards of 20 columns!

The thing that is really getting me is that it seems the metachange event is not even firing (hence no alerts). If I change the metachange event to a load event, it fires but

var g = Ext.getCmp('weekendGrid');


returns g as undefined.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33637827
From here : http://dev.sencha.com/deploy/dev/docs/output/Ext.data.JsonReader.html (http://dev.sencha.com/deploy/dev/docs/  on the left menu click on Ext>data>JsonReader)
Section : Automatic configuration using metaData

The following may help :

Note that reconfiguring a Store potentially invalidates objects which may refer to Fields or Records which no longer exist.
To use this facility you would create the JsonReader like this:



var myReader = new Ext.data.JsonReader();

Open in new window

0
 

Author Comment

by:strimp101
ID: 33638407
Got it!

Code

Ext.BLANK_IMAGE_URL = '/bin/js/ext-3.2.1/resources/images/default/s.gif';

Ext.ns('Weekend');

Weekend.Grid = Ext.extend(Ext.grid.GridPanel, {
      initComponent: function() {
            var config = {
                  columns:[],
                  id: 'weekendGrid',
                  store: weekendStore,
                  viewConfig: {forceFit: true},
                  loadMask: true,
            };

        Ext.apply(this, Ext.apply(this.initialConfig, config));

            Weekend.Grid.superclass.initComponent.apply(this, arguments);
            
            this.on({
                  activate: {scope:this, single:true, fn:function() {
                        this.store.load({params:{start:0, limit:10}});
                  }}
            });
      },
      id: 'weekendGrid',
});

Ext.reg('weekendGrid', Weekend.Grid);

var weekendStore = new Ext.data.GroupingStore({
      reader: new Ext.data.JsonReader(),
      url: '/bin/php/do/weekend.do.php',
      root: 'data',
      listeners: {
            metachange: function(store, meta) {
                  var g = Ext.getCmp('weekendGrid');
                  var cm = g.getColumnModel();
                  cm.setConfig(meta.colModel);
                  g.reconfigure(store, cm);
            }
      },
      sortInfo:{field: 'company', direction: "ASC"},
      groupField:'industry',
      storeId: 'weekendStore'
});
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question