1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    5
    Vote Rating
    0
    codin4Life is on a distinguished road

      0  

    Default Displaying a grid in a menu after Button click

    Displaying a grid in a menu after Button click


    Hi everybody,

    I have a grid and button in the toolbar. After the Button is clicked a menu should be displayed and in it a couple of grids and buttons! The problem I can't get it to display the grid!


    dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [ {
    xtype: 'button', text: 'Settings',
    listeners: {
    click: function(e) {
    var menu = new Ext.menu.Menu({ items:
    [new CustomExt.ColumnConfigurationManager()],
    width: 400,
    height: 400,
    plain: true,
    id: 'ColumnConfigurationManager'
    });
    menu.showBy(this);
    Ext.getStore('test').load();
    menu.updateLayout();
    }
    }
    }]

    ColumnConfigurationManager.js

    Ext.define('CustomExt.ColumnConfigurationManager', {
    extend: 'Ext.form.Panel',
    alias: 'widget.columnConfigurationManager',

    constructor: function (config) {
    var me = this;
    Ext.apply(me, config);
    me.callParent();
    },

    initComponent: function() {
    var me = this;
    me.layout = 'hbox';
    me.items = [
    new Ext.grid.Panel({
    id: 'TestGridMe',
    ui: 'orange-panel',
    store: Ext.create('Ext.data.Store', {
    id: 'test',
    fields:['firstName', 'lastName'],
    data: { 'items': [
    {firstName: 'Ed', lastName: 'Spencer' },
    { firstName: 'Tommy', lastName: 'Maintz' },
    { firstName: 'Aaron', lastName: 'Conran' },
    { firstName: 'Jamie', lastName: 'Avins' }
    ] },
    proxy: {
    type: 'memory',
    reader: { type: 'json', root: 'items' } } }),
    columns: [
    { text: 'FirstName', dataIndex: 'firstName', },
    { text: 'LastName', dataIndex: 'lastName', }
    ]
    })];
    me.callParent(); }
    });

    Like I say, the menu panel is displayed, the grid data is loaded but I can't see the grid.
    I don't know what I am missing.

    Thanks in advance,

    Greetz

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Posts
    5
    Vote Rating
    0
    codin4Life is on a distinguished road

      0  

    Default


    Hi everybody,

    It actually has to do with the layout! Changing it to 'table' or 'anchor' displays the grid.
    now my question is why? If anybody has an idea would be nice to share.

    Greetz

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,387
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      1  

    Default


    For hbox you'd need to give the child grid a width or a flex value (flex: 1 to take up the full width).
    If you're wanting the grid to take up the full height/width of the parent panel you can use layout: 'fit' on the parent panel.

    Or, better yet, don't wrap the grid in an owning panel just make the grid the child item of the menu.

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Posts
    5
    Vote Rating
    0
    codin4Life is on a distinguished road

      0  

    Default


    Hi,

    Thanks for your help. Actually I need the panel, because I need a couple of other controls and this will make a dedicated new control that I will need reusable!
    Thanks for pointing me out the trick with the flex value. I will try it.

    Thanks,

    Greetz

    Edit: Works, thanks. You can close the thread!

Thread Participants: 1

Tags for this Thread