PDA

View Full Version : Sencha Designer / Ext JS 4 MVC / Event Listener / getLayout



lee.morris
8 Mar 2012, 11:50 AM
Sencha Designer Build: 309
Ext-JS 4 version 4.0.7

Sumamry:
All actions are performed in Sencha Designer:
Created a panel class with card layout. The card layout contains a toolbar with two buttons: next and prev.
Created a controller and added controller action to listen for a button click for the next button.
Added the panel to the controller "views".

Code:

/*
* File: app/view/TagsPanel.js
*
* This file was generated by Sencha Designer version 2.0.0.
* http://www.sencha.com/products/designer/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Designer does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/


Ext.define('DataDictionary.view.TagsPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.tagsPanel',


height: 700,
itemId: 'tags-panel',
width: 900,
activeItem: 0,
layout: {
type: 'card'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
itemId: 'nextButton',
text: 'Next'
},
{
xtype: 'button',
text: 'Prev'
}
]
}
],
items: [
{
xtype: 'panel',
itemId: 'first',
title: 'first'
},
{
xtype: 'panel',
itemId: 'second',
title: 'second'
}
]
});


me.callParent(arguments);
}


});
/*
* File: app/controller/ReportNav.js
*
* This file was generated by Sencha Designer version 2.0.0.
* http://www.sencha.com/products/designer/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Designer does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/


Ext.define('DataDictionary.controller.ReportNav', {
extend: 'Ext.app.Controller',


views: [
'TagsPanel'
],
init: function() {
this.control({
"#nextButton": {
click: this.goNext
}
});
},


goNext: function(button, e, options) {
var tagv = this.getTagsPanelView();
Ext.MessageBox.alert(Ext.getClassName(tagv));
tagv.getLayout().next();
}


});




Observation:
When the "next" button is clicked, the message box displays:
DataDictionary.view.TagsPanel

The Chrome console displays:

Uncaught TypeError: Object function () { return this.constructor.apply(this, arguments); } has no method 'getLayout'

Ext.define.goNextReportNav.js:33 (http://tbdd/dd/app/controller/ReportNav.js?_dc=1331236007071)
fireext-all-debug.js:10658 (http://tbdd/ext-4.0.7-gpl/ext-all-debug.js)
Ext.define.dispatchext-all-debug.js:24045 (http://tbdd/ext-4.0.7-gpl/ext-all-debug.js)
Ext.override.fireEventext-all-debug.js:24020 (http://tbdd/ext-4.0.7-gpl/ext-all-debug.js)
Ext.define.fireHandlerext-all-debug.js:29510 (http://tbdd/ext-4.0.7-gpl/ext-all-debug.js)
Ext.define.onClickext-all-debug.js:29502 (http://tbdd/ext-4.0.7-gpl/ext-all-debug.js)
(anonymous function)
wrap




Finally the questions:
What am I doing wrong:) I am attempting to use the button to move to the next card.

Cheers

lee.morris
10 Mar 2012, 9:59 AM
An update:
var prof = this.getProfileView();
prof.getLayout().setActiveItem('user-account-settings');

Instead of:
var prof = this.getProfile();
prof.getLayout().setActiveItem('user-account-settings');

Has the same results.

aconran
12 Mar 2012, 9:34 AM
Did you mean to setup a reference with autoCreate: true for your profile?