Question about combobox config in designer

I've read only now this:

Code:

---

* This file was generated by Ext Designer version 1.0.0.
 * http://www.extjs.com/products/designer/
 *
 * This file will be generated the first time you export.
 *
 * You should implement event handling and custom methods in this
 * class.
 */

ChiamateViewport = Ext.extend(ChiamateViewportUi, {
    initComponent: function() {
        ChiamateViewport.superclass.initComponent.call(this);
    }
});

---

Could you tell me the way to do this?

In my element ChiamateViewport I've all my sub elements, one is my combobox and I want to "attach" listeners and onLoad actions...

This is the generated script in the .ui.js file:

Code:

---

...
{
    xtype: 'combo',
    fieldLabel: 'Chiamante',
    anchor: '100%',
    tabIndex: 1,
    allowBlank: false,
    loadingText: false,
    mode: 'remote',
    store: 'store-chiamanti',
    emptyText: 'Cerca Chiamante...',
    selectOnFocus: true,
    id: 'ricerca-chiamante'
 }
...

---

Quote:

---

Originally Posted by filippo.ferrari

Could you tell me the way to do this?

---

Because you have specified an id for both your store and combobox you can retrieve them globally.

Within the initComponent method you can get a reference to the store and combo like so:

Code:

---

var ds = Ext.StoreMgr.lookup('store-chiamanti');
var combo = Ext.getCmp('ricerca-chiamante');

---

It's worthwhile to note that component id's and storeId's are global to your entire application. Because this is within a Viewport component thats probably okay. However, if this was a component that you planned on reusing you would be better off using itemId's or ref configurations.

Perfect, I've find also your expalnation on this post: http://www.extjs.com/forum/showthread.php?t=96495

I've a little problem with this method:

My code in ui.js updatedwith ref

Code:

---

...
{
                xtype: 'panel',
                title: '',
                region: 'west',
                width: 100,
                split: true,
                border: true,
                collapseMode: 'standard',
                closable: false,
                frame: false,
                cmargins: '3 3 3 3',
                margins: '3 0 3 3',
                collapsible: true,
                itemId: 'item-box-funzioni-principali',
                id: 'box-funzioni-principali',
                ref: 'boxFunzioniprincipali'
            }
...

---

In my element.js file:

Code:

---

ChiamateViewport = Ext.extend(ChiamateViewportUi, {
    initComponent: function() {
        ChiamateViewport.superclass.initComponent.call(this);
       
        boxFunzioniprincipali.collapse();  //This using ref don't works
    }

});


Ext.onReady(function() {

    var task = new Ext.util.DelayedTask(function(){
        var boxfunzioni = Ext.getCmp('box-funzioni-principali');
        //boxfunzioni.collapse();      //This works correctly if de-commented       
    });

    task.delay(3000);
     
});

---

I'm able to manipulate elements (eg: a panel that with Designer you can't start collapsed) only if I use a little dalayed function,if not in firebug I've the message: "boxFunzioniprincipali is not defined"

Same issue if I try to add listeners to another element:

Code:

---

...
{
        xtype: 'combo',
        fieldLabel: 'Chiamante',
        anchor: '100%',
        tabIndex: 1,
        allowBlank: false,
        loadingText: false,
        mode: 'remote',
        store: 'store-chiamanti',
        emptyText: 'Cerca Chiamante...',
        selectOnFocus: true,
        itemId: '',
        id: 'chiamante',
        ref: '../../../../../../../editorRicercachiamante'
}
...

---

Code:

---

...
ChiamateViewport = Ext.extend(ChiamateViewportUi, {
    initComponent: function() {
        ChiamateViewport.superclass.initComponent.call(this);
       
        //boxFunzioniprincipali.collapse();
       
        editorRicercachiamante.on({
              'focus': function() {  //...
                    Ext.getCmp('id_chiamante').reset();
                    Ext.getCmp('id_cdc').reset();
                    Ext.getCmp('cdc').reset();
                    Ext.getCmp('id_sede').reset();
                    Ext.getCmp('sede').reset();
              },
              'click': function() {  //...
                    Ext.getCmp('id_chiamante').reset();
                    Ext.getCmp('id_cdc').reset();
                    Ext.getCmp('cdc').reset();
                    Ext.getCmp('id_sede').reset();
                    Ext.getCmp('sede').reset();
              },
              'blur': function() {
                    this.collapse();
              },
              'select': function() {
                    alert('ok');
              }
        });
    }

});
...

