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,084
    Answers
    112
    Vote Rating
    95
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi