title: Displaying views that contain 'partial'/'nested' widgets in EXTjs 4
body: <p>I'm having trouble understanding how I need to define and use the MVC model for my test EXTjs4 app. Consider the following structure.</p>
  
  <p>app.js</p>
  
  <pre><code>Ext.application({
      name: 'AM',
      appFolder: 'app',
      controllers: ['Cards', 'Fourscrum'],
      launch: function () {
          Ext.create('Ext.container.Viewport', {
              defaults: { flex: 1 },
              layout: {
                  type: 'hbox',
                  align: 'stretch',
              },
              items:
              [
                  Ext.widget('Fourscrum')
              ]
          });
  </code></pre>
  
  <p>Controller:</p>
  
  <p>Cards.js</p>
  
  <pre><code>Ext.define('AM.controller.Cards', {
      extend: 'Ext.app.Controller',
          stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
          models: ['Card', 'Priority', 'Size'],
          views: ['card.List', 'priority.prioritycombo', 'card.Edit'],
  </code></pre>
  
  <p>Fourscrum.js</p>
  
  <pre><code>Ext.define('AM.controller.Fourscrum', {
      extend: 'Ext.app.Controller',
      stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
      models: ['Card', 'Priority', 'Size'],
      views: ['scrum.Fourscrum', 'card.List'],
  </code></pre>
  
  <p>view.scrum.Fourscrum.js</p>
  
  <pre><code>Ext.define('AM.view.scrum.Fourscrum', {   // *** Variable
      extend: 'Ext.panel.Panel',
      alias: 'widget.Fourscrum',       // *** Variable
  
      width: 400,
      height: 300,
  
      layout: 'column',
  
      title: 'Scrum',                  // *** Variable
      items:
      [
          Ext.widget('cardlist',
          {
              alias: 'widget.backlogcardlist',
              title: "Backlog",
              store: 'BacklogCards'
          }),
          Ext.widget('cardlist',
          {
              alias: 'widget.backlogcardlist',
              title: "Backlog",
              store: 'BacklogCards'
          }),
          Ext.widget('cardlist',
          {
              alias: 'widget.inprogresscardlist',
              title: "In Progress",
              store: "InprogressCards"
          }),
          Ext.widget('cardlist',
          {
              alias: 'widget.reviewcardlist',
              title: "Review",
              store: "ReviewCards"
          }),
          Ext.widget('cardlist',
          {
              alias: 'widget.donecardlist',
              title: "Done",
              store: "DoneCards"
          })
      ]
  
  });
  </code></pre>
  
  <p>My ideal structure for this app is as follows:</p>
  
  <p>Viewport defined (inside app.js)</p>
  
  <p>which contains a Fourscrum.js view (which is just a panel)</p>
  
  <p>which contains 4 different List.js views (which are just grids).</p>
  
  <p>Trying to accomplish this, I currently get a few errors when i start messing with the above code:</p>
  
  <ol>
  <li>Item undefined</li>
  <li>namespace undefined</li>
  </ol>
  
  <p>Does anyone know why this doesn't work?</p>
  
  <p>PS. I can get this example to work if I replace my 'cardlist' widgets with panels directly defined in the Fourscrum view.</p>
  
  <p>PPS. This also works properly if I forego the Fourscrum container panel all together :(</p>
  
  <p>EDIT:</p>
  
  <p>I felt my explanation was a little unclear so I've uploaded an image to help describe the program. I'm not sure where I need to define the stores, models, and views with this nested structure. So I've repeated it in both controllers. I hope that's not what is causing the problem.</p>
  
  <p><img src="https://i.stack.imgur.com/KxFab.png" alt="enter image description here"></p>
  
  <p>EDIT2:</p>
  
  <pre><code>Ext.define('AM.view.card.List', {
      extend: 'Ext.grid.Panel',
      alias: 'widget.cardlist',
  
      //title: 'List',
      //store: 'Cards',
  
  
      //multiSelect: true,
      viewConfig: {
          plugins: {
              ptype: 'gridviewdragdrop',
              dragGroup: 'ddzone',
              dropGroup: 'ddzone'
          }
      },
      //            selType: 'cellmodel',
      //            plugins: [
      //                Ext.create('Ext.grid.plugin.CellEditing', {
      //                    clicksToEdit: 1
      //                })
      //            ],
  
      columns: [
          {
              header: 'ID',
              dataIndex: 'external_id',
              field: 'textfield',
              width: 30
          },
          {
              header: 'Name',
              dataIndex: 'name',
              field: 'textfield',
              width: 150
          },
          {
              header: 'Priority',
              dataIndex: 'priority_id',
              renderer: function (value) {
                  var display = '';
                  Ext.data.StoreManager.get("Priorities").each(function (rec) {
                      if (rec.get('id') === value) {
                          display = rec.get('short_name');
                          return false;
                      }
                  });
                  return display;
              },
              width: 60,
              field: { xtype: 'PriorityCombo' }
          },
          {
              header: 'Size',
              dataIndex: 'size_id',
              renderer: function (value) {
                  var display = '';
                  Ext.data.StoreManager.get("Sizes").each(function (rec) {
                      if (rec.get('id') === value) {
                          display = rec.get('short_name');
                          return false;
                      }
                  });
                  return display;
              },
              width: 60
          },
          {
              xtype: 'actioncolumn',
              width: 16,
              items: [{
                  icon: 'Styles/Images/zoom.png',  // Use a URL in the icon config
                  tooltip: 'Zoom In',
                  handler: function (grid, rowIndex, colIndex) {
                      var rec = grid.getStore().getAt(rowIndex);
                      alert("Edit " + rec.get('name'));
                  }
              }]
          }
      ]
  
  });
  </code></pre>