How does one get access to data and components in other tabs?

[denisputnam]

If you have one tab the needs the data or component or model from another tab, what is the best way to do that in Architect?

Would that be done through the controller?

What I would like to do is read the contents of the spotPrices grid and apply updates to the what grid.

Ext.define('MyApp.view.MyStuffTabPanel', {
extend: 'Ext.tab.Panel',


height: 503,
resizable: true,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'panel',
height: 237,
resizable: true,
layout: {
type: 'fit'
},
title: 'What',
items: [
{
xtype: 'gridpanel',
height: 503,
autoScroll: true,
resizable: true,
title: 'WhatGridPanel',
store: 'MyWhatStore',
viewConfig: {
height: 503
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'what',
text: 'What'
},
{
xtype: 'numbercolumn',
dataIndex: 'amount',
text: 'Amount'
},
{
xtype: 'gridcolumn',
dataIndex: 'unit',
text: 'Units'
}
]
}
]
},
{
xtype: 'panel',
height: 503,
resizable: true,
layout: {
type: 'fit'
},
title: 'SpotPrices',
items: [
{
xtype: 'gridpanel',
height: 503,
autoScroll: true,
resizable: false,
title: 'SpotPricesGridPanel',
forceFit: true,
store: 'MySpotPricesStore',
viewConfig: {
height: 503,
autoScroll: true,
resizable: false
},
columns: [
{
xtype: 'gridcolumn',
maxWidth: 50,
width: 50,
defaultWidth: 50,
dataIndex: 'symbol',
text: 'Symbol'
},
{
xtype: 'gridcolumn',
maxWidth: 50,
defaultWidth: 50,
dataIndex: 'type',
text: 'Type'
},
{
xtype: 'gridcolumn',
maxWidth: 50,
defaultWidth: 50,
dataIndex: 'currency',
text: 'Currency'
},
{
xtype: 'datecolumn',
maxWidth: 125,
defaultWidth: 125,
dataIndex: 'date',
flex: 2,
text: 'Date',
format: 'Y-m-d H:i:s'
},
{
xtype: 'datecolumn',
maxWidth: 125,
defaultWidth: 125,
dataIndex: 'time',
flex: 2,
text: 'Time',
format: 'Y-m-d H:i:s'
},
{
xtype: 'numbercolumn',
maxWidth: 50,
defaultWidth: 50,
dataIndex: 'rate',
text: 'Rate'
},
{
xtype: 'numbercolumn',
maxWidth: 65,
defaultWidth: 50,
dataIndex: 'bid',
text: 'Bid'
},
{
xtype: 'numbercolumn',
maxWidth: 65,
defaultWidth: 65,
dataIndex: 'ask',
text: 'Ask'
},
{
xtype: 'numbercolumn',
maxWidth: 65,
defaultWidth: 65,
dataIndex: 'high',
text: 'High'
},
{
xtype: 'numbercolumn',
maxWidth: 65,
defaultWidth: 65,
dataIndex: 'low',
text: 'Low'
},
{
xtype: 'numbercolumn',
maxWidth: 70,
defaultWidth: 70,
dataIndex: 'oneDayPrice',
text: 'Onedayprice'
},
{
xtype: 'numbercolumn',
maxWidth: 85,
defaultWidth: 85,
dataIndex: 'oneDayChangePercent',
text: 'PercentChange'
},
{
xtype: 'numbercolumn',
maxWidth: 80,
defaultWidth: 80,
dataIndex: 'oneDayChange',
text: 'Onedaychange'
}
]
}
]
},
{
xtype: 'panel',
height: 503,
resizable: true,
title: 'Tab 3'
}
]
});


me.callParent(arguments);
}


});

Ext.define('MyApp.controller.MyStuffController', {
extend: 'Ext.app.Controller',


models: [
'MySpotPricesModel'
]
});

[aconran]

To open the project, you need the entire project archive. The .xds file is simply the entry point to the project, the .xda is the whole thing. You can create one by opening the project and going to file -> archive project.

Controllers expose a method called getStore. You can access your store that has been registered with the Application in any Controller.

For example if your store is named "Stuff". You could access it via

this.getStore('Stuff')

I suggest that you take a read through some of the additional documentation available in Ext JS and Sencha Touch docs. While it isn't customized to Architect specifically it can help you understand some of the nuances (and also some of the stuff that Architect is doing for you already for free!).
http://docs.sencha.com/ext-js/4-1/#!...n_architecture