PDA

View Full Version : Get form for validation in a view from the controller



whisher
18 Jan 2012, 3:18 AM
Hi,
In my model I've set up


Ext.define('SA.model.User', {
extend: 'Ext.data.Model',
fields: ['id','uname', 'email'],
validations: [{
type: 'length',
field: 'uname',
min: 1
}, {
type: 'length',
field: 'email',
min: 1
}]
});


so in my controller I've to check if data is valid
how I can get the form from my controller



Ext.define('SA.controller.Users', {
extend: 'Ext.app.Controller',
models: ['User'],
stores: [
'Users'
],
views: [
'user.List',
'user.Edit',
'user.Insert'
],
init: function() {
this.control({
'userlist': {
itemdblclick: this.editUser,
itemclick: this.enableDeleteButton
},
'userlist > toolbar > button#btnAdd': {
click: this.showInsertUser
},
'userinsert button[action=save]': {
click: this.insertUser
},
'useredit button[action=save]': {
click: this.updateUser
}
});
},


insertUser: function(button) {
console.dir(this.getUserInsertView());
// var win = button.up('window'),
//form = win.down('form');
//THIS DOESN'T WORK of course :)
//if (form.isValid()) {
//win.close();
//alert('oii');
}

});



My view


Ext.define('SA.view.user.Insert', {
extend: 'Ext.window.Window',
alias : 'widget.userinsert',

title : 'Insert User',
layout: 'fit',
autoShow: true,

initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'uname',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];

this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];

this.callParent(arguments);
}
});

friend
18 Jan 2012, 4:49 AM
In your Controller, right above your init() method, you can add a 'refs' array:



refs: [{
ref: 'userInsert',
selector: 'userinsert'
}],



In your Controller, you'll then 'auto-magically' have access to method this.getUserInsert(), which returns a reference to your userinsert widget. In your click handler method this.insertUser(), you can then do something like this:



var myForm = this.getUserInsert().down('form');
if (!myForm.getForm().isValid()) {
//complain to user.
}

whisher
18 Jan 2012, 11:42 AM
Thanks as usual :) for the reply.
Now I've got the form but this


myForm.getForm().isValid()

give me always true :(

whisher
19 Jan 2012, 3:44 AM
Thanks as usual :) for the reply.
Now I've got the form but this


myForm.getForm().isValid()

give me always true :(

I've worked it out with adding
allowBlank: false
in my form


Ext.define('SA.view.user.Insert', {
extend: 'Ext.window.Window',
alias : 'widget.userinsert',

title : 'Insert User',
layout: 'fit',
autoShow: true,

initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'uname',
fieldLabel: 'Name',
allowBlank: false
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email',
allowBlank: false
}
]
}
];

this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];

this.callParent(arguments);
}
});