1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    Toronto
    Posts
    33
    Vote Rating
    0
    kostik83 is on a distinguished road

      0  

    Default "items" question

    "items" question


    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:

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

    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

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    7
    TommyMaintz will become famous soon enough

      0  

    Default


    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:

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

    Code:
    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
            });
        }
    });
    Code:
    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();
    });

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Location
    Toronto
    Posts
    33
    Vote Rating
    0
    kostik83 is on a distinguished road

      0  

    Default


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

Similar Threads

  1. Replies: 2
    Last Post: 8 Dec 2009, 8:43 AM
  2. Replies: 3
    Last Post: 28 Oct 2009, 6:38 AM
  3. Replies: 0
    Last Post: 22 May 2009, 12:14 PM
  4. Ext.TabPanel items with "autoLoad" and "scripts: true" issue
    By iDave in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 7 Aug 2008, 9:45 AM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar