Results 1 to 5 of 5

Thread: Adding a new panel overlapping the existing one

  1. #1

    Default Adding a new panel overlapping the existing one

    Hi.

    I'm creating a new window , first it has only a grid but when the user press a button a new panel has to appear on the left and overlap the the grid (the grid should not adjust its size).

    Here are the images of what i have right now;

    1. The grid fitting all the window.
    Panel1.jpg



    2. already pressed the button and added the new panel, but as you can see the columns in the grid are streching, but i want the panel to overlap the grid.

    panel2.jpg



    Here's the code i'm using to create the window.


    Code:
    
    
       createWindow : function(src){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('grupo-tallas-seleccion-comercial');
            if(!win){
                win = desktop.createWindow({
                    id: 'grupo-tallas-seleccion-comercial',
                    title:src.text,
                    width:800,
                    height:500,
                    buttonAlign : 'center',
                    bodyStyle:'background:#FFFFFF;background-color:#FFFFFF',
                    iconCls: 'bogus',
                    animCollapse:false,
                    layout: 'fit',
                    constrainHeader:true,    
                    title: 'Grupo de Tallas',
                    listeners: {
                        beforeclose: function() {
                            Ext.getCmp('grupo-tallas-seleccion-comercial').queryById('container-grupo-talla-linea-genero').remove(resultsPanel,false);
                        }
                    },
                    items: {
                            xtype: 'tabpanel',
                            cls: 'tabpanel-sin-bordes',
                            cls: 'noPanelBorder',
                            layout: {
                                    type: 'vbox',
                                    align: 'center',
                                    pack: 'center'
                            },                    
                            items: [{
                                title: 'Grupo de Tallas por Linea y Genero',                                    
                                xtype: 'panel',    
                                itemId: 'container-grupo-talla-linea-genero',
                                defaults: {
                                  border: false
                                },
                                split:true,
                                layout: {
                                    type: 'hbox',
                                    align: 'stretch'
                                },    
                                bbar: new Ext.PagingToolbar({
                                                    pageSize: 10,
                                                    store: GrupoTallaLineaGeneroStoreData,
                                                    displayInfo: true,
                                                    displayMsg: 'Mostrando {0} registros - {1} de {2}',
                                                    emptyMsg: "No hay registros para mostrar"
                                }),
                                tbar: this.barraSuperiorBotonesGrupoTalla,
                                align: 'stretch',
                                items: [
                                {                            
                                    title: 'Consulta Grupo de Tallas por Linea y Genero',
                                    xtype: 'grid',      
                                    flex: 1,
                                    filterable: true,                    
                                    hideHeaders: false,
                                    stripeRows: true,
                                    split:true,
                                    plugins: [
                                    {
                                        ptype: 'filterbar',
                                        pluginId: 'filters',
                                        autoStoresRemoteProperty: 'filterData',
                                        autoStoresNullValue: '###NULL###',
                                        autoUpdateAutoStores: false,
                                        renderHidden: false,
                                        showShowHideButton: false,
                                        showClearButton: false,
                                        showClearAllButton: false,
                                        showTool: false,
                                        dock: 'top'
                                    }
                                ],
                                    store: GrupoTallaLineaGeneroStoreData,
                                    columns:[
                                        {text:"Grupo",flex:1,dataIndex:"sizesdistributioncode",filterable: true,filter: {type: 'string', dataIndex: 'sizesdistributioncode'}},
                                        {text:"Linea",flex:1,dataIndex:"productitemtypecode",filterable: true,filter: {type: 'string', dataIndex: 'productitemtypecode'}},
                                        {text:"Genero",flex:1,dataIndex:"valuestring",filterable: true,filter: {xtype: 'combobox',  store: maestraGeneroStoreData,queryMode: 'local', displayField: 'shortdescription', valueField: 'code', dataIndex: 'code'}},
                                        {text:"Talla",flex:1,dataIndex:"sizecode",filterable: true,filter: {type: 'string', dataIndex: 'sizecode'}},
                                        {text:"Distribucion",flex:1,dataIndex:"distribution",filterable: true,filter: {type: 'string', dataIndex: 'distribution'}}
                                    ]
                                }]
                            },{
                                title: 'Informacion Unificada Llave Parcial',                                    
                                xtype: 'panel',
    
    
                            }]
                    }
                });
            }
            win.show();
            return win;
        }
        
    });
    
    
    
    
    
    
    var resultsPanel = Ext.create('Ext.panel.Panel', {
        title: 'añadir/editar curva de talla',
        border: true,
        split:true,
        width: 300,
        items: [{
            xtype: 'form',
            reference: 'form',
            border: false,
            layout: {
                type: 'vbox',
                align: 'left',
                pack: 'center'
            },
            items: [
                    {
                        xtype: 'textfield',
                        id: "Grupo",
                        width: 200,
                        name: 'Grupo',
                        fieldLabel: 'GrupoTalla',
                        allowBlank: false,
                        blankText: 'Debe ingresar el grupo de talla'
                    },{
                        xtype: 'textfield',
                        id: "Linea",
                        width: 200,
                        name: 'Linea',
                        fieldLabel: 'Linea',
                        allowBlank: false,
                        blankText: 'Debe ingresar la linea'
                    },
            ]
        }]
    });

    Thanks for the help.

  2. #2

    Default

    Can anyone help me with this?

  3. #3

    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    If you want the new panel to overlap, you should make it floating.


  4. #4

    Default

    Thank so much chramer for your answer, it works well as you can see in the image.

    PanelWorking.jpg


    The problem is when i resize the window (the overlapPanel wont resize with the window)

    PanelWorkingResize.jpg

    Also i cant resize the new added panel (property split:true, is not working anymore).

    Any help with that?

    Thank you so much.

  5. #5

    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    The overlap panel resize part is simple. Add a resizer config to the resizable panel config.
    Code:
    resizable: {
        handles: 'w'
    }
    The behavior of the overlap panel on window resize it's really odd. I mean, the overlap panel aligns as expected on window drag, but fails on window resize. And I can see that the overlap panel's `move` event is triggered in both cases. It might be a framework bug. I decided to go with the realigning the overlap panel on grid resize (with a small delay; without it doesn't work). Here's what I've got:


Similar Threads

  1. Adding existing div into Ext.Panel by id...
    By javabee in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 3 Feb 2012, 7:03 AM
  2. Adding html on existing panel
    By diclofoss in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 22 Feb 2009, 12:34 PM
  3. Adding Components to an Existing Panel at Runtime
    By wwarby in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 9 Jul 2008, 3:34 PM
  4. Adding existing panel to a new container like tabpanel
    By Wolfgang in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 24 Jan 2008, 1:54 AM
  5. [2.0] Adding a TreePanel to an existing Accordion Panel
    By Saeven in forum Sencha Ext JS Q&A
    Replies: 3
    Last Post: 11 Oct 2007, 3:20 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •