1. #11
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      0  

    Default


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

  2. #12
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,207
    Vote Rating
    120
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by filippo.ferrari View Post
    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #13
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      0  

    Default


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

  4. #14
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,207
    Vote Rating
    120
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by filippo.ferrari View Post
    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"
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #15
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      0  

    Default


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

  6. #16
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      0  

    Default


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

  7. #17
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,207
    Vote Rating
    120
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by filippo.ferrari View Post
    Possible to add listeners but not actions like collapse??
    Can you explain what you're looking for in more depth?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  8. #18
    Sencha User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    126
    Vote Rating
    1
    filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute filippo.ferrari has a reputation beyond repute

      0  

    Default


    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

  9. #19
    Ext User
    Join Date
    Nov 2007
    Posts
    7
    Vote Rating
    0
    aeonmedia is on a distinguished road

      0  

    Default


    Quote Originally Posted by filippo.ferrari View Post
    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);
        },
    Last edited by aeonmedia; 27 Apr 2010 at 2:31 AM. Reason: more code