Results 1 to 6 of 6

Thread: GridColumn Model is null?

  1. #1

    Default GridColumn Model is null?

    Folks,
    I am developing a component (extending the gridpanel). My server side code is correctly called into and returns appropriate data. I have inspected the data and I am trying to debug this. Once I am over this hump I can have a smooth ride for the time being at least. The code breaks into line# 32660 of ext-all-debug and throws a runtime error where the code is attempting to get the column count on the cm. I would appreciate it if you could tell me what I am doing wrong. Prob something simple which i just cannot see. Here is the code

    Code:
        Ext.ns('PreRegister');
    Ext.BLANK_IMAGE_URL = '/ExtJS/resources/images/default/s.gif';
    PreRegister.Grid = Ext.extend(Ext.grid.GridPanel, {
        initComponent: function() {
            var ds;
            mask = new Ext.LoadMask(Ext.getBody(), {
                msg: 'Loading Pre-Registered Customers'
            });
            mask.show();
            return Ext.Ajax.request({
                url: '/Calendar/previewAttendanceInfo.ashx',
                params: {
                    "eventSessionId": document.getElementById('ctl00$contentHolder$hfSessionId').value,
                    "registeredOnly": '1'
                },
                success: function(response, options) {
                    mask.hide();
                    if (response != '') {
                        ds = JSON.parse(response.responseText);
                    }
                    else {
                        var title = "Pre-Registered Attendees Load";
                        var msg = "There were no Pre-Registered attendees found for this session";
                        Ext.MessageBox.alert(title, msg);
                        return;
                    }
                },
                failure: function(response, options) {
                    mask.hide();
                    var title = "Pre-Registered Attendees Load";
                    var msg = "Failed to get data from the server. Additional information: ";
                    Ext.MessageBox.alert(title, msg + response.toString());
                }
            }); // AJAX REQUEST
            var config = {
                store: new Ext.data.Store({
                    id: 'preRegStore',
                    data: ds,
                    reader: new Ext.data.JsonReader({
                        root: 'results',
                        totalProperty: 'total'
                    },
                    new Ext.data.Record.create([{
                        name: 'ContactId'
                    },
                    {
                        name: 'FirstName'
                    },
                    {
                        name: 'LastName'
                    },
                    {
                        name: 'Status'
                    },
                    {
                        name: 'IsUnder18'
                    },
                    {
                        name: 'attendedAnother'
                    },
                    {
                        name: 'EventRegsId'
                    }]) // EndRecord
                    ) // EndReader
                    ,
                    columns: [{
                        id: 'ContactId',
                        header: "ContactId",
                        width: 100,
                        sortable: true,
                        dataIndex: 'ContactId'
                    },
                    {
                        header: "Last Name",
                        width: 100,
                        sortable: true,
                        dataIndex: 'LastName'
                    },
                    {
                        header: "First  Name",
                        width: 100,
                        sortable: true,
                        dataIndex: 'FirstName'
                    },
                    {
                        header: "Status",
                        width: 100,
                        sortable: true,
                        dataIndex: 'Status'
                    },
                    {
                        header: "IsUnder18",
                        width: 100,
                        sortable: true,
                        dataIndex: 'IsUnder18'
                    },
                    {
                        header: "attendedAnother",
                        width: 100,
                        sortable: true,
                        dataIndex: 'attendedAnother'
                    },
                    {
                        header: "Event Regs Id",
                        width: 100,
                        sortable: true,
                        dataIndex: 'EventRegsId'
                    }] // columns end
                }) // EndStore
                ,
                selModel: new Ext.grid.RowSelectionModel({
                    singleSelect: true
                }),
                cm: new Ext.grid.ColumnModel([{
                    header: 'ContactId',
                    dataIndex: 'ContactId',
                    width: 100,
                    hidden: true
                },
                {
                    header: 'First Name',
                    dataIndex: 'FirstName',
                    sortable: true,
                    width: 100
                },
                {
                    header: 'Last Name',
                    dataIndex: 'LastName',
                    sortable: true,
                    width: 100
                },
                {
                    header: 'Status',
                    dataIndex: 'Status',
                    width: 100,
                    hidden: true
                },
                {
                    header: 'Under17',
                    dataIndex: 'IsUnder18',
                    width: 100,
                    hidden: true
                },
                {
                    header: 'Repeat Attendance',
                    dataIndex: 'attendedAnother',
                    width: 100,
                    hidden: true
                },
                {
                    header: 'Event Regs Id',
                    dataIndex: 'EventRegsId',
                    width: 150,
                    hidden: true
                }]) // EndColumnModel
            } // config
            Ext.apply(this, Ext.apply(this.initialConfig, config));
            PreRegister.Grid.superclass.initComponent.apply(this, arguments);
        } // function
    });
    Ext.reg('preRegGrid', PreRegister.Grid);

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    481

    Default

    Everything is wrong with your code. This is not how you're supposed to use grids. Why are you returning the result of AJAX call from the initComponent method? Why are you making this AJAX call at all? You should use Store object with HttpProxy. Or JsonStore if you operate with JSON data.

  3. #3

    Default Because

    The reason I am using Ajax is that I need the call to be asynchronous. Pardon my code, or lack of a better understanding of ExtJs. I am a newbie to the world of ExtJS (my fourth day). BTW, how can I use the JsonStore asynhcronously?

    Thanks!

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    481

    Default

    All remote calls by Ext JS library are done asynchronously. JsonStore knows how to automatically make asynchronous calls and retrieve data by a provided url. Anyways, it sounds like you need to understand the basics. So before jumping into writing actual code I encourage you to review Samples & Demos, API Docs and Tutorials. Also here are some links that give you a good start:

    http://extjs.com/learn/Ext_FAQ_Grid
    http://extjs.com/learn/Tutorials#Grids
    http://extjs.com/deploy/dev/docs/?cl...grid.GridPanel
    http://extjs.com/deploy/dev/docs/?cl...data.JsonStore

    I could've posted a real example, but for your benefit it would be better if I won't. Good luck!

  5. #5

    Default Thanks

    While not new to the world of programming I am new to the ExtJS world. That said, I have a deadline looming over my head and I am supposed to learn and deliver in a very short time. I realize some of my posts are very rookie-ish but in an effort to get things done as quickly as demanded I do not have any option but to sound naive. But hey, we have all been there haven't we?

    Thanks!

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    481

    Default

    Well, I don't want to offend you, however by looking at your code where you return the result of AJAX call from initComponent method and have some more code in that method after that AJAX call hoping it'll run, I got impression that you lack some basic programming skills. I really hope that I am wrong. But anyways, here's some code for ya. It's a grid, that displays a list of authors from PUBS database. I'm using ASP.NET MVC for backend, but you can change the url config attribute of JsonStore to point to an HttpHandler, that returns JSON data. Hope it helps.

    PHP Code:
    Ext.ns('Example');

    Example.AuthorsGridPanel Ext.extend(Ext.grid.GridPanel, {
        
    // default config, can be overwritten when instantiating the class
        
    stripeRowstrue,
        
    borderfalse,
        
    showPhonetrue// custom config attribute used to show/hide Phone column

        
    initComponent: function() {
            var 
    ds = new Ext.data.JsonStore({
                
    url'/Authors/GetAll',
                
    fields: ['au_id''au_lname''au_fname''phone''address''city''state''zip', {name'contract'type'bool'}]
            });
            
            
    // hard coded config, it cannot be changed when instantiating the class
            
    var config = {
                
    storeds,
                
    columns: [
                    {
    header'First Name'dataIndex'au_fname'width100},
                    {
    header'Last Name'dataIndex'au_lname'width100},
                    {
    header'Phone'dataIndex'phone'width100hidden: !this.showPhone},
                    {
    id'address'header'Address'dataIndex'address'},
                    {
    header'City'dataIndex'city'width100},
                    {
    header'State'dataIndex'state'width50},
                    {
    header'ZIP'dataIndex'zip'width50}
                ],
                
    autoExpandColumn'address'
            
    }; // eo config object

            // apply config
            
    Ext.apply(thisconfig);

            
    // call parent
            
    Example.AuthorsGridPanel.superclass.initComponent.apply(thisarguments);
        }, 
    // eo function initComponent

        // protected
        
    onRender: function() {
            
    Example.AuthorsGridPanel.superclass.onRender.apply(thisarguments);
            
    this.store.load();
        }
    }); 
    // eo extend

    // register xtype
    Ext.reg('authorsgrid'Example.AuthorsGridPanel); 

Posting Permissions

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