5

I am using Sencha Architect 2. I am trying to generate a generic UI element with a text search and a table displaying the results. Generic means I want to use it for several different type of searches, e.g. for users, or roles or still something else.

So what I definitely like in this context about Sencha Architect 2 is that it always generates classes. Here is my generated class:

Ext.define('ktecapp.view.ObjSearchPanel', {
    extend: 'Ext.container.Container',
    alias: 'widget.objsearchpanel',

    height: 250,
    id: 'UserSearchPanel',
    itemId: 'UserSearchPanel',
    width: 438,
    layout: {
        columns: 3,
        type: 'table'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'textfield',
                    itemId: 'txtSearchText',
                    fieldLabel: 'Search Text',
                    colspan: 2
                },
                {
                    xtype: 'button',
                    id: 'searchObj',
                    itemId: 'searchObj',
                    text: 'Search',
                    colspan: 1
                },
                {
                    xtype: 'gridpanel',
                    height: 209,
                    itemId: 'resultGrid',
                    width: 430,
                    store: 'UserDisplayStore',
                    colspan: 3,
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            width: 60,
                            dataIndex: 'ID',
                            text: 'ID'
                        },
                        {
                            xtype: 'gridcolumn',
                            width: 186,
                            dataIndex: 'DISPLAYNAME',
                            text: 'Displayname'
                        },
                        {
                            xtype: 'gridcolumn',
                            width: 123,
                            dataIndex: 'JOBTITLE',
                            text: 'Job Title'
                        },
                        {
                            xtype: 'actioncolumn',
                            width: 35,
                            icon: 'icons/zoom.png',
                            items: [
                                {
                                    icon: 'icons/zoom.png',
                                    tooltip: 'Tooltip'
                                }
                            ]
                        }
                    ],
                    viewConfig: {

                    },
                    selModel: Ext.create('Ext.selection.CheckboxModel', {

                    })
                }
            ]
        });
        me.callParent(arguments);
    }
});

The problem I am having is that everything needs to be pretty customizable, dataIndexes of the columns, the store, ... So how can I get a constructor like function for the class ObjSearchPanel where I pass all that information? In the code above all this looks pretty much hardcoded...

Thanks in advance Kai

2 Answers 2

8

use config,

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-config

Ext.define('SmartPhone', {
     config: {   
         hasTouchScreen: false,
         operatingSystem: 'Other',
         price: 500
     },
     constructor: function(cfg) {
         this.initConfig(cfg);
     }
});

var iPhone = new SmartPhone({
     hasTouchScreen: true,
     operatingSystem: 'iOS'
});

iPhone.getPrice(); // 500;
iPhone.getOperatingSystem(); // 'iOS'
iPhone.getHasTouchScreen(); // true;
iPhone.hasTouchScreen(); // true                
1
  • Your answer is helpful, however, the way you propose cannot be used if I just want to provide incomplete information and not the entire config.
    – kaidentity
    Commented May 2, 2012 at 12:54
4

Actually (in ExtJS 4), when you pass a config object to the constructor, this config object is assigned to this.initialConfig variable and still available to other functions of the class. So you can use it in the initComponent.

You still can find code in ExtJS 3.3 like this Ext.apply(this, Ext.apply(this.initialConfig, config)); in the initComponent of classes. However, use it at your own risk because this is not in the document of ExtJS 4, only found it in the source code.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.