Layout with grid in window

[metfan]

Hello,

I try to integrate something similar to this exemple: http://dev.sencha.com/deploy/ext-4.0...Dashboard.html in window.

I defined my own grid:

Ext.define('Easybench.grid.Cart',
{
    extend: 'Ext.grid.GridPanel',
    alias: 'widget.gridcart', //ajoute gridCart dans le xType
    
    initComponent : function()
    {
        this.columns = [
             { id: 'piece_ref', text: 'piece_ref', sortable : true, dataIndex: 'piece_ref' },
             { id:'piece_name', text: 'piece_name', sortable : true, dataIndex: 'piece_name' },
             { id:'piece_price', text: 'piece_price', sortable : true, dataIndex: 'piece_price' },
             { id:'piece_pwr', text: 'piece_pwr', sortable : true, dataIndex: 'piece_pwr' },
             { id:'piece_weight', text: 'piece_weight', sortable : true, dataIndex: 'piece_weight' },
             { id:'yearly_volume', text: 'yearly_volume', sortable : true, dataIndex: 'yearly_volume'}];
        
        this.store = ds;
        this.autoScroll = true;
    
        this.callParent();
    }
});

I had many trouble to obtain scroll in my grid. I'm not sure to use the better way to integrate grid in my window. The only way I found is:

Ext.define('Easybench.window.Cart',
{
    extend: 'Ext.Window',
    
    title: 'Cart Window',
    closable: true,
    closeAction: 'hide',
    collapsible: true,
    width: 600,
    height: 400,
    layout: 'border',
    items: [
            {
                region: 'north',
                height: 150,
                title: 'Chart',
                collapsible: true,
                split: true,
                floatable: false
            }, {
                region: 'center',
                height: 250,
                xtype: 'gridcart' //on instancie la grille via le xType
            }, {
                region: 'east',
                title: 'Detail',
                width: 150,
                collapsible: true,
                split: true,
                floatable: false,
                collapsed: true
            }
            
            ]
});

I defined a manager who create my window:

Ext.define('Easybench.window.Manager',
{
    aListe: {},
    createWinCart: function()
    {
        if(this.aListe.cart == undefined)
            this.aListe.cart = [];
        this.aListe.cart[this.aListe.cart.length] = new Easybench.window.Cart().show();
    }
}, 
function(){
    oWindowManager = new this();
});

I have a link on my page, click oon the link call oWindowManager.createWinCart();
It's work well when I have only one window on my page.
when I open a second window on my page, I loose header of my grid in my first window.

How can I fix it? What I did wrong?
Thanks to your help.

[metfan]

I solved my problem.
I use too much copy/paste from previous code.

My problem is in definition of my columns, I specified an ID for each columns.
When I instanciate a new grid I get conflict of Id because columns of each grid have same ID.

I just removed ID definition and all works well.


PS: I love the new way to write class, thanks for you work!