1. #1
    Sencha User
    Join Date
    Oct 2012
    Location
    India
    Posts
    15
    Answers
    1
    Vote Rating
    1
    saurabh0683 is on a distinguished road

      0  

    Default Unanswered: border layout behaving in different manner when using global scoped component

    Unanswered: border layout behaving in different manner when using global scoped component


    Hi all,

    Please check below code and let me know if there is something wrong. This code is supposed to show form in west and grid in center using border layour but both are aligned in top corner overlapping each other. but same thing works fine with hbox. why is it so??
    (please check attached screenshot)

    Code:
    Ext.define('Book', {
    extend: 'Ext.data.Model',
    fields: [
    'Author',
    'Title',
    'Category',
    'PublicationDate',
    'NumberOfCopies',
    ]
    });
    
    
    var store = Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',    
        model: 'Book'
    });
    
    
    
    
    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        columns: [
            { text: 'Author',  dataIndex: 'Author', type:'string'},
            { text: 'Title', dataIndex: 'Title', type:'string'},
            { text: 'Category', dataIndex: 'Category', type:'string' },
            { text: 'PublicationDate', dataIndex: 'PublicationDate', type:'date' },
            { text: 'NumberOfCopies', dataIndex: 'NumberOfCopies' }
        ],
        height: 200,
        width: 400,
       
    });
    
    
    var simple = Ext.create('Ext.form.Panel',{
        //xtype: 'form',
        //layout: 'form',
        //collapsible: true,
        id: 'simpleForm',
        url: 'FormHandler',
        frame: true,
        title: 'Simple Form',
        //bodyPadding: '5 5 0',
        width: 350,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 95
        },
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'Author',
            //afterLabelTextTpl: required,
            name: 'Author',
            allowBlank: false,
            tooltip: 'Enter your author name'
        },{
            fieldLabel: 'Title',
            //afterLabelTextTpl: required,
            name: 'Title',
            allowBlank: false,
            tooltip: 'Enter your book title'
        },{
            fieldLabel: 'Category',
            name: 'Category',
            allowBlank: false,
            tooltip: "Enter your book category"
        }, {
            fieldLabel: 'PublicationDate',
            name: 'PublicationDate',
            xtype: 'datefield',
            tooltip: 'Enter your date of publication'
        },
        {
            xtype: 'textfield',
            fieldLabel: 'Number Of Copies',
            name: 'NumberOfCopies',
            tooltip: 'Enter a number of copies'
        },
        ],
    
    
        buttons: [{
            text: 'Add',
            handler: function(button) {
                // The getForm() method returns the Ext.form.Basic instance:
                var form = button.up('form').getForm();
                            
                var model = Ext.ModelMgr.getModel('Book');
                var myModelAction = Ext.create(model, form.getValues());            
                console.log(myModelAction.data.Author);
                store.add(myModelAction);
                console.log(store	);
            }
        }]
    });
    
    
    Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 300,
        title: 'Border Layout',
        layout: 'border',
        items: [{
            title: 'South Region is resizable',
            region: 'south',     // position for region
            xtype: simple,
            height: 100,
            split: true,         // enable resizing
            margins: '0 5 5 5'
        },{
            // xtype: 'panel' implied by default
            title: 'West Region is collapsible',
            region:'west',
            xtype: grid,
            margins: '5 0 0 5',
            width: 200,
            collapsible: true,   // make collapsible
            id: 'west-region-container',
            layout: 'fit'
        },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit',
            margins: '5 5 0 0'
        }],
        renderTo: Ext.getBody()
    });
    Attached Images

  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,074
    Answers
    111
    Vote Rating
    94
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    Try this: when you are creating components, put all configs in them and then just include that component in the panel with border layout:
    Code:
    var grid = Ext.create('Ext.grid.Panel', {     title: 'Simpsons',
        region: 'west',     store: store,     columns: [         { text: 'Author',  dataIndex: 'Author', type:'string'},         { text: 'Title', dataIndex: 'Title', type:'string'},         { text: 'Category', dataIndex: 'Category', type:'string' },         { text: 'PublicationDate', dataIndex: 'PublicationDate', type:'date' },         { text: 'NumberOfCopies', dataIndex: 'NumberOfCopies' }     ],     height: 200,     width: 400,     });
    then in panel items, just put grid and not use xtype: 'grid' and creating a new component.

Thread Participants: 1