I'm trying to use an event delegation to add to the store the label of the checkbox I'm checking in Sencha.
How could I pass the label of the checkbox as a parameter? Am I doing well the delegation? I have an error like 'Unexpected token'.
I really have to put the function apart because I want to write like 30 checkboxes, and everyone with the same listener when is checked.
Thank you so much in advance.
//this chekbox code
{
xtype: 'checkboxfield',
label: 'Noir',
listeners: {
check: anadir(label)
}
}
//This check function code
anadir: function(label) {
console.log("Añadiendo...");
var index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
storemisOpciones.add({
option: label
});
console.log(label + " se ha marcado");
index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
console.log(storemisOpciones.getAt(index));
storemisOpciones.sync();
}
Try defining listeners as (I don't think there check event in ExtJs):
listeners: {
change: function(control) {
anadir(control);
}
}
Related
I am building an ExtJS4 web application and there's a part there where I show a confirmation dialog to a user to confirm if the user wants to push through with the action. I use a programmatically generated MessageBox to ask the user and the user can click Yes or No.
Here is my code:
Ext.MessageBox.show({
title: alertHeader,
msg: alertMessage,
buttons: Ext.MessageBox.YESNO,
icon: Ext.MessageBox.WARNING,
cls: 'msgbox',
fn: function(btn){
//if user clicks yes, ask for override button
console.log('btn value = ' + btn);
if(btn ==='yes'){
//more code here
}
});
This works as intended, the program follows through with the appropriate actions based on the user selection (Yes or No). However, I want to add functionality wherein the user can simply press Y or N in the keyboard and the program will still execute as if Yes or No was actually pressed in the dialog.
However, I don't know how to go about adding a KeyEvent Listener to a MessageBox and the documentation is of little help.
Check Ext.util.KeyMap (and Ext.EventObject for key constants), also we have to set focus on our window to listen keyup events on it.
I create simple fiddle to illustrate how it works - Key map with message window.
Its not complete solution, but I guess rest you can do on your own.
As simple example you can do your logic directly on keypress and destroy myConfWindow or myConfWindow.down() to certain button and "click" it. But I guess that you want to use this message box in multiple places in your app, so its better to extend Ext.MessageWindow and add keymap there.
Attach this getKeyMapForKeyPressSubmit() method to your message box
'afterrender' : function() {
var map = this.getKeyMapForKeyPressSubmit();
}
And Method
getKeyMapForKeyPressSubmit : function (target, scope) {
var me = this;
return new Ext.util.KeyMap({
target : target,
binding : [{
key : 89, //Key for Y button - Ext.EventObject.Y
fn : function (key, e) {
//your logic for Yes button
}
}, {
key : 78, //Key for N button - Ext.EventObject.N
fn : function (key, e) {
//your logic for NO button
}
}
],
scope : scope
});
},
You can get a key map of MessageBox through getKeyMap. Add a new key listener to it in afterrender listener.
var myMsg = Ext.create('Ext.window.MessageBox', {
closeAction: 'destroy',
listeners: {
afterrender: function() {
this.getKeyMap().on(Ext.event.Event.Y, function() {
console.log("Yes");
}, this);
this.getKeyMap().on(Ext.event.Event.N, function() {
console.log("No");
}, this);
}
}
}).show({
title: 'Custom MessageBox Instance',
message: 'I can exist along with Ext.Msg'
});
I would like to remove the tool from my panel;
SO I have this code, when I add tool Ext.widget to my panel and then I would like to remove this just created tool, how can I do this. I haven't fount the removeTool method. and I tried to us remove method and remove it, but nothing; Here is the code:
if (...) {
var a = Ext.widget({
id: 'kuku',
xtype: 'tool',
type: 'close',
handler: Ext.Function.bind(me.close, me, [])
});
if (closable && !me.hasUICls('closable')) {
me.addClsWithUI('closable');
me.addTool(a);
}
} else {
if (Ext.getCmp('kuku') != null) {
me.remove("kuku", false); //here how can I remove??
me.doLayout();
}
}
If you are unable to remove using id, try using component ref. as arg... something like below
me.remove(Ext.getCmp('kuku'), false);
I need to change the ordinary title part of window the be editable for a moment. I tried the following approach, but it seems to fail in several ways. Could someone suggest me a better approach?
var header = window.getHeader();
header.setTitle(''); // Get rid of the original for now
var field = Ext.create('Ext.form.field.Text', {
name: 'Title',
allowBlank: false,
cls: 'myInput',,
value: 'Meh, just some text for now',
listeners : {
el : {
delegate : 'input',
click : function() {
field.focus(false); // Focus but do not select the text
field.selectText(0,0); // The previous failed, try to deselect like this
}
}
}
});
header.insert(0, field); // First, before the tools (several buttons there)
My problems with this are the following;
Without the listener part it is impossible to select the input field at all, all that happens is triggering the moving of the window. With the listener implementation though the contents of the input field get still selected for some reason (without the selectText from 0 to 0). Also it is impossible to use mouse to select parts of the contents because dragging still applies to the whole window, AND the listener implementation's "click" probably also ruins that approach. It is also impossible to move the cursor to specific spot by using mouse click.
So, how should one really go around implementing a usable html input field that replaces window title?
I've tried the following strategy that seems to work: when the mouse cursor enters the input field, disable window drag & drop, and restore it when it leaves.
Here's what it would give with your code:
var killDrag = true;
// Found this by looking into the code: window.dd is an Ext.util.ComponentDragger
// Someone had the good idea to comment that, in there...
window.dd.on({
// Ext.util.ComponentDragger has a beforedragstart event that can cancel the drag.
// Apparently no one had the good idea to mention this event in the API doc.
beforedragstart: function(dd, e) {
if (killDrag) {
return false;
}
}
});
var header = window.getHeader();
header.setTitle(''); // Get rid of the original for now
var field = Ext.create('Ext.form.field.Text', {
name: 'Title',
allowBlank: false,
cls: 'myInput',
value: 'Meh, just some text for now',
listeners : {
el : {
delegate : 'input',
mouseout: function() {
killDrag = false;
},
mouseenter: function() {
killDrag = true;
}
}
}
});
header.insert(0, field); // First, before the tools (several buttons there)
I have a Ext.field.TextArea in a Sencha Touch 2 app. I just want it to expand in height based on the text that it contains. How can I do this? It seems like such a basic/simple feature, but I can't find it in the API.
I'm using this component to display some static multi-line text -- is there another component that may be better suited for this task?
Any help is appreciated, thanks.
I solved it this way:
Ext.define('ParentsApp.component.TextAreaAutomaticRow', {
extend: 'Ext.form.Select',
xtype: 'textareaautomaticrow',
config: {
maxRows: 2,
autoHeight: true,
listeners: {
keyup: function (field, event) {
if (field.autoHeight) {
var numOfRows = field.getValue().split("\n").length;
if( numOfRows >= 2) {
numOfRows = numOfRows++;
field.setMaxRows( numOfRows );
} else if (numOfRows < field.getMaxRows()) {
field.setMaxRows( numOfRows + 1 );
}
}
}
}
},
});
Using form elements for non-form items is not an optimal solution.
I would recommend looking into just using a lightweight Ext.container.Container component, or maybe a Panel or Window if you need fancier chrome around it.
I have a simple radio button:
new Ext.form.Radio({
id: 'ptype',
boxLabel:'Yes',
name: 'price_type',
value: 1
})
However Im having trouble adding a on click event ot it.
I usually use:
listeners: {
click: function (a,e) {
//event
}
}
As a config parameter, however it does not seem to work in this case.
Any advice appreciated, thanks.
Radio and checkboxes do not have a click event -- I believe you want the check event instead. Your listener should look like:
listeners: {
check: function (ctl, val) {
// val is the new checked boolean value
}
}
Note that the handler config is a handy shortcut for this (also available on buttons). Instead of the listeners syntax you could just do this:
handler: function(ctl, val) {
// etc
}
Try this:
new Ext.form.Radio({
id: 'ptype',
boxLabel:'Yes',
name: 'price_type',
value: 1
onClick: function(e){
.....
.....
}
})
If you're using a CheckBoxGroup, you should do something like this to make sure you are firing on the correct Radio.
listeners: {
check: function(checkbox, checked) {
if(checked) {
// do whatever.
}
}
}