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,064
    Answers
    110
    Vote Rating
    92
    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

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