"items" question

[kostik83]

Hi, I would like to accomplish a trivial task but it doesn't seem to work. I have main JS file which builds top navigation bar and main layout panel, then I generate new items with PHP and place them in the panel. What I am having problem with is rendering those items on the screen.

here is the main.js file which is included at the top:

Ext.setup({
    glossOnIcon: false,
    onReady: function() {
       this.refreshButton = new Ext.Button({
                    hidden: false,
                    text: 'R',
                    ui: 'action',
                    handler: function () {
                        this.redirect(C.BASE);
                    },
                    scope: this
            });

            this.logoutButton = new Ext.Button({
                    text: 'Logout',
                    ui: 'action',
                    hidden: false,
                    handler: this.onLogoutButtonTap,
                    scope: this
                });

            this.backButton = new Ext.Button({
                    hidden: true,
                    text: 'Back',
                    ui: 'back',
                    handler: this.onBackButtonTap,
                    scope: this
            });

            this.menuButton = new Ext.Button({
                    hidden: true,
                    text: 'Menu',
                    ui: 'normal',
                    handler: this.onMenuButtonTap,
                    scope: this
            });

            this.spacer = {
                xtype:'spacer',
                flex:1
            };

            this.navigationButtons = [this.backButton, this.spacer, this.menuButton, this.spacer, this.logoutButton];

            if (C.DEBUG) {
                this.navigationButtons.unshift(this.spacer);
                this.navigationButtons.unshift(this.refreshButton);
            }

            this.navigationBar = new Ext.Toolbar({
                    ui: 'dark',
                    dock: 'top',
                    items: this.navigationButtons
            });


            new Ext.Panel({
                id: 'layout',
                fullscreen: true,
                layout: {
                    type: 'fit'
                },
                defaults: {
                    flex: 1
                },
                dockedItems: this.navigationBar,
                items: {}
            });
    }
});

Now, when i build the page I place the following code:

<script type='text/javascript'>

Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
          id: 'my-form',
          scroll: 'vertical',
          items: [{xtype: "field",inputType: "hidden",name: "submit",id: "submit",value: "1"}
    ,{xtype : "fieldset", items : [{
    text: 'Button 1',
    ui: 'action',
    xtype: 'button',
    handler: function(obj, evt) {
          //something
    }
    ,{
    text: 'Button 2',
    ui: 'action',
    xtype: 'button',
    handler: function(obj, evt) {
          //something
    }
]}]});


var panel = new Ext.Panel({
    layout: {
        type: 'fit'
    },
    defaults: {
        flex: 1
    },
    items: form,
});

var layout = Ext.getCmp('layout');
layout.items = panel;
layout.doLayout();

</script>

Unfortunately this does not work, it only renders dockedItems. What do i need to call (i guess instead of layout.doLayout()) so the items in layout are displayed.

Thanks,

Kostik

[TommyMaintz]

Ok, so looking at your code I think there were a couple things that need to change. First of all, if you pass an empty object to items, you get this ghost item. Doesnt matter that much, but better to take it out. Second, after you have initialized (and rendered) a panel, you can not add items to it by setting the .items property. You have to call .add(). Also, you were overnesting. Really in this case the FormPanel could be the fullscreen item containing the navigationBar. Anyway, even with this overnesting, it should have worked, but it didn't.

After some investigation I found a couple of bugs in FitLayout. I have fixed them and they will be part of the next release. This is a temporary fix:

Ext.override(Ext.layout.FitLayout, {
    onLayout : function(owner, target) {
        if (!this.activeItem) {
            this.activeItem = this.parseActiveItem(owner.activeItem);
        }
        
        Ext.layout.FitLayout.superclass.onLayout.call(this, owner, target);

        if (this.activeItem) {
            this.setItemBox(this.activeItem, this.getTargetBox());         
        }
    }   
});

Then the following code creates your layout.

Ext.setup({
    glossOnIcon: false,
    onReady: function() {
        this.refreshButton = new Ext.Button({
            hidden: false,
            text: 'R',
            ui: 'action',
            handler: function() {
                this.redirect(C.BASE);
            },
            scope: this
        });

        this.logoutButton = new Ext.Button({
            text: 'Logout',
            ui: 'action',
            hidden: false,
            handler: this.onLogoutButtonTap,
            scope: this
        });

        this.backButton = new Ext.Button({
            hidden: true,
            text: 'Back',
            ui: 'back',
            handler: this.onBackButtonTap,
            scope: this
        });

        this.menuButton = new Ext.Button({
            hidden: true,
            text: 'Menu',
            ui: 'normal',
            handler: this.onMenuButtonTap,
            scope: this
        });

        this.spacer = {
            xtype: 'spacer',
            flex: 1
        };

        this.navigationButtons = [this.backButton, this.spacer, this.menuButton, this.spacer, this.logoutButton];

        this.navigationBar = new Ext.Toolbar({
            ui: 'dark',
            dock: 'top',
            items: this.navigationButtons
        });

        new Ext.Panel({
            id: 'layout',
            fullscreen: true,
            layout: {
                type: 'fit'
            },
            dockedItems: this.navigationBar
        });
    }
});

Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
        id: 'my-form',
        scroll: 'vertical',
        items: [{
            xtype: "field",
            inputType: "hidden",
            name: "submit",
            id: "submit",
            value: "1"
        }, {
            xtype: "fieldset",
            items: [{
                text: 'Button 1',
                ui: 'action',
                xtype: 'button',
                handler: function(obj, evt) {
                    //something
                }
            }, {
                text: 'Button 2',
                ui: 'action',
                xtype: 'button',
                handler: function(obj, evt) {
                    //something
                }
            }]
        }]
    });

    var layout = Ext.getCmp('layout');
    layout.add(form);
    layout.doLayout();
});

[kostik83]

Thank you Tommy. You are great help! I was looking for add method but naturally was looking for setItems();