Results 1 to 4 of 4

Thread: Beginner layout, render, form questions

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    54

    Arrow Beginner layout, render, form questions

    Hi everyone.

    I'm taking slow steps into the world of Extjs and am looking to build an application but am struggling linking it all together.

    I've build a basic viewport with 2 panels, north and center. In the north panel I have a toolbar which contains menus. When I click on a menu item I'm trying to render a form in the center panel. I've written the code to do this and I can see the form being loaded but it's about 5 pixels high. I'm not sure if this is to do with the height or width not being set, but adding these has made no difference.

    I've included my viewport files to see if that can shed any light on things;

    Code:
    MyViewportUi = Ext.extend(Ext.Viewport, {
        layout: 'border',
        initComponent: function() {
            this.items = [
                {
                    xtype: 'panel',
                    region: 'north',
                    layout: 'hbox',
                    height: 24,
                    items: [
                        {
                            xtype: 'button',
                            text: 'Home',
                            flex: 1,
                        },
                        {
                            xtype: 'button',
                            text: 'Goods',
                            flex: 1,
                            menu: {
                                xtype: 'menu',
                                items: [
                                    {
                                        xtype: 'menuitem',
                                        text: 'Goods In',
                                        ref: '../../../goodsInButton'
                                    },
                                    {
                                        xtype: 'menuitem',
                                        text: 'Goods Out',
                                        ref: '../../../goodsOutButton'
                                    },
                                    {
                                        xtype: 'menuitem',
                                        text: 'Stock List',
                                        ref: '../../../stockListButton'
                                    }
                                ]
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'Documentation',
                            flex: 1,
                        },
                        {
                            xtype: 'button',
                            text: 'Help',
                            flex: 1,
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    region: 'center',
                    id: 'content',
                    itemId: 'content',
                    ref: '../../../content'
                }
            ];
            MyViewportUi.superclass.initComponent.call(this);
        }
    });
    Code:
    MyViewport = Ext.extend(MyViewportUi, {
        initComponent: function() {
            MyViewport.superclass.initComponent.call(this);
            this.goodsInButton.on('click', this.goodsInClick, this);
            this.goodsOutButton.on('click', this.goodsOutClick, this);
        },
    
        goodsInClick: function() {
            var tab = Ext.getCmp('content');
            tab.removeAll();
            tab.add(goodsIn);
            tab.doLayout();
        },
        
        goodsOutClick: function() {
            var tab = Ext.getCmp('content');
            tab.removeAll();
            tab.add(goodsOut);
            tab.doLayout();
        },
        
        homeClick: function() {
            var tab = Ext.getCmp('content');
            tab.removeAll();
            tab.add(home);
            tab.doLayout();
        },
    
        documentationClick: function() {
            var tab = Ext.getCmp('content');
            tab.removeAll();
            tab.add(documentation);
            tab.doLayout();
        }
    });

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    54

    Default

    I've tried putting a window in the centre panel and adding the form to that but I still get the same issue, the form appears on screen, fills the width of the window and is only around 5 pixels high.

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    layout

    You must be completely familiar with this class. Read the entire intro. The click the "Expand all members" button and read all the configs.

    http://dev.sencha.com/deploy/dev/doc...=Ext.Container

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    54

    Default

    Cheers Animal,

    I'll read the container section. I've included 2 screenshots to show what's happening as I don't think I'm describing it correctly.

    noform.jpgformadded.jpg

Similar Threads

  1. [not solved]Few beginner questions: MySQL, socket, licences, icons
    By vpxavier in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 8 Aug 2010, 8:35 PM
  2. Beginner's questions
    By Wiiktor in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 11 Jul 2010, 3:01 PM
  3. 4 simple beginner's questions
    By TheMonolith in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 18 Feb 2010, 5:34 AM
  4. Form layout questions
    By rtconner in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Sep 2008, 11:33 AM

Posting Permissions

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