Results 1 to 4 of 4

Thread: New to ExtJs, 1 issue and curious about embedding events

  1. #1

    Default New to ExtJs, 1 issue and curious about embedding events

    1) I'm interested in using the grouptabpanel from the Example grouptabs. I can add items to the "tree" of the Tabs on the left screen by adding them inline to the item(s) list like the example. I can also create them as external variables, then add those variables to the inline items list(s). But if I create them as GroupTab(s) they have issues.

    Code:
    var temp = {
        title: 'Subscriptions',
        iconCls: 'x-icon-subscriptions',
        tabTip: 'Subscriptions tabtip',
        style: 'padding: 10px;',
        layout: 'fit',
        items: [{
            xtype: 'tabpanel',
            activeTab: 1,
            items: [{
                title: 'Nested Tabs',
                html: Ext.example.shortBogusMarkup
            }]
        }]
    }
    However, the defaultType is 'grouptab' in GroupTabPanel.js . So it seems like I can add items to the collection as long as I don't create them as their default type? The reason I was doing this was so I could register/capture the 'activated' event and do something. After playing with this for a bit I figured out that I can add TabPanel(s), and register/receive the 'activate' event fine, but the TabPanel has rendering issues(css). I can't do this for the GroupTab. I can register(which is expected), but the events never fire.

    2) I didn't notice anywhere if I can register for event(s) inline while I'm creating items?

    Code:
    {
        temp: 'val',
        click: function() { alert; }
    }
    Is there any means to do something like this without having to create a var for each item I add to my item(s) collection, so I can cleanly register for events for these items?

    Thanks in advance

  2. #2
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501

    Default

    Im not entirely sure im understanding your question, but I think what your looking for is the listeners config.

    For example:
    Code:
    var temp = {
        title: 'Subscriptions',
        iconCls: 'x-icon-subscriptions',
        tabTip: 'Subscriptions tabtip',
        style: 'padding: 10px;',
        layout: 'fit',
        items: [{
            xtype: 'tabpanel',
            activeTab: 1,
            items: [{
                title: 'Nested Tabs',
                html: Ext.example.shortBogusMarkup,
                listeners: {
                    activate: function(p){ // do something }
                }
            }]
        }]
    }

  3. #3
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default

    Not sure about #1, but you can create inline listeners like this:

    Code:
    items: [
        {
            //other config stuff
            listeners: {
                render: {
                    fn: function(obj) {
                    },
                    scope: this
                }
            }
        }
    ]
    The events for each object and the params that are passed into the listeners are defined in the docs.

  4. #4

    Default More detail - UPDATE

    Here is the exception I'm getting when I construct a Ext.ux.GroupPanel

    Code:
    //this.ownerCt.getGrou...El is not a function 43 Examples/ux/GroupTab.js
     this.groupEl = this.ownerCt.getGroupEl(this);
    After creating a Ext.ux.GroupTab
    Code:
        
        var tnStartPage = new Ext.ux.GroupTab({
            xtype: 'portal',
            title: 'Start Page',
            tabTip: 'Start Page tabtip',
            items: {
                title: 'Example',
                html : 'Example Body'
            }
        });
    
        tnStartPage.on('activate', function() { alert('test'); });
    and adding it to my GrouptabPanel

    Code:
        //
        var gtpFileEditor = {
            id: 'grouppanelitems-panel',
            xtype: 'grouptabpanel',
            tabWidth: 145,
            activeGroup: 0,
            items: {                
                items: { tnStartPage }
            }
        }
    If I create the StartPage without constructing it from the GroupPanel Type everything works fine, but I can't register for the 'activate' event cleanly.

    Code:
        var tnStartPage = {
            xtype: 'portal',
            title: 'Start Page',
            tabTip: 'Start Page tabtip',
            items: {
                title: 'Example',
                html : 'Example Body'
            }
        }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •