[SOLVED] layout issue in MVC-structure

[ThierryC]

MVC_wrong.jpgold_good.jpgi'm rewriting an existing application into the MVC - format
in the 'old' non-MVC pattern i had a formpanel with the search fields 'framed', having the 'blue' background..

when rewriting the same app but in mvc format, the frame option shows tiny blue borders, and the panel shows a white background (see attached screenshots)

i've already tried tons of possibilities but no luck...
what am i missing ?? i don't see it. can you help me


if have a viewport --> containing the quotescontainer which itself contains the searh-formpanel and a gridpanel

Ext.define('cmqu10r.view.Viewport',{
    extend : 'Ext.container.Viewport',
    requires : [
        'cmqu10r.view.QuotesContainer',
        'cmqu10r.view.GridlayoutForm',
        'cmqu10r.view.SearchForm'
    ],
    initComponent : function(){
        Ext.apply(this,{
            layout : 'card',
            items : this.buildItems()
        });
        
        this.callParent(arguments);
    },
    
    buildItems : function(){
        return [{
            xtype : 'container',
            layout : {
                type : 'hbox',
                align : 'stretch'
            },
            items : [{
                xtype : 'gridlayoutform',
                hidden : true,
                //title: 'GridLayout',
                flex: 0.4,
                margin : '10 10 10 10'
            },{
                xtype : 'searchform',
                hidden : true,
                title: 'Search',
                flex: 0.4,
                margin : '10 10 10 10'
            }, {
                xtype : 'quotescontainer',
//                margin : '10 10 10 0' ,
                margin : '5 5 5 0' ,
                title : "<img border='0' src='/vvresources/icons/calculator.png' />" + "  Comaker Quotes",
                flex : 1
            }]
        }];
    }
});

Ext.define('cmqu10r.view.QuotesContainer',{
    extend : 'Ext.panel.Panel',
    alias : 'widget.quotescontainer',
    requires : [
        'cmqu10r.view.QuoteList',
        'cmqu10r.view.SearchList',
    ],

    initComponent : function(){
        Ext.apply(this,{
            layout: 'border',
//            tbar : this.buildTbar(),
            items : this.buildItems()
        });
        this.callParent(arguments);
    },

    buildItems : function(){
        return [ {
           xtype: 'searchlist',
           region : 'north'

        }, {
            xtype: 'quotelist',
            region : 'center'
        }];
    },

    buildTbar : function(){
        return [
            {
                text : 'Save layout',
                iconCls : 'book_add',
                itemId : 'savgrlayoutbutton'
            }, {
                text : 'Get layout',
                iconCls : 'book_go',
                itemId : 'getgrlayoutbutton'
            },'->',
            {
                text: 'view',
                iconCls : 'control_equalizer_blue',
                itemId : 'gridlayoutbutton'
            }
        ];
    }
        
});

Ext.define('cmqu10r.view.SearchList', {
    extend: 'Ext.form.FormPanel',
    alias: 'widget.searchlist',

    initComponent: function () {
       Ext.apply(this, {
            height: 140,
            minHeight: 90,
            labelWidth: 100,
            frame: true,
            /*tbar : this.buildTbar(),*/
            items: this.buildItems3()
        });
        this.callParent(arguments);
    }, 

    buildItems3: function(){
        return  [
            {layout:'column',
                defaults:{ columnWidth:0.33 ,layout:'form' ,border:false ,xtype:'panel' ,bodyStyle:'padding:0 18px 0 0'},
                items:[
                    // left column
                    {defaults:{anchor:'80%'},
                        items:[
                            {xtype: 'textfield',
                              id:'quotenr',
                              fieldLabel: 'OfferNumber',
                              emptyText:'Typ Offernbr'

                            },{
                                xtype: 'textfield',
                                id:'accman',
                                fieldLabel: 'Acc.Manager',
                                emptyText:'Typ Acc.Manager'
                            },{
                                xtype: 'textfield',
                                id:'acceng',
                                fieldLabel: 'Acc.Engineer',
                                emptyText:'Typ Acc.Engineer'
                            },{
                                xtype: 'textfield',
                                id:'qry',
                                fieldLabel: 'Predefined Filter',
                                width : 60
                            }
                        ]
                    },
                    // middle column
                    {defaults:{anchor:'100%'},
                        labelWidth:100,
                        items:[
                            {xtype:'textfield',
                                id:'customer',
                                name: 'customer',
                                fieldLabel: 'Customer',
                                emptyText:'Typ Customer(s)',
                                style: 'font-size: 10px;',
                                labelSeparator: ''
                            },{
                                xtype:'textfield',
                                id:'description',
                                fieldLabel:'Description Part'
                            },{
                                xtype:'textfield',
                                id:'partnbr',
                                fieldLabel:'Part number'
                            }

                        ]
                    },

                    //right column
                    {defaults:{anchor:'100%'},
                        items:[
                            {
                                xtype: 'textfield',
                                id:'reference',
                                fieldLabel: 'Reference Customer',
                                emptyText:'Reference Customer'
                            },{
                                xtype: 'textfield',
                                id: 'machine',
                                fieldLabel: 'Machine',
                                emptyText:'Machine Type'
                            },{
                                xtype: 'textfield',
                                id: 'material',
                                fieldLabel: 'Material',
                                emptyText:'Material'
                            }

                        ]
                    }
                ]
            }
        ]
    }


});

[eweiler]

In your framed searchlist formpanel, you are putting three columns in another object, without the xtype sepcified. So the object with layout: 'column' would probably render as a panel and not be frames. You could try specifying that as a form and to frame, or more likely each of the items within that item.

I don't see how it was made in your old code, but the searchlist alone has the object nesting below and the frame is behind other containers/panels:

SearchList (Has frame)
|--Column Panel (no xtype specified, no frame)
|----left column (no frame)
|----middle column
|----right column


Perhaps adding framing to all the levels, or else specifying the lower columns/panels as fieldcontainers or fieldsets will be more visually pleasing.

[ThierryC]

isn't the default xtype:panel ??

 buildItems3: function(){
        return  [
            {layout:'column',
                defaults:{ columnWidth:0.33 ,layout:'form' ,border:false ,xtype:'panel' ,bodyStyle:'padding:0 18px 0 0'},
                items:[
                    // left column
                    {defaults:{anchor:'80%'},
                        items:[
                            {xtype: 'textfield',
                              id:'quotenr',
                              fieldLabel: 'OfferNumber',
                              emptyText:'Typ Offernbr'

                            },{
                                xtype: 'textfield',
                                id:'accman',

[ThierryC]

if i put the default to framed... it looks not good either

(see picture)
mvc_framed.jpg

[eweiler]

It looks like you probably added frame on the wrong components/level:

SearchList (Has frame)
|--Column Panel (no xtype specified, still no frame)
|----left column (you added frame to these)
|----middle column (you added frame to these)
|----right column (you added frame to these)