Ext JS scope issue

Question

Im trying to call the following code: Ext.namespace("menu");

menu.menuItems = function(){
var menuItems= [{
            0 : new Ext.Panel({
                title: 'Ordering'})

from

        var a = menu.menuItems();
            var accordion = new Ext.Panel({
            title:'Options',
            region:'west',
            margins:'5 0 5 5',
            split:true,
            width: 210,
            collapsible: true,
            layout:'accordion',
            items: [a]
        });

however, a seems to be out of scope? Yet since I am passing a bunch of ext panels, I am abit confused, surely ext accepts panels?

Answer 1

I changed your menuItems code: The function wasn't returning anything. It also wasn't really creating an array of panels. It was creating an array of objects with panels at numbered keys.

I changed your accordion code: You had an extra array nested in where you added the menuItems into the accordion's items config.

  Ext.namespace("menu");
  menu.menuItems = function(){
    var menuItems= [
      new Ext.Panel({
        title: 'Ordering'
      })
    ];

    return menuItems;
  };

  var a = menu.menuItems();
  var accordion = new Ext.Panel({
    title:'Options',
    region:'west',
    margins:'5 0 5 5',
    split:true,
    width: 210,
    collapsible: true,
    layout:'accordion',
    items: a
  });

DEMO at JSBin : http://jsbin.com/oyata4/edit