---

In fireBug: editorRicercachiamante is not defined... :-/

Quote:

---

Originally Posted by filippo.ferrari

In my element.js file:

[code]
ChiamateViewport = Ext.extend(ChiamateViewportUi, {
initComponent: function() {
ChiamateViewport.superclass.initComponent.call(this);

boxFunzioniprincipali.collapse(); //This using ref don't works
}

});

---

You are missing a "this." in front of "boxFunzioniprincipali"

I miss it but I've tried with and without, now my code is:

Code:

---


ChiamateViewport = Ext.extend(ChiamateViewportUi, {
    initComponent: function() {
        ChiamateViewport.superclass.initComponent.call(this);
       
        this.boxFunzioniprincipali.collapse();
    }

});

---

But still dosen't works .. now Firebug says:

this.el is undefined
[IMG]chrome://firebug/content/blank.gif[/IMG] if(this.collapsed || this.el.h...ollapse', this, animate) === false){ ext-all-debug.js (riga 24431)

and



boxFunzioniprincipali is not defined
[IMG]chrome://firebug/content/blank.gif[/IMG]boxFunzioniprincipali.collapse();

Update!!!

This works correctly (with "this"):

Code:

---

ChiamateViewport = Ext.extend(ChiamateViewportUi, {
    initComponent: function() {
        ChiamateViewport.superclass.initComponent.call(this);
       
        //this.boxFunzioniprincipali.collapse();
       
        this.editorRicercachiamante.on({
              'focus': function() {
                    Ext.getCmp('id_chiamante').reset();
                    Ext.getCmp('id_cdc').reset();
                    Ext.getCmp('cdc').reset();
                    Ext.getCmp('id_sede').reset();
                    Ext.getCmp('sede').reset();
              },
              'click': function() { 
                    Ext.getCmp('id_chiamante').reset();
                    Ext.getCmp('id_cdc').reset();
                    Ext.getCmp('cdc').reset();
                    Ext.getCmp('id_sede').reset();
                    Ext.getCmp('sede').reset();
              }
        });

    }

});

---

Possible to add listeners but not actions like collapse??

Quote:

---

Originally Posted by filippo.ferrari

Possible to add listeners but not actions like collapse??

---

Can you explain what you're looking for in more depth?

I'm experimenting interaction with an app layout generated from Designer.

Under your indication I want to do that in .js file that Designer not overwrite in the class that extend my component

Tipically in my apps I've to add actions, listeners etc. (Now I can do this)

In order to manipulate elements I've a panel collapsible but I've found missing the "collapsed:true/false" property for panels in Designer, I try to simply collapse a panel, after the design is rendered.

tks for your interest

Quote:

---

Originally Posted by filippo.ferrari

Code:

---

        ref: '../../../../../../../editorRicercachiamante'

---

---

how u count depth ?

MainViewport.ui.js

Code:

---

LcmsMainViewportUi = Ext
    .extend(
        Ext.Viewport,
        {
            layout : 'border',
            initComponent : function() {             
                this.items = [
                {
                    xtype : 'panel',
                    id: 'app-menu',
                    title : 'LCMS - Czarodziej Lekcji (nazwa lekcji) .a4',
                    region : 'north',
                    border : false,
                    split : true,
                    layout : 'fit',
                    tbar : {
                        xtype : 'toolbar',
                        id: 'toolbar',
                        items : [
                        {
                            xtype : 'buttongroup',
                            title : 'Strona',
                            columns : 8,
                            items : [
                            {
                                xtype : 'button',
                                //autoRef: 'btOpen',
                                ref: '../../../../../btOpen',

---

MainViewport.js

Code:

---

LcmsMainViewport = Ext.extend(LcmsMainViewportUi, {
    /**
    * @var
    */
    version : 1,
    sites : 1,
    lesson : 1,
    initComponent : function() {
        LcmsMainViewport.superclass.initComponent.call(this);
        //Ext.app.REMOTING_API.enableBuffer = 100;
        //Ext.Direct.addProvider(Ext.app.REMOTING_API);
        Ext.QuickTips.init();
        this.btOpen.on('click',this.windowSiteOpen);
    },

---