CODEWITHSUNDEEP
extjsextjs4extjs4.1extjs-mvc
Mr_Green
Mr_Green

Reputation: 41832

Fit the table to the parent container in extjs

In my project, I am trying to fit the created table to the parent panel.

inside panel

var items = [];

layout: {
    type: 'table',
    columns: 6
},
initComponent: function(){
    //creating child items dynamically
    for(var i=0;i<36;i++){
        items.push({
            xtype: 'panel',
            layout:'fit'
        })          
    }
    this.callParent();
}
items: items

The child items are being added successfully to the panel, but with 0 dimensions (width and height). How to make the child panels calculate the dimensions to fit themselves in the parent panel?

PS: I can see 36 blocks if I give dimensions manually.

I am also available at sencha chat

Upvotes: 2

Views: 10504

Answers (3)

Mr_Green
Mr_Green

Reputation: 41832

I solved the problem using containers as child items instead of panels (which were default). I used tableAttrs to stretch the table layout inside the parent panel (As suggested by @A1rPun). and also using tdAttrs to show border's to the containers.

var items = [];

layout: {
    type: 'table',
    columns: 6

    tableAttrs: {
        style: {
            width: '100%',
            height:'100%'
        }
    },
    tdAttrs: {
       style:{
           border:'1px groove #abc7ec'
       }
    }
},
initComponent: function(){
    for(var i=0;i<36;i++){
        items.push({
             xtype: 'container',
             style:{
                 height:'100%'
             }
        })          
    }
    this.callParent();
},
items: items

Working Fiddle

Eventhough I solved it, I still think that there could be some built-in method in extjs to stretch the table in a parent panel.

Upvotes: 3

Vlad
Vlad

Reputation: 3645

What if you try this:

...
items: [],

initComponent: function() {
    for(var i=0; i<36; i++) {
        this.add({
            xtype: 'panel',
            layout:'fit',
            items: []
        });          
    }
    this.callParent(arguments);
}

Update:

items: [],

initComponent: function() {
    this.callParent(arguments);
    for(var i=0; i<36; i++) {
        this.add({
            xtype: 'panel',
            layout:'fit',
            html: 'Content'
        });
    }
}

jsfiddle: http://jsfiddle.net/8G5zV/

Upvotes: 0

A1rPun
A1rPun

Reputation: 16837

You can add tableAttrs to your layout config to make the parent panel 100% width.

layout: {
    type: 'table',
    columns: 6,
    tableAttrs: {
        style: {
            width: '100%'
        }
    }
},

And for your items you need to specify a title or html.

items.push({
    xtype: 'container',
    html: i.toString(),
    layout:'fit'
})

The result with xtype: 'container', html: i.toString(): enter image description here The result with xtype: 'panel', title: i.toString(): enter image description here

Upvotes: 10

Related Questions