PDA

View Full Version : Ref not working with controller actions



ali.abbas
30 Jul 2013, 1:20 AM
Ext.define('conta.view.LoginViewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.loginviewport',


requires: [
'conta.view.HeadToolbar'
],


layout: {
type: 'border'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'headtoolbar',
region: 'north'
},
{
xtype: 'panel',
region: 'center',
layout: {
align: 'stretch',
defaultMargins: {
top: 5,
right: 0,
bottom: 5,
left: 0
},
type: 'vbox'
},
title: 'Login',
titleAlign: 'center',
items: [
{
xtype: 'container',
layout: {
align: 'center',
defaultMargins: {
top: 10,
right: 0,
bottom: 5,
left: 0
},
type: 'vbox'
},
items: [
{
xtype: 'image',
src: 'resources/images/googleSignIn.png'
},
{
xtype: 'label',
text: 'OR'
}
]
},
{
xtype: 'form',
border: false,
layout: {
align: 'center',
defaultMargins: {
top: 5,
right: 5,
bottom: 5,
left: 5
},
type: 'vbox'
},
bodyPadding: 10,
items: [
{
xtype: 'textfield',
fieldLabel: 'Email',
emptyText: 'Email'
},
{
xtype: 'textfield',
fieldLabel: 'Password',
emptyText: 'Password'
},
{
xtype: 'button',
text: 'SignIn'
}
]
}
]
}
]
});


me.callParent(arguments);
}


});


Ext.define('conta.controller.UserController', { extend: 'Ext.app.Controller',


views: [
'LoginViewport'
],


refs: [
{
ref: 'signInButton',
selector: 'loginviewport > panel > form > button',
xtype: 'Ext.button.Button'
}
],


onButtonClick: function(button, e, eOpts) {
console.log("Click without using ref");
console.log(this.getSignInButton());
},


onButtonClickWithRef: function(button, e, eOpts) {
console.log("Click with using ref");
console.log(this.getSignInButton());
},


init: function(application) {
this.control({
"loginviewport > panel > form > button": {
click: this.onButtonClick
},
"signInButton": {
click: this.onButtonClickWithRef
}
});
}


});


In above mentioned code i created a button 'SignIn'. Then in UserController i wanted to add action on click of this button(SignIn). I added ref 'signInButton' in controller that point to signin button and then added action based that ref(signInButton) but event is not working. Then i created another action and pasted componentQuery from ref(signInButton) to controlQuery of action (onButtonClick) and it worked.

The output of above mentioned code.



> Click without using ref UserController.js?_dc=1375175142269:32 (http://localhost:8010/conta/app/controller/UserController.js?_dc=1375175142269)

> A {xtype: "button", text: "SignIn", initialConfig: Object, events: Object, autoGenId: true…} UserController.js?_dc=1375175142269:33 (http://localhost:8010/conta/app/controller/UserController.js?_dc=1375175142269)

tobiu
30 Jul 2013, 7:09 AM
Correct, refs are not yet supported to be used inside this.control - queries.

I already created a feature request for it (EXTJSIV-6575), since this should work with Sencha Touch.

Right now, refs can only be used to easier access certain components inside the methods of the controller. E.G. if you want to get the button inside a method that gets executed on grid rowclick, you can use:



var button = this.getSignInButton();


Best regards
Tobias

ali.abbas
30 Jul 2013, 9:39 PM
ohhh i see, actually i developed a sencha touch application earlier and that was working. So i thought it should be working in extjs as well. Hope feature will come soon. Must needed i think :)

Thanks,
Ali Abbas