Results 1 to 2 of 2

Thread: Create a page using ext desginer please help me

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default Create a page using ext desginer please help me

    i want to create a page using ext designer .
    it should align in the center and number boxes as in the picture format
    how can i place the number boxes in a form or in a panel, in which they should placed without using absolute layout. please help me by advising hw can i place such boxes one by one with our specification in different places , please help me

    and one more thing how can i develop next page for using in the same project ? there is no option for new page.

    untitled.jpg

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    See if this will get you started .. you will need to play with the spacing, padding, etc.

    Code:
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.panel.Panel',
    
        height: 296,
        width: 540,
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
        title: 'My Panel',
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'container',
                        flex: 1,
                        items: [
                            {
                                xtype: 'label',
                                text: 'My Label'
                            },
                            {
                                xtype: 'textfield'
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        layout: {
                            align: 'stretch',
                            type: 'hbox'
                        },
                        flex: 1,
                        items: [
                            {
                                xtype: 'container',
                                layout: {
                                    align: 'stretch',
                                    type: 'vbox'
                                },
                                flex: 1,
                                items: [
                                    {
                                        xtype: 'container',
                                        layout: {
                                            align: 'stretch',
                                            padding: 10,
                                            type: 'hbox'
                                        },
                                        flex: 1,
                                        items: [
                                            {
                                                xtype: 'button',
                                                text: 'MyButton',
                                                flex: 1
                                            },
                                            {
                                                xtype: 'button',
                                                text: 'MyButton',
                                                flex: 1
                                            },
                                            {
                                                xtype: 'button',
                                                text: 'MyButton',
                                                flex: 1
                                            },
                                            {
                                                xtype: 'button',
                                                text: 'MyButton',
                                                flex: 1
                                            },
                                            {
                                                xtype: 'button',
                                                text: 'MyButton',
                                                flex: 1
                                            }
                                        ]
                                    },
                                    {
                                        xtype: 'container',
                                        layout: {
                                            align: 'stretch',
                                            padding: 10,
                                            type: 'hbox'
                                        },
                                        flex: 1,
                                        items: [
                                            {
                                                xtype: 'button',
                                                text: 'MyButton',
                                                flex: 1
                                            },
                                            {
                                                xtype: 'button',
                                                text: 'MyButton',
                                                flex: 1
                                            },
                                            {
                                                xtype: 'button',
                                                text: 'MyButton',
                                                flex: 1
                                            },
                                            {
                                                xtype: 'button',
                                                text: 'MyButton',
                                                flex: 1
                                            },
                                            {
                                                xtype: 'button',
                                                text: 'MyButton',
                                                flex: 1
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                width: 150,
                                items: [
                                    {
                                        xtype: 'button',
                                        text: 'MyButton'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
    
            me.callParent(arguments);
        }
    
    });
    Regards,
    Scott.

    f197022.png

Tags for this Thread

Posting Permissions

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