1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    11
    Answers
    1
    Vote Rating
    0
    avivenna is on a distinguished road

      0  

    Default Unanswered: layout for gridpanels

    Unanswered: layout for gridpanels


    Hi friends,

    I am trying to put twro grid panels in to a layout using viewport. I am using the following snippet

    Ext.create('Ext.Viewport', {
    layout: 'border',
    align:'middle',
    title: 'Ext Layout Browser',
    items: [{
    xtype: 'box',
    id: 'header',
    region: 'north',
    html: '<h1> Ext.Layout.Browser</h1>',
    height: 30
    },{
    layout: 'border',
    id: 'layout-browser',
    region:'center',
    border: false,
    split:true,
    margins: '2 0 5 5',
    width: 100,
    minSize: 100,
    maxSize: 500,
    items: [grid1,grid2]
    } ],
    renderTo: Ext.getBody()
    });

    I am unable to get it accomplished. only one grid occupies the entire space. Also can I put other items like combobox along with grid on particular side of a layout? please do guide me. Thanks in Advance

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,083
    Answers
    675
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I am not sure the direction your are trying to go .. but this may get you started:
    You may also want to have at our Sencha Architect for WYSIWYG design of forms.
    http://www.sencha.com/products/architect/

    Code:
    var grid1 = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.create('Ext.data.ArrayStore', {}),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        flex: 1
    });
    
    var grid2 = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.create('Ext.data.ArrayStore', {}),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        flex: 1
    });
    
    Ext.create('Ext.Viewport', {
        layout: 'border',
        align: 'middle',
        title: 'Ext Layout Browser',
        items: [{
            xtype: 'box',
            region: 'north',
            html: '<h1> Ext.Layout.Browser</h1>',
            height: 30
        },
        {
            layout: 'vbox', // or hbox
            region: 'center',
            border: false,
            split: true,
            margins: '2 0 5 5',
    //        width: 100,
    //        minSize: 100,
    //        maxSize: 500,
            items: [ grid1, grid2 ]
        }]
    });‚Äč
    Scott.

Thread Participants: 1