Question about combobox config in designer

[filippo.ferrari]

I've read only now this:

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

...
{
    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'
 }
...

[aconran]

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:

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.

[filippo.ferrari]

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

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

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:

...
{
         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'
}
...

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

[aconran]

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"

[filippo.ferrari]

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

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();

[filippo.ferrari]

Update!!!

This works correctly (with "this"):

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??

[aconran]

Possible to add listeners but not actions like collapse??

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

[filippo.ferrari]

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

[aeonmedia]

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

how u count depth ?

MainViewport.ui.js

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

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);
    },