1. #1
    Sencha Premium Member froamer's Avatar
    Join Date
    Sep 2007
    Location
    London, UK
    Posts
    103
    Vote Rating
    2
    froamer is on a distinguished road

      0  

    Default Sublcass configs?

    Sublcass configs?


    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?

  2. #2
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    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.

    Code:
    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);
        }
    });

  3. #3
    Sencha Premium Member froamer's Avatar
    Join Date
    Sep 2007
    Location
    London, UK
    Posts
    103
    Vote Rating
    2
    froamer is on a distinguished road

      0  

    Default


    That great!

    Thanks Jarred, you're a star.

  4. #4
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    99
    Vote Rating
    0
    smcguire36 is on a distinguished road

      0  

    Default


    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:

    Code:
    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

  5. #5
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    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:

    Code:
    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:
    Code:
    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.
    Code:
    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.

  6. #6
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    99
    Vote Rating
    0
    smcguire36 is on a distinguished road

      0  

    Default


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

    --Stewart

  7. #7
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    99
    Vote Rating
    0
    smcguire36 is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    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:

    Code:
    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:
    Code:
    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 :-)

  9. #9
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    99
    Vote Rating
    0
    smcguire36 is on a distinguished road

      0  

    Default


    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

  10. #10
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    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.

Similar Threads

  1. initialize component with configs
    By wiulma in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 14 May 2010, 1:19 AM
  2. TableLayout configs
    By taiti in forum Ext 2.x: Help & Discussion
    Replies: 18
    Last Post: 21 May 2008, 6:28 AM
  3. Why no access to parent configs?!
    By steve.neill in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 25 Sep 2007, 12:26 PM

Thread Participants: 3

Tags for this Thread