Results 1 to 4 of 4

Thread: Dynamically add ext.menu.Menu to ext.panel.Panel

  1. #1
    Sencha User
    Join Date
    Dec 2013
    Posts
    41

    Default Answered: Dynamically add ext.menu.Menu to ext.panel.Panel

    I dynamically create several panels and add the into an accordion menu. For each of this panels I want to add an ext.menu.Menu component but when I try do that the menu is not visible and also not present in the DOM. I also create a few menu items which I add to the menu.


    Code:
       for (var i = 0; i < store.totalCount; ++i){ 
          var rec = store.getAt(i);        
    
    var panelItem =  new Ext.panel.Panel({     
           title: (Ext.Date.format(rec.data.dateBorn, 'd-m-Y')) + " " + rec.data.name,                        value:rec.data.VALUE_FIELD,        });        
    panel.add(panelItem);       
    var userMenu = new Ext.menu.Menu({        width: 120,        height: 70,        className:"menu"    });         panelItem.add(userMenu);}

  2. Have a look at the following:

    Code:
    Ext.application({
        name : 'Fiddle',
    
        launch : function() {
    
            var panel = Ext.create('Ext.panel.Panel', {
                title: 'Hello',
                width: 500,
                height: 500,
                html: '<p>World!</p>',
                renderTo: Ext.getBody()
            });
            
            var menu = Ext.create('Ext.menu.Menu', {
                width: 100,
                margin: '0 0 10 0',
                floating: false, // so we can be a child of container
                items: [{
                    text: 'regular item 1'
                },{
                    text: 'regular item 2'
                },{
                    text: 'regular item 3'
                }]
            });
            
            panel.add(menu);
    
        }
    });

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Have a look at the following:

    Code:
    Ext.application({
        name : 'Fiddle',
    
        launch : function() {
    
            var panel = Ext.create('Ext.panel.Panel', {
                title: 'Hello',
                width: 500,
                height: 500,
                html: '<p>World!</p>',
                renderTo: Ext.getBody()
            });
            
            var menu = Ext.create('Ext.menu.Menu', {
                width: 100,
                margin: '0 0 10 0',
                floating: false, // so we can be a child of container
                items: [{
                    text: 'regular item 1'
                },{
                    text: 'regular item 2'
                },{
                    text: 'regular item 3'
                }]
            });
            
            panel.add(menu);
    
        }
    });

  4. #3
    Sencha User
    Join Date
    Dec 2013
    Posts
    41

    Default

    Works perfect. Thank you!

  5. #4
    Sencha Premium User
    Join Date
    Oct 2017
    Posts
    3

    Default

    Hi, I am new for Sencha Architect and I want to add menu dynamically in my application

    1. first i created a button and add menu on them.
    xtype: 'button',
    itemId: 'menuToolbar',
    width: 200,
    text: 'Company Name',
    menu: {
    xtype: 'menu',
    items: [
    {
    xtype: 'menuitem',
    text: 'Menu Item'
    }
    ]
    }

    2. I created a modal and bind with a store so i am getting my data like:
    "listjson" : [
    {"cmpId" : "1122" , "cmpNm" : "ABCD"},
    {"cmpId" : "1123" , "cmpNm" : "EGFH"},
    {"cmpId" : "1124" , "cmpNm" : "HIJK"}
    ]

    My store code is:
    Ext.define('Univision_ext.store.CompanyList', {
    extend: 'Ext.data.Store',

    requires: [
    'Univision_ext.model.CompanyList',
    'Ext.data.proxy.Ajax',
    'Ext.data.reader.Json'
    ],

    constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
    storeId: 'CompanyList',
    autoLoad: true,
    model: 'Univision_ext.model.CompanyList',
    proxy: {
    type: 'ajax',
    url: 'url',
    reader: {
    type: 'json',
    rootProperty: 'listjson'
    }
    }
    }, cfg)]);
    }
    });

    Now i want to display all company names in a list (which i created initially). what should i do in next?
    Thanks in advance.

Posting Permissions

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