PDA

View Full Version : Error for dynamic text in nested view, non-nested view is ok.



deathgod86
27 Jan 2014, 8:01 AM
Hi,

I am having issue on dynamic text for nested view.
However, the same code in non-nested view is ok.

Info:


OS: Windows 7
Browser: Safari 5.1.7
Running in normal desktop Win7 Safari


Directory Structure


app
|-- controller
| |-- LabelCtrl.js
|
|-- store
| |-- LabelStore.js
|
|-- view
| |-- Viewport.js
| |-- TestView.js
|
|-- Application.js


app.js


var thisApp = null;

Ext.application({
name: 'testextjs',
extend: 'testextjs.Application',
/* Understand that by default is false.
* Just an extra step to make sure, so set it to false.
* So that it set this into "thisApp" var before creating Viewport.
*/
autoCreateViewport: false,

launch: function() {
thisApp = this;

/* log successful with correct label
*/
console.log(thisApp.getController('LabelCtrl').getLabel('SysNm', 'EN_UK'));

/* Understanding as above explanation
*/
Ext.create('testextjs.view.Viewport');
}
});


Application.js


Ext.define('testextjs.Application', {
name: 'testextjs',

extend: 'Ext.app.Application',

requires: [
'Ext.draw.Text'
],

views: [
'TestView'
],

controllers: [
'LabelCtrl'
],

models: [
],

stores: [
'testextjs.store.LabelStore'
]
});


Viewport.js


Ext.define('testextjs.view.Viewport', {
extend: 'Ext.container.Viewport',

requires:[
'Ext.layout.container.Fit',
'testextjs.view.Main'
],

layout: {
type: 'fit'
},

items: [{
/* Start ---
* When using following 2 lines, get label from controller
* (and controller get actual label from store),
* The label is displayed successful with Test ExtJS.
xtype: 'text',
text: thisApp.getController('LabelCtrl').getLabel('SysNm', 'EN_UK')
--- End */
/* Start ---
* When doing in this way,
* calling another view file with same code.
* Then it is not working.
*/
xtype: 'TestView' // this is not working and show error. -- 2
}]
});


TestView.js


Ext.define('testextjs.view.TestView', {
extend: 'Ext.container.Container',

xtype: 'TestView',
id: 'TestView',

items: [{
xtype: 'text',
/* Start ---
* When calling from Viewport, this static text "asdasd" is displayed.
text: 'asdasd'
--- End */
/* Start ---
* When calling via controller to get actual label from store,
* This following code is not working.
* Error: thisApp is null.
* But why directly use in Viewport was ok ?
*/
text: thisApp.getController('LabelCtrl').getLabel('SysNm', 'EN_UK')
}]
});


LabelCtrl.js


Ext.define('testextjs.controller.LabelCtrl', {
extend: 'Ext.app.Controller',

getLabel: function(id, lang) {
var store = Ext.getStore('testextjs.store.LabelStore');
var index = store.findExact('id', id);

if(index == -1) {
return '';
}

if(lang == 'EN_UK') {
return store.getAt(index).raw.EN_UK;
} else if(lang == 'EN_US') {
return store.getAt(index).raw.EN_US;
}

return '';
}
});


LabelStore.js


Ext.define('testextjs.store.LabelStore', {
extend: 'Ext.data.ArrayStore',
config: {
fields: ['id', 'EN_UK', 'EN_US'],

data: [
{ id: 'SysNm', EN_UK: 'Test ExtJS' },
{ id: 'SysVer', EN_UK: 'v1.0' }
]
}
});

riku351
27 Jan 2014, 10:07 AM
Ext.define('testextjs.store.LabelStore', { extend: 'Ext.data.ArrayStore', config: { fields: ['id', 'EN_UK', 'EN_US'], data: [ [ 'SysNm', 'Test ExtJS' ,'US_Test1'], [ 'SysVer', 'v1.0' ,'US_Test2'] ] }});

deathgod86
27 Jan 2014, 10:41 AM
Thanks for your prompt response.
But it is still not working.

The problem is not at the store.
The problem is the variable "thisApp" is null / undefined when it is inside nested view.

deathgod86
5 Feb 2014, 8:59 PM
After researched over Google, calling controller from view is not appropriate way.
The correct way should be using listener / control in controller to listen on view boxready / beforerender.
Then, update the text / label accordingly.