PDA

View Full Version : Add a GridPanel to a Tab



CX2
17 Jul 2012, 11:59 AM
I am creating an app in Sencha Architect use the Ext framework, I am trying to add a gridpanel I have already defined to a tab when the user clicks a button for example. I can create a blank new tab but am not having much luck add one already defined.

Basically have a button that runs this

onButtonClick: function(button, e, options) {
console.log("test");
Ext.getCmp('MyTabPanelTest').add(Ext.getCmp('TaskGridPanel'));
},

It gives me the following error.

Uncaught TypeError: Cannot read property 'xtype' of undefined

scottmartin
17 Jul 2012, 12:35 PM
You would create the component, then add it to the tabpanel as a component.



var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
itemId: 'mygrid',
store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400
});

var tabpanel = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: []
});

// basic approach
tabpanel.add(grid);

// alternate approach using itemid from grid
//var mygrid = Ext.ComponentQuery.query('#mygrid');
//tabpanel.add(mygrid);​​​​​​​


Scott.

CX2
17 Jul 2012, 1:12 PM
Appreciate the reply Scott, but still having trouble translating your advice into Architect, structured slightly different so I am not sure how to reference. I should have posted more of the code previously.

TabPanel

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

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

initComponent: function() {
var me = this;

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


});

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);
}


});

scottmartin
17 Jul 2012, 1:35 PM
In you original post, I would change the code to match my alternate approach ..

so ..



// id: 'MyTabPanelTest',
itemId: 'mytestpanel'
..
var mypanel = Ext.ComponentQuery.query('#mytestpanel');

// id: 'TaskGridPanel',
itemId: 'taskgridpanel'

var mygrid = Ext.ComponentQuery.query('#taskgridpanel');
mypanel.add(mygrid);


Where you are creating an instance of your defines? do you use Ext.create or use xtype?

alias: 'widget.mytabpanel',


xtype: 'mytabpanel' // panel


alias: 'widget.taskgridpanel',


xtype: 'taskgridpanel' // grid


Scott.

jugg1es
17 Jul 2012, 2:01 PM
I've found that architect is very difficult to use for this sort of thing. I spent most of my time fighting Architect than I did creating. The read-only files made it very difficult create applications quickly. I recommend downloading Aptana and doing all of your development directly in the files. Ext JS is a fantastic framework, has good documentation, and is very easy to use without an IDE. If you ditched architect, you could copy the code that scottmartin posted verbatim without any trouble.

CX2
17 Jul 2012, 3:00 PM
I ran this

onButtonClick: function(button, e, options) { console.log("test");
var mypanel = Ext.ComponentQuery.query('#mytestpanel');
var mygrid = Ext.ComponentQuery.query('#taskgridpanel');
mypanel.add(mygrid);
},




and get
Uncaught TypeError: Object has no method 'add'

Assuming this is due to the fact I do not have xtype: 'mytabpanel' or xtype: 'taskgridpanel'

I am coming from Touch and so I usually get components by setting their id and caling Ext.getCmp

I initially had

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

and it added the blank tabs fine, so I assumed I could then just add my gridPanel in the same manner.

I am not creating instances of my defines...Not even sure how to in Sencha Architect.

scottmartin
17 Jul 2012, 3:42 PM
Most experienced developers will use an editor and get to it ...

I will use Architect to prototype quick layouts in some instances, but not for development of app.

Scott.

CX2
17 Jul 2012, 4:09 PM
Yeah...I always seem to be editing by hand at some point with Architect. Will give it a whirl, thanks for the responses though!

aconran
18 Jul 2012, 1:01 PM
The problem is due to the differences between an instance of a class and subclass itself. I've answered the question in the Architect forum.
http://www.sencha.com/forum/showthread.php?231111-Add-a-GridPanel-to-a-Tab-using-Architect-(Ext)