PDA

View Full Version : How to make a drop-down login function without use menu



zhaof2
26 Apr 2012, 10:54 AM
Hi, I'd like to make a drop-down login function,like sencha login,but when I use the menu in the toobar,some event was disabeled, for example,the tab key event,the enter key event, my code as fllow:



dockedItems : [ {
itemId : 'toolbar',
xtype : 'toolbar',
height : 38,
items : [ {
xtype : 'component',
flex : 0.9
}, {
xtype : 'button',
text : 'login',
menu : {
xtype : 'menu',
items : [ {
xtype : 'form',
height : 200,
itemId : 'headLoginForm',
width : 140,
items : [ {
xtype : 'label',
text : 'Username',
style : "padding-left:5px;line-height:30px;"
}, {
xtype : 'textfield',
itemId : 'loginUserName',
// enableKeyEvents : true,
width : 120,
style : "margin-left: 5px;",
height : 23
}, {
xtype : 'label',
text : 'Password',
style : "padding-left:5px;line-height:40px;"
}, {
xtype : 'textfield',
inputType : 'password',
itemId : 'loginPasswd',
style : "margin-left: 5px;",
// listeners : {
// specialkey : function(field, e) {
// if (e.getKey() == e.ENTER) {
// var form = this.up('form').getForm();
// form.submit()
// }
// }
// },
width : 120,
height : 23
}, {
xtype : 'button',
text : 'submmit',
type : 'submmit',
itemId : 'btnSubmitLogin',
style : "top:20px;left:5px;",
height : 33
} ],
} ]
}
}, {
xtype : 'component',
flex : 0.1
} ]
} ],


So,anything other component to implement this function?

Another question is when I use MVC, how can I write my submit code in controller when I listern keyboard Enter key Event,because I want to share the sumbit code in controller, my current submit code as follow :


init : function() {
this.control({
'#btnSubmitLogin': {
click: this.submitUserLogin
}/*,
'#headLoginForm' : {
submit : this.submitUserLogin
}*/
});
},


submitUserLogin : function(button) {
var menu = button.up('#headLoginForm'),
user = menu.down('#loginUserName'),
pwd = menu.down('#loginPasswd');

var userValue = user.getValue();
var pwdValue = pwd.getValue();
var postValue = { "user" : userValue , "password" : pwdValue };
Ext.Ajax.request({
url: '/login.json',
success: function (){
alert('All good!');
},
failure: function (){
alert('Fail...');
},
headers: {
'Content-Type' : 'application/json'
},
method : 'POST',
params : Ext.JSON.encode(postValue)
});
}


Thanks.

slemmon
26 Apr 2012, 6:07 PM
Is the tab issue with 4.1? It might be same issue as here:
http://www.sencha.com/forum/showthread.php?192952-Menu-with-child-of-toolbar-with-textfield-will-not-allow-spaces

I (http://www.sencha.com/forum/showthread.php?192952-Menu-with-child-of-toolbar-with-textfield-will-not-allow-spaces) have a menu from a button with some textfields in there and I can't tab between fields, moving the cursor off the field blurs it, and I can't type space without a hack.