1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    5
    Vote Rating
    0
    Answers
    1
    rancid is on a distinguished road

      0  

    Default Answered: How to add a container dynamically and working? Maybe a bug?

    Answered: How to add a container dynamically and working? Maybe a bug?


    It's a simple question, i think, but I don't be able to add an object dynamicaly.
    Here the simplified working code to add statically:

    Code:
    Ext.application({
        name: 'Test',
        launch: function() {
            var applicationPanel = Ext.create('Ext.Panel', {
                fullscreen: true,
                layout: {
                    type: 'fit',
                },
                items: [{
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        align: 'middle',
                    },
                    defaults: {
                        xtype: 'button',
                        flex: 1,
                        margin: 10,
                    },
                    items: [
                        {text: 'normal'},
                        {ui: 'round', text: 'round'},
                        {ui: 'small', text: 'small'},
                    ],
                }],
            });
        }
    });


    This code works, but I need to load items dynamically, for example moving out in a create block:

    Code:
    var buttonsPanel = Ext.create('Ext.Panel',{
        layout: {
            type: 'hbox',
            align: 'middle',
        },
        defaults: {
            xtype: 'button',
            flex: 1,
            margin: 10,
        },
        items: [
            {text: 'normal'},
            {ui: 'round', text: 'round'},
            {ui: 'small', text: 'small'},
        ],
    });
    Ext.application({
        name: 'Test',
        launch: function() {
            var applicationPanel = Ext.create('Ext.Panel', {
                fullscreen: true,
                layout: {
                    type: 'fit',
                },
            });
            applicationPanel.add([buttonsPanel]);
        }
    });

    ... or in a define block:

    Code:
    Ext.define('Test.Panel', {
        extend: 'Ext.Panel',
        config: {
            layout: {
                type: 'hbox',
                align: 'middle',
            },
            defaults: {
                xtype: 'button',
                flex: 1,
                margin: 10,
            },
            items: [
                {text: 'normal'},
                {ui: 'round', text: 'round'},
                {ui: 'small', text: 'small'},
            ],
        }
    });
    var buttonsPanel = Ext.create('Test.Panel');
    Ext.application({
        name: 'Test',
        launch: function() {
            var applicationPanel = Ext.create('Ext.Panel', {
                fullscreen: true,
                layout: {
                    type: 'fit',
                },
            });
            applicationPanel.add([buttonsPanel]);
        }
    });
    

    Every these two ways seems to works, because they display the buttons, but incredibly the buttons don't works and they are uncliccable!?
    It's seems a bug, but it't first time I try with Sencha Touch 2, so maybe I'm in wrong somewhere... where? Thanks all!

  2. Don't use Ext.create outside of Ext.application (or Ext.setup):

    Code:
    Ext.define('Test.Panel', {
        extend: 'Ext.Panel',
        config: {
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            defaults: {
                xtype: 'button',
                flex: 1,
                margin: 10
            },
            items: [
                {text: 'normal'},
                {ui: 'round', text: 'round'},
                {ui: 'small', text: 'small'}
            ]
        }
    });
    
    Ext.application({
        name: 'Test',
        launch: function() {
            var applicationPanel = Ext.create('Ext.Panel', {
                fullscreen: true,
                layout: {
                    type: 'fit'
                }
            });
    
            var buttonsPanel = Ext.create('Test.Panel');
            applicationPanel.add(buttonsPanel);
        }
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    Answers
    3565
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Don't use Ext.create outside of Ext.application (or Ext.setup):

    Code:
    Ext.define('Test.Panel', {
        extend: 'Ext.Panel',
        config: {
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            defaults: {
                xtype: 'button',
                flex: 1,
                margin: 10
            },
            items: [
                {text: 'normal'},
                {ui: 'round', text: 'round'},
                {ui: 'small', text: 'small'}
            ]
        }
    });
    
    Ext.application({
        name: 'Test',
        launch: function() {
            var applicationPanel = Ext.create('Ext.Panel', {
                fullscreen: true,
                layout: {
                    type: 'fit'
                }
            });
    
            var buttonsPanel = Ext.create('Test.Panel');
            applicationPanel.add(buttonsPanel);
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread