my problem is that I can't catch any event on pressing enter key while "inside" a numberfield.
I started by listening to action event, then tried to catch keyup event and check the keycode. None of those are working for me:
xtype: 'numberfield',
cls: 'bordered_input',
label: '',
name: 'value',
itemId: 'stavif_value',
listeners: {
keyup: function(numberfield, e){
if(e.event.keyCode == 13)
console.log('KEYUP CATCHED');
},
action: function(){
console.log('ACTION CATCHED');
}
}
Then I moved the numberfield inside a form.Panel and tried to catch the beforesubmit event:
var form = Ext.create('Ext.form.Panel', {
submitOnAction: true,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'numberfield',
cls: 'bordered_input',
label: '',
name: 'hodnota',
itemId: 'stavif_hodnota'
}
],
listeners: {
beforesubmit: function(form, values, options) {
console.log('BEFORESUBMIT inside FIELDSET');
}
}
}
],
listeners: {
beforesubmit: function(form, values, options) {
console.log('BEFORESUBMIT inside form.Panel');
}
}
});
I've put the 'listeners' thingy to fieldset aswell (originally I've had it without the fieldset), just to be sure that I'm not missing anything. However I didn't succeed once again.
What makes me confused is that when I use textfield instead of numberfield I am able to catch the keyup and the action events (dunno about the beforesubmit though, didn't try that).
There is a special key event listener for numberfield. Try
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
console.log('Enter pressed');
}
}
}
Related
LoginScreen.js
this.props.navigator.push({
screen: "auxxa.LandingScreen",
passProps: { login: true },
overrideBackPress: true,
navigatorStyle: {
navBarHidden: true
}
});
LandingScreen.js
constructor(props) {
super(props);
this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
// this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
this.state = {
size: { width, height },
tileData: null,
isLoading: true,
user_id: null,
refetching: false,
access_token: null
};
}
componentWillMount() {
BackHandler.addEventListener(
"hardwareBackPress",
this.handleBackButtonClick
);
}
handleBackButtonClick() {
console.log("check login " + this.props.login);
if (this.backPressed && this.backPressed > 0) {
if (this.props.login) {
console.log("login");
RNExitApp.exitApp();
} else {
console.log("root");
this.props.navigator.popToRoot({ animated: false });
return false;
}
}
this.backPressed = 1;
this.props.navigator.showSnackbar({
text: "Press one more time to exit",
duration: "long"
});
return true;
}
componentDidMount() {
BackHandler.removeEventListener(
"hardwareBackPress",
this.handleBackButtonClick
);
}
I used react-native-navigation from Wix for my app nevigation purpose.Here I have attached login screen and landing screen.after successful login app navigate to landing screen.after that I click back button It will return to login screen.I need to avoid that.How can I do that thing? I tried to exit from the app.But it also not working properly.
Please help me if some one know this.Thanks in advanced.
Use this call in handleBackButtonClick function and why are you removing the listener in componentDidMount ?
this.props.navigator.resetTo({ screen: 'example.ScreenThree'})
.
Uncomment this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this)); on your constructor to listen to navigation events
and add the navigationEvent listener method
onNavigatorEvent(event: NavigatorEvent) {
if (event.type === 'NavBarButtonPress') {
if (event.id === 'skill_information') {
// Add here whatever you would like to do (this.handleBackButtonClick() for example)
}
}
In sencha touch we have a little problem with a messagebox. It looks that it's something with android 4.3. On the most devices it's works perfect, but on a device with android 4.3, when the user press the button, the messagebox will not disappear.
Ext.define('TestBuild.view.MyPanel', {
extend: 'Ext.Panel',
config: {
items: [
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton'
}
],
listeners: [
{
fn: 'onMybuttonTap',
event: 'tap',
delegate: '#mybutton'
}
]
},
onMybuttonTap: function(button, e, eOpts) {
console.log("Test");
Ext.Msg.alert("TEST");
}
});
I found the solution:
Add Following line before showing Alert Box:
Ext.Msg.defaultAllowedConfig.showAnimation = false;
I found a solution:
Ext.define('Ext.Component', {
override: 'Ext.Component',
show: function (animation) {
return this.callParent([false]);
},
hide: function (animation) {
return this.callParent([false]);
}
});
I found the solution on http://www.sencha.com/forum/showthread.php?262324-Sencha-Messagebox-and-Overlay-Problems-on-HTC-One-Browser
I got a solution here: https://www.sencha.com/forum/showthread.php?284450-MessageBox-cannot-be-closed-under-some-circumstances.&p=1040686&viewfull=1#post1040686
Ext.override(Ext.MessageBox, {
hide: function() {
if (this.activeAnimation && this.activeAnimation._onEnd) {
this.activeAnimation._onEnd();
}
return this.callParent(arguments);
}
});
This works for me for touch 2.4.2
I have a form and there is a button that submits it. I wish that submit would be executed only on tap on 'Register' button. But when user inputs some text in any textfield and presses "Go" (aka "Enter") button. The form submits and I can do nothing about it.
This behavior is noticed on Samsung Galaxy S (GT i9000) on Android v2.3.6. But HTC with Android 4 behaves as I wish.
The submitOnAction:false doesn't help.
beforesubmit too. Any of solutions in code listing don't work.
I just don't want the form to submit in any other way except pressing 'Register' button!
File /view/userRegistration/FormPanel.js
Ext.define('My.view.userRegistration.FormPanel', {
extend: 'My.view.components.FormPanel',
xtype : 'userRegistrationForm',
config: {
standardSubmit : false,
submitOnAction : false,
listeners: {
beforesubmit: function(form, values, options, eOpts){
console.log('before submit fired');
return false; // returning false doesn't help
},
'> field': {
keyup: function(fld, e){
//13 = user tapped 'return' button on keyboard
//10 = user tapped 'hide keyboard' on keyboard
if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
e.stopEvent();
fld.element.dom.blur();
}
}
}
},
items : [
{
xtype: 'textfield',
name : 'firstName',
required: true,
listeners: {
action: function(field, e, eOpts) {
e.stopEvent();
return false;
},
keyup: function(field, e) {
if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
// GO pressed on "firstName"
e.stopEvent();
field.element.dom.blur();
return false;
}
}
}
},
{
xtype: 'button',
text : 'Register',
listeners: {
tap: function(button) {
var form = button.parent;
if (form.isValid()) {
form.onSubmit();
}
}
}
}
]
}
});
File /view/components/FormPanel.js
Ext.define('My.view.components.FormPanel', {
extend : 'Ext.form.Panel',
onSubmit: function() {
var fieldValues = this.getValues();
// Sending fieldValues via AJAX
},
isValid: function(args) {
// Validating values
}
});
The problem was in the onSubmit() method. It is #private in sencha-touch-all-debug.js:
Ext.define('Ext.form.Panel', {
// #private
onSubmit: function(e) {
var me = this;
if (e && !me.getStandardSubmit()) {
e.stopEvent();
} else {
this.submit();
}
}
}
So it is absolutely incorrect to override onSubmit() in child classes. More correct way.
File /view/components/FormPanel.js
Ext.define('My.view.components.FormPanel', {
extend : 'Ext.form.Panel',
config: {
standardSubmit: false,
listeners: {
beforesubmit: function(form, values, options, eOpts) {
// Do something with data. Send it via AJAX, for example
return false; // returning false to prevent real form.submit();
}
}
}
}
And the button in the form should just call form.submit();.
File /view/userRegistration/FormPanel.js
{
xtype: 'button',
text : 'Register',
handler: function() {
var form = button.parent;
if (form.isValid()) {
form.submit();
}
}
}
You don't really need to override the FormPanel for that. In the controller, you can just prevent the action from field to execute and bubble up.
Ext.define('TestApp.controller.Login', {
extend: 'Ext.app.Controller',
config: {
control: {
'field': {
action: 'onFieldAction'
}
}
},
onFieldAction: function(field, e) {
// Stop event here
e.stopEvent();
e.stopPropagation();
}
});
There is a gotcha that i encountered while doing this. I've accidentally overridden the default initialize function of my FormPanel. Every thing will not work if you do this
Ext.define('TestApp.view.Login', {
extend: 'Ext.form.Panel',
xtype: 'loginform',
config: {
...
}
initialize: function(config) {
this.callParent(arguments); // Nothing will work without this line
...
}
});
Just in case someone needs to disable the Enter key on keyboard or the Go button in the softkeyboard, I found the following solution:
Ext.define('App.view.Login', {
extend: 'Ext.form.Panel',
xtype: 'login',
config: {
....
},
getElementConfig: function() {
var config = this.callParent();
config.children.pop();
return config;
}
});
document.addEventListener("keypress", onGoKeyDown, false);
function onGoKeyDown(e) {
console.log(e);
if(e.srcElement.localName == 'input') {
if (e.keyCode === 13 || e.keyCode === 10) {
e.preventDefault();
}
}
}
I don't know if anyone is still looking for a solution, but I came up with a very simple trick - trap the input and prevent the form submission even if the user hits 'Go' or any button/key other than the one you want. To do that just place a listener in every entry field and listen for the 'blur' event. This will trap any action when leaving the field (blur). Inside the blur listener event do a focus() on the next field (like tabbing through the form, i.e. if you are in field 1 send the focus to 2 and so on) until you arrive at your desired submit or register button. Once there, you can do your processing, submit, etc. This worked for me!
Now, if we want to call Ajax method on submit by either clicking Submit button or by enter action then,
submitOnAction : true in the FormPanel config
Add this.callParent(arguments)in initialize method in case we are overriding initialize method of FormPanel
Override submit method of FormPanel to add Ajax Call
Listen to tap event of Submit button to add Ajax Call
My View (MyFormPanel)
var controllers = Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
username: "username"
},
},
launch: function () {
alert('Controller launched');
},
init: function () {
alert('Controller init');
},
myaction : function (options) {
alert('options');
var username = options.username;
this.render ({
xtype: 'MyATM',
username: username})}
});
var formPanel = Ext.create('Ext.form.Panel', {
fullscreen: true,
scrollable: 'vertical',
layout: {
align: 'center',
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Login Form'
},
{
xtype: 'fieldset',
items: [
{
xtype: 'fieldset',
title:'Enter user name & password',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '50%'
},
items: [
{
xtype: 'textfield',
name : 'username',
label: 'User Name',
allowBlank:false,
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
allowBlank:false,
useClearIcon: false
},
{
xtype: 'checkboxfield',
required:false,
id: 'RememberMe',
name: 'RememberMe',
label: 'Remember Me',
labelWidth: '50%'
},
{
xtype: 'button',
ui: 'confirm-round',
text: 'Log In' ,
handler: function() {
//Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
Ext.ControllerManager.get('formcontroller').ControllerMethod({myaction: myaction});
}
}
]
}],
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
});
My controller (FormController)
Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
username: "username"
},
},
launch: function () {
alert('Controller launched');
},
init: function () {
alert('Controller init');
},
myaction : function (options) {
alert('options');
var username = options.username;
this.render ({
xtype: 'MyATM',
username: username})}
});
I am using Sencha touch2 with Phonegap 1.4 on android 2.3. When i try to move view to controller on Login button click on handler function to invoke controller , i am getting error , Ext.dispatch is not defined as function .
Tell me the actual way how to move view to controller and vice versa.
Thanks
Ext.dispatch is not the recommended way to use in Sencha Touch 2. It might be removed...
Anyway, the best way to listen to & handle events on your views from controllers is:
Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
loginButton: "#login-button" // set an id for your login button and this ref works
},
control: {
loginButton: {
tap: 'handleLogin',
}
handle_login: function(){whatever you want to do here}
}
And in Architect...
a. you go to the button's config, and
b. search for Event Handlers, and
c. you press the [+] button on the right.
d. Add a "basic handler"
e. Choose the TAP event
f. Give it a name (onButtonSendTap or whatever)
g. press DONE
h. right mouse
i. Convert to action
j. Choose [New Controller] or an existing controller
k. If you chose new controller give it a name
and voilla, you have your handler in the controller.
And in Architect...
a. you go to the button's config, and
b. search for Event Bindings, and
c. you press the [+] button on the right.
d. Add a "basic handler"
e. Choose the TAP event
f. Give it a name (onButtonSendTap or whatever)
g. press DONE
h. right mouse
i. Convert to action
j. Choose [New Controller] or an existing controller
k. If you chose new controller give it a name
and voilla, you have your handler in the controller.
I want to build an android app which is written in Sencha with Phonegap.
Works fine but Ext.List is not displayed. Does anyone had the same problem and a solution?
I have a TabPanel with 5 Elements. One of them is Home which is a Ext.List. The data from the list comes from a store. This is working fine in the browser but if I try to build it for Android with PhoneGap this list does not appear. Just the HTML which is mentioned further down.
var mainMnu = new Ext.TabPanel(
{tabBar : {
dock : 'bottom',
layout : {
pack : 'center'
}
},
items : [
{
title : 'Home',
html : '<h1>Welcome Home</h1>',
iconCls : 'home',
cls : 'card1',
dockedItems: [pnlLstHome]
}, .....
lstHome = new Ext.List( {
grouped : false,
indexBar : false,
id : 'idLstHome',
cls: 'homeList',
store : lstStoreMnu,
itemTpl : '<div class="list">{item}</div>',
onItemDisclosure : false,
onItemSelect : function(record, btn, index) {
// console.log(record.data);
switch (record.data.item) {
case constStoreMnuGalerie:
pnlLstHome.setActiveItem('idPnlGalerie');
// detailPanel.update(record.data);// detailPanel.doLayout();
break;
case constStoreMnuTrends:
pnlLstHome.setActiveItem('idPnlTrends');
// detailPanel.update(record.data);
break;
default:
console.log('You clicked Unknown Item!');
return;
}
}
});
DataStore
lstStoreMnu = new Ext.data.Store({
model: 'list',
//sorters: 'item', //Sortierung
getGroupString : function(record) {
return record.get('item')[0];
},
data: [
{ item: constStoreMnuGalerie},
{ item: constStoreMnuTrends},
{ item: constStoreMnuPreise},
{ item: constStoreMnuProdukte},
{ item: constStoreMnuOpen},
{ item: constStoreMnuShare}
]
});
You have added the list as a dockedItem
Try adding it as an item ie
{
title : 'Home',
// html : '<h1>Welcome Home</h1>',
iconCls : 'home',
cls : 'card1',
items: [pnlLstHome]
}
Hope it will help...