Sublcass configs?

[froamer]

Since there are many great features to come like currently missing config options for components, how can I add to the component configs generated by Ext Designer from within the .js file (knowing I must not touch .ui.js)?

I can see how I can attach event handlers and custom methods within the subclass, but how would I for example set the selModel of a grid in my subclass given there is no method in GridPanel to do this?

[jarrednicholls]

You can add directly to the prototype of the class, or if it's a more dynamic configuration setting you can set it up directly on the instance within initComponent before the superclass' initComponent is called.

MyGrid = Ext.extend(MyGridUi, {
    // directly on prototype
    enableColumnMove: false,

    initComponent: function(){
        // dynamic configs set before superclass initComponent
        this.selModel = new Ext.grid.CellSelectionModel({...});

        MyGrid.superclass.initComponent.call(this);
    }
});

[froamer]

That great!

Thanks Jarred, you're a star.

[smcguire36]

This is a great tip! However, I have a more complicated situation that I am not sure how to handle.

I have an Ext.Window that contains an Ext.FormPanel that contains a GridPanel. I need to set the selection model of the GridPanel. My subclass is not of the GridPanel directly, but of the Ext.Window that is two layers above the grid panel. Here is my subclass definition:

ContactEditDialogUi = Ext.extend(Ext.Window, {
    title: 'Add/Edit Contact Entry',
    width: 447,
    height: 337,
    layout: 'form',
    border: true,
    modal: true,
    resizable: false,
    autoHeight: true,
    initComponent: function() {
        this.fbar = {
            xtype: 'toolbar',
            itemId: 'BottomToolbar',
            items: [
                {
                    xtype: 'button',
                    text: 'Ok',
                    itemId: 'btnOk'
                },
                {
                    xtype: 'button',
                    text: 'Cancel',
                    itemId: 'btnCancel'
                }
            ]
        };
        this.items = [
            {
                xtype: 'form',
                labelWidth: 125,
                labelAlign: 'left',
                layout: 'form',
                itemId: 'ContactEditForm',
                padding: 10,
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Contact Name',
                        anchor: '100%',
                        itemId: 'ContactName',
                        name: 'contactname'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Address (if different)',
                        anchor: '100%',
                        itemId: 'ContactAddress',
                        name: 'contactaddress'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Phone Number',
                        anchor: '100%',
                        itemId: 'ContactPhone',
                        name: 'contactphone'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Email Address',
                        anchor: '100%',
                        itemId: 'ContactEmail',
                        name: 'contactemail'
                    },
                    {
                        xtype: 'editorgrid',
                        title: 'Associated Properties',
                        itemId: 'PropertyGrid',
                        height: 145,
                        enableColumnHide: false,
                        enableColumnMove: false,
                        stripeRows: true,
                        columns: [
                            {
                                xtype: 'gridcolumn',
                                header: 'PropertyId',
                                sortable: true,
                                resizable: true,
                                width: 100,
                                dataIndex: 'propertyid',
                                hidden: true
                            },
                            {
                                xtype: 'gridcolumn',
                                header: 'Property Address',
                                sortable: true,
                                resizable: true,
                                width: 225,
                                dataIndex: 'propertyaddress',
                                align: 'left'
                            },
                            {
                                xtype: 'gridcolumn',
                                header: 'Relationship to Property',
                                sortable: true,
                                resizable: true,
                                width: 140,
                                dataIndex: 'relationship',
                                align: 'center'
                            }
                        ],
                        tbar: {
                            xtype: 'toolbar',
                            items: [
                                {
                                    xtype: 'button',
                                    text: 'Add Property',
                                    itemId: 'btnAddProperty'
                                }
                            ]
                        }
                    }
                ]
            }
        ];
        ContactEditDialogUi.superclass.initComponent.call(this);
    }
});

How would I configure the selection model of the GridPanel in this case?

--Stewart

[jarrednicholls]

Yes this situation requires a little more kludgey of a solution...the "items" collection is a straight array before Ext.Container.initComponent is called, and is turned into an Ext.util.MixedCollection after Ext.Container.initComponent gets through with it. So before the superclass' initComponent is called, you can access the items collection as a simple array:

this.items[0][4].selModel = new Ext.grid.CheckboxSelectionModel({...});
...
ContactEditDialog.superclass.initComponent.call(this);

If your components switch places often, a recursive helper function to go through the items array and find the one with a particular "itemId" is good.

However, the above is just a general idea for configurations that need to be present before initComponent is called. Today is your lucky day, because the selection model doesn't matter until Render time...sometimes it helps to scan the Ext JS source code :-) Thus, you can access the grid via its itemId or ref and assign the selModel after the superclass' initComponent is called.

itemId:

ContactEditDialog.superclass.initComponent.call(this);
...
this.findById('PropertyGrid').selModel = new Ext.grid.CheckboxSelectionModel({...});

If you assign an autoRef to your grid in the Designer, i.e., "propertyGrid", then a "ref" will be automatically generated to put the grid reference on the top level component - in this case, that's your Window. So a ref of "../propertyGrid" would be generated and applied to the grid configuration in your ContactEditDialogUi class.

ContactEditDialog.superclass.initComponent.call(this);
...
this.propertyGrid.selModel = new Ext.grid.CheckboxSelectionModel({...});

Hope that helps! I think I'll be adding in selection model configuration in the near future so that you won't need to assign it in this fashion going forward. But the above info is good to know for general Ext JS and OO coding regardless.

[smcguire36]

Thanks, Jarred! That is EXACTLY what I am looking for! Thanks for the general configuration information as well.

--Stewart

[smcguire36]

Another question:

If I have a JsonStore and I don't want to hardcode the URL into it, how do I add the url to the configuration during the initComponent()? The JsonStore class doesn't seem to have a setUrl() method nor does it seem to expose the url attribute? At least it is not documented.

--Stewart

[jarrednicholls]

Are you saying you want to assign the URL to the JsonStore in your Dialog's initComponent function? Why there and not either directly on the store or as a part of your JsonStore sub-class' constructor?

When a Store sees "url" as a config option, it automatically creates and uses an Ext.data.HttpProxy under-the-hood. So if you want to set the url of a Store after it's been constructed, you actually need to set its proxy to a brand new HttpProxy:

myStore.proxy = new Ext.data.HttpProxy({url: 'http://...'});

If you have configured a URL or an HttpProxy for your Store's construction, and you later need to change your URL:

myStore.proxy.setUrl('http://...', true);

Note: your store won't be able to autoLoad or be loaded until your proxy is set, for obvious reasons :-)

[smcguire36]

My application that I am working with is a very large ColdFusion/Fusebox 4 application that is hosted. The actual url to the json action pages is dynamically built. They are not static. For example, http://www.mydomain.com/project1/ind...e.jsonLoadData where the project1 part of the url can be different for different projects (the framework recognizes the virtual name and sets a session variable to identify the project automatically). The project name is in actuality a virtual folder created in IIS pointing to a single set of source code for all projects. So I cannot hardcode the url into the .js files. I am creating global JavaScript variables in my .CFM page using ColdFusion to assemble the correct string. Then I reference the global variables in my .js files.

I didn't know about the HttpProxy part of it, so I think that is all I needed to know. BTW, if I have a store that should be autoLoad, will it automatically load once I provide the httpproxy object to it or do I need to kick it off somehow?

--Stewart

[jarrednicholls]

You'll need to kick it off. If autoLoad is specified and there isn't a proxy (or inline data) supplied then it'll break basically. You'll just need to call load() yourself, that's all.