Add a GridPanel to a Tab using Architect (Ext)

[CX2]

Not sure if this will get marked as cross threading but I posted this question in the Ext forum and the advice was to work outside of Architect but it does not seem like a complicated request I am asking and I really like Architect...


Basically I have a tabpanel, and I want to add a gridpanel to it when the user clicks a button. I can add a blank tab to the tabpanel without issue using this

onButtonClick: function(button, e, options) {
Ext.getCmp('MyTabPanelTest').add({title: 'tab', html: 'Another tab'});
}

But I want to load a specific gridpanel I have already defined so I tried this

onButtonClick: function(button, e, options) {
Ext.getCmp('MyTabPanelTest').add(Ext.getCmp('taskgridpanel'));
},

but get this error
Uncaught TypeError: Cannot read property 'xtype' of undefined

It would seem a problem with referencing the GridPanel but I am not sure how do properly reference this in Architect

Here is the code for the GridPanel

Ext.define('MyApp.view.TaskGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.taskgridpanel',
requires: [
'MyApp.view.CheckColumn'
],

frame: true,
id: 'TaskGridPanel',
collapsible: true,
iconCls: 'icon-grid',
title: 'Task List',
store: 'FixtureTasksStore',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
width: 203,
dataIndex: 'Task',
editor: {
xtype: 'textfield',
allowBlank: false
},
flex: 1,
text: 'Task'
},
{
xtype: 'checkcolumn',
id: 'CompleteCheckBox',
width: 60,
dataIndex: 'TaskComplete',
text: 'Complete'
}
],
viewConfig: {

},
features: [
{
ftype: 'grouping',
groupHeaderTpl: 'Fixture: {name} ({rows.length} Task{[values.rows.length > 1 ? "s" : ""]})'
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
ptype: 'cellediting',
clicksToEdit: 1
})
],
dockedItems: [
{
xtype: 'toolbar',
id: 'taskGridToolbar',
dock: 'top'
}
]
});

me.callParent(arguments);
}

});

[aconran]

Ext.getCmp is going to grab a direct reference to an instance of a component.

Inside of Architect all top level components are subclasses. I'd suggest you drop the id off of the top level class and add it via xtype.

This will create a new instance of that re-usable class/component.

onButtonClick: function(button, e, options) {
    Ext.getCmp('MyTabPanelTest').add({xtype: 'taskgridpanel'});
},

[CX2]

In Architect how do I create the xtype reference?

[CX2]

I found that if I link my GridPanel to the TabPanel (below), it references the GridPanel using it's xtype and then the button to add the GridPanel to the TabPanel works great; but I still don't understand how it is creating that reference. I scanned over the code to what else changes when I add that link and I can't see any other changes but without that link the button will not work.

Ext.define('MyApp.view.MyTabPanel', {    extend: 'Ext.tab.Panel',
    alias: 'widget.mytabpanel',
    requires: [
        'MyApp.view.TaskGridPanel'
    ],


    height: 250,
    id: 'MyTabPanelTest',
    width: 400,
    activeTab: 0,


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    title: 'Tab 1'
                },
                {
                    xtype: 'taskgridpanel'
                }
            ]
        });


        me.callParent(arguments);
    }


});

[aconran]

userAlias and xtype are nearly synonymous.

alias is a framework configuration that creates xtypes. When the alias configuration is prefixed with "widget." it will create xtypes. When its prefixed with "plugin." it will create ptypes, etc.
http://docs.sencha.com/ext-js/4-1/#!...lass-cfg-alias

[CX2]

My taskgridpanel does have its xtype set correctly then

Ext.define('MyApp.view.TaskGridPanel', {   
 extend: 'Ext.grid.Panel',
    alias: 'widget.taskgridpanel',
    requires: [
        'MyApp.view.CheckColumn'
    ],

and I can add taskgridpanel to a new tab using

Ext.getCmp('MyTabPanelTest').add({xtype: 'taskgridpanel'});

but ONLY if taskgridpanel is configured to display when the app first loads.

So is there something in how the app loads that if the view is not included in the initial view it does not register the gridpanel.

Big picture...I want to have a menu on the left and a blank tabpanel on the right, and the user can click to open one of the options in the menu and it will then open in the tabpanel.

Thanks so much for the reply!

[aconran]

but ONLY if taskgridpanel is configured to display when the app first loads.

So is there something in how the app loads that if the view is not included in the initial view it does not register the gridpanel.

More details? Error? Blank screen? etc

[CX2]

It is working now.... I was browsing the files that SA deployed and noticed there were a lot of artefacts from panels, grids, etc that I was messing around with and then deleted; SA only updates modified files and does not remove deleted ones. I deleted all the files and redeployed and now it works...seems strange since if the files are deleted out of SA they are not referenced in the application...anyhoo its working so moving on

[aconran]

I deleted all the files and redeployed and now it works...seems strange since if the files are deleted out of SA they are not referenced in the application...anyhoo its working so moving on

Files within the project's app and metadata directories should be maintained/cleaned up.

Files that are in a deployed directory are no longer managed by Sencha Architect. When it's been deployed it is sort of out of Architect's control and is just a file system level at that point.