I have some checkboxes in my app:
http://img846.imageshack.us/img846/7397/628bc474d4904ff2993df81.png
Now I want to trigger/toggle selection when the labels are clicked.
Any ideas?
If you want to achieve the same in Sencha Touch 2, you can use the following for radiofields or checkboxes:
defaults: {
xtype: 'radiofield',
name: 'fieldname',
listeners: {
// Adding listener for tap event on label element,
// this should toggle the checkbox.
"tap": {
element: "label",
fn: function () {
var me = this;
me.setChecked(!me.isChecked());
},
}
}
}
EDIT: Apparently, the "click" event should be "tap", according to #jayteejee. Changed the original "click" listener to a "tap" listener accordingly.
Use this to add tap listener to the label element.
{
id: 'username',
xtype: 'checkboxfield',
name : 'username',
label: 'User Name',
listeners:{
labelEl:{
tap:function(){
var obj = Ext.getCmp('username');
if(obj.isChecked()){
obj.uncheck();
}else{
obj.check();
}
}
}
}
}
Thijs' answer worked well with a minor adjustment to get it working on Android and iOS with Sencha Touch 2. Just change "click" to tap:
{
xtype: 'checkboxfield',
name: 'fieldname',
label: 'Label',
listeners: {
tap: {
element: "label",
fn: function () {
this.setChecked(!this.isChecked());
}
}
}
}
Related
How can i programmatically click the ext menu checkitem? i have tried below code and it did change the checked. However, the checkbox didn't check. thank you.
extMenuCheckItem.items[0].checked = true;
And this doesn't work either.
extMenuCheckItem.items[0].onClick();
You can try using extMenuCheckItem.items[0].click(); which simulates a click.
Try this:
In your view:
items: [
{
xtype: 'menu',
floating: false,
width: 120,
items: [
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menucheckitem',
text: 'Menu Item',
listeners: {
checkchange: 'onMenucheckitemCheckChange'
}
}
]
}
]
Controller to capture the action:
onMenucheckitemCheckChange: function(menucheckitem, checked, eOpts) {}
Try extMenuCheckItem.items[0].set('checked', true)
with
extMenuCheckItem.items[0].onClick();
you just call one listener for the MenuItem.
But with
extMenuCheckItem.items[0].click();
you simulate the click on the MenuItem and the click event is fired, so every attached listener will run.
I have a button in dataview on click of which i have to open fileUpload browse. I have tried below code which seems to be working fine with Ext JS modern SDK but with classic el element is null.
Ext.application({
name: 'Fiddle',
launch: function () {
var panel = Ext.Viewport.add({
xtype: 'panel',
title: 'FileInput Field Trigger',
itemId: 'Mypanel',
items: [{
xtype: 'button',
text: 'Upload file',
listeners: {
tap: function (button) {
// Find the fileinput field
var panel = button.up('#Mypanel');
var fileinput = panel.down('#myFileInputField');
// Programmatically click the file input field
fileinput.el.query('input[type=file]')[0].click();
}
}
}, {
xtype: 'formpanel',
hidden: true,
items: [{
xtype: 'filefield',
itemId: 'myFileInputField',
listeners: {
change: function (field, newValue, oldValue, eOpts) {
Ext.Msg.alert('Results', newValue);
}
}
}]
}]
});
}
});
Is there any method to trigger this event or any other approach please.
If you are putting the exact above code in classic sdk, then, there are some things that are slightly different compared to modern sdk:
The form xtype in Classic is just 'form' and not 'formpanel'
In Classic there isn't a tap event for buttons, just a handler that is executed when the button is clicked:
items: [{
xtype: 'button',
text: 'My Button',
handler: function(button) {
console.log('you clicked the button ', button);
}
}]
Checkout the working fiddle
Good day all.
In EXTjs, probably 4.x version, I have a menu with a couple of levels of sub-menus
I'd like to add a data attribute to some of those sub-menus and actually I can do this with no problems with:
Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 4});
but this is working only for the first element of the menu (to be clear, the element that is shown upon loading.
For any other element of the menu, first of all I have to click the menu to show all the sub-menu and only at that time I can use the getEl() function, otherwise this error is shown:
Uncaught TypeError: Cannot read property 'set' of undefined
I understand that I'd need to... show? render? well, "do something" to those sub elements in order to have them in the dom properly... I attach part of the code:
this is part of the menu I create:
xtype: 'button',
id:"notificationMenu",
hidden: false,
reference: 'userType',
style: 'color: #ffffff;width:58px;height:58px;',
glyph: 0xf0f3,
menu:{
border:0,
menuAlign: 'tr-br?',
bodyStyle: {
background: '#3e4752',
},
items:[
{
text:"TASKS",
disabled:true
},
{
text:"Campaigns",
data_id:"me_campaigns",
glyph:0xf0c1,
id:"notification_me_campaigns_root",
hidden:true,
menu:{
border:0,
menuAlign: 'tr-br?',
bodyStyle: {
background: '#3e4752',
},
items:[
{
text:"Approval",...
in this example, if I make after Render:
Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 10})
but if I use
Ext.getCmp("notification_me_campaigns_root").getEl().set({"data-notifynumber": 4})
the error above is shown. please do you have some advice? may I call a "force render" somehow?
Try to use afterrender to get dom element.
ExtJs getEl() Retrieves the top level element representing this component but work when dom is prepared without dom creation it will return null.
I have created an Sencha Fiddle demo hope this will help you to achieve you requirement/solution.
var panel = new Ext.panel.Panel({
renderTo: document.body,
title: 'A Panel',
width: 200,
tools: [{
xtype: 'button',
text: 'Foo',
menu: {
defaults: {
handler: function () {
Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber'))
}
},
items: [{
text: 'Item 1'
}, {
text: 'Item 2',
menu: {
listeners: {
afterrender: function () {
this.getEl().set({
"data-notifynumber": 20//only for example you can put as basis of your requirement
});
}
},
defaults: {
handler: function () {
Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber'))
}
},
items: [{
text: 'Sub Item 1',
}, {
text: 'Sub Item 2'
}]
}
}],
listeners: {
afterrender: function () {
this.getEl().set({
"data-notifynumber": 10//only for example you can put as basis of your requirement
});
}
}
}
}]
});
I try to write a plugin for the CKEditor (Version 4.x), with a Dialog UI element.
the definition of the dialog looks like:
CKEDITOR.dialog.add('abbrDialog', function(editor) {
return {
title: editor.lang.abbr.title,
label: editor.lang.abbr.title,
minWidth: 400,
minHeight: 200,
contents: [{
id: 'abbreviation-dialog',
label: editor.lang.abbr.label,
elements: [
{
id: 'abbreviation-found-label',
type: 'html',
label: editor.lang.abbr.found,
html: '<span id="foundLabelId">'+ editor.lang.abbr.found + '<\/span>'
},
{
id: 'abbreviation-current-item',
type: 'html',
label: editor.lang.abbr.currentLabel,
html: '<span id="currentLabelId">'+ editor.lang.abbr.currentLabel + '<\/span>'
},
{
id: 'abbreviation-replace-button',
type: 'checkbox',
label: editor.lang.abbr.replaceButton,
onClick : function() {
replaceAbbreviation(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
}
},
{
id: 'abbreviation-next-button',
type: 'button',
label: editor.lang.abbr.nextButton,
onClick : function() {
nextAbbreviation(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
}
},
{
id: 'abbreviation-all-button',
type: 'button',
label: editor.lang.abbr.allButton,
onClick : function() {
replaceAllAbbreviations(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
//alert('Replace all!!');
}
}]
}],
buttons: [CKEDITOR.dialog.okButton],
onShow: function() {
initDialog(editor.lang.abbr.found, editor.lang.abbr.currentLabel);
},
onOk: function() {
// nothing to do
}
In one function i try to disable a button. This looks like:
CKEDITOR.dialog.getCurrent().getContentElement("abbreviation-dialog", "abbreviation-replace-button").disable();
Unfortunately this button gets not disable (but the additional CSS-class cke_disabled is added).
Also strange: if i turn that abbreviation-replace-button into a checkbox, this checkbox gets disabled (with no further code modifications).
My Questions:
How can i disable a button on a plugin dialog?
Why gets the checkbox disabled but the button not?
Where is my mistake?
I think you need to call a special method to disable buttons,
i.e. `disableButton('btn')
you can disable ok or cancel button by following way
CKEDITOR.dialog.getCurrent().disableButton('ok')
CKEDITOR.dialog.getCurrent().disableButton('cancel')
in your case you can try
CKEDITOR.dialog.getCurrent().disableButton('abbreviation-next-button')
I have an ActionSheet and a Panel in Sencha Touch 2. I want to show the ActionSheet overlay when the icon-map is clicked in the panel, how can I do that?
Panel.js
Ext.define('app.view.principalTabPanel', {
extend: 'Ext.tab.Panel',
config: {
ui: 'light',
items: [
{
xtype: 'mappanel',
title: 'Map',
iconCls: 'locate'
}
],
tabBar: {
docked: 'bottom',
ui: 'light'
}
}
});
asking.js
Ext.define('app.view.takePhoto', {
extend: 'Ext.ActionSheet',
config: {
items: [
{
text: 'Delete draft',
ui : 'decline'
},
{
text: 'Save draft'
},
{
text: 'Cancel',
ui : 'confirm'
}
]
}
});
You can do this by adding a listener to your tab inside the tab object of your item.
{
xtype: 'mappanel',
title: 'Map',
iconCls: 'locate'
tab: {
listeners: {
tap: function() {
var sheet = Ext.create('app.view.takePhoto');
sheet.show();
}
}
}
}
Inside that listener, we create a new instance of your app.view.takePhoto class and show it.
I ran into the same problem after changing show() to showBy().
Specifying the html id instead of the component did the trick
.showBy(Ext.get('ext-tab-5'));
instead of
.showBy('settingsTab')
seems like the method can only be called on DOM elements.
Hope this helps somehow.