I am using extjs 3.4. i need to disable ENTER key event for the combo. I tried with following code but could not succeed. Please help.
var combo = new Ext.form.comboBox({
id: 'id',
enableKeyEvents: true,
store: store,
triggerAction: 'all',
listeners: {
keydown: function(combo, e) {
var key = e.getKey();
if (key == e.ENTER) {
e.stopEvent();
}
}
}
});
The above does not work. Still enter event works for combo. Please help.
Hi you can simply use the following...
onkeypress="if(event.keyCode==13){return false;}"
Looking at ext-all-debug.js you should be able to override the keyNav's enter handler after the combobox is created:
listeners: {
render: function() {
this.keyNav.enter = function() { ... };
}
}
Related
I need to add a custom button to CKEditor 4.6.2 instance without plugin.
I've tried solution suggested at similar question How to add a custom button to the toolbar that calls a JavaScript function?
The difference is that I don't want to replace existing instance, but instead modify it after it's initialised. Like here: http://jsfiddle.net/paragonid/8r4gk45n/1/
CKEDITOR.replace('container', {
on: {
instanceReady: function( evt ) {
console.log('instanceReady', evt)
evt.editor.addCommand("mySimpleCommand", {
exec: function(edt) {
alert(edt.getData());
}
});
evt.editor.ui.addButton('SuperButton', {
label: "Click me",
command: 'mySimpleCommand',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
}
}
});
But button doesn't appear in this case.
I also faced the same issue, this is how I resolved mine-
var editor = CKEDITOR.replace(ck, {
toolbar: [['Source','-','Preview','Print'],['UIColor','Maximize','ShowBlocks'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','RemoveFormat','-','Link','Unlink','Anchor'],
['Bold','Italic','Underline','Strike','Subscript','Superscript','RemoveFormat'],['Link','Unlink','Anchor'], '/',
['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'],
['Styles','Format','Font','FontSize'],['TextColor','BGColor'],'/',
{name: 'insert', items:['InsertCustomImage','Flash','Table','Iframe','HorizontalRule','Smiley','SpecialChar','PageBreak']}]
});
editor.addCommand("insertImgCmd", {
exec: function(edt) {
helper.showdlg(component);
}
});
editor.ui.addButton('InsertCustomImage', {
label: "Insert Image",
command: 'insertImgCmd',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
While setting the toolbar, I inserted a custom command name "InsertCustomImage".
Now while creating new button below, set the same name as "InsertCustomImage" in addButton function.
{xtype : 'container',
id:'leaderPhotoContainer',
listeners:{click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(e,panel,obj){ //click function
console.log('click el'); //It will work.
obj.fireEvent('click');
//if I adding my code here ,it is worked ,but I want to fire this event to the controller ,and be handled there.
//How I can get the 'container' here ?
//container.fireEvent('click') I guess it will work.
}
}}}
Can someone help me? Thank you.
listeners:{click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(e,panel,obj){ console.log('click el');
this.down('#leaderPhotoContainer').fireEvent('click');
}
,scope:this//It must be a upper container.
}
Maybe It is a silly way to slove it,but It is worked . Is there a better way?
You can bind your event in your controller.
//...
init: function () {
this.control({
'yourpanel': {
afterrender: function(panel) {
panel.mon(panel.el, 'click', this.foo);
}
}
});
},
foo: function() {
console.log('Foo');
}
//...
I have an app with a carousel. On all of the carousel pages there are elements such as buttons and datepickers. I would like to handle the tapStart event on each of these elements using Sencha Touch but I haven't been able to find anything to allow me to do this.
Does anyone have an idea?
UPDATE
I asked this question on the Sencha Forums as well. Here is the link to the Sencha Forum thread: http://www.sencha.com/forum/showthread.php?262804-Handle-tapStart-Event-on-a-button&p=963782#post963782
You can try using touchstart which can be bound to any element including button
I figured out a solution to my problem with help from the Sencha Touch Forums.
First I used the initConfig function to initialize my configuration of my container.
Ext.define('MyApp.view.ViewName', {
...
// Very Important, this is what I use in the controller to handle the events
xtype: 'myxtype',
...
initConfig: function () {
var me = this;
this.config = {
...
items: {
...
{
xtype: 'button',
...
listeners: {
element: 'element',
// This is where my code handles the tapstart
// (touchstart) event
touchstart: function () {
// Fire an event on the controller (me)
me.fireEvent('buttondown');
}
}
},
...
}
}
this.callParent([this.config]); // Very Important when using initConfig
}
});
Then, in my controller I added this code:
Ext.define('MyApp.controller.MainController', {
...
config: {
views: [
'ViewName',
...
],
...
},
...
init: function () {
this.control({
'myxtype': {
buttondown: this.myFunction
}
})
},
myFunction: function () {
// Do something
}
});
I know it is possible to add listeners to events that fire after the event has fired like this:
oDocumentCategories.addAfterListener("activeitemchange", function(oContainer, sValue, oldValue){
//Do stuff here
});
But is it also possible to attach them whilst creating the elements?
Just like this:
var oButton = Ext.create("Ext.Button", {
text: "Button",
listeners: {
tap: function(){
//Tap event here
}
}
});
But only then for an after listener.
Question
Is it possible to attach an after event listener whilst creating an element?
Just like the listeners configuration property but then for an after event listener.
var oButton = Ext.create("Ext.Button", {
text: "Button",
listeners: {
tap: {
fn: function(){
//Tap event here
},
// scope: this,
// options: {single: true}
order: 'after'
}
}
});
Cheers, Oleg
function bind_single_select() {
if (!$("input#single").length > 0) {
$("span.single_select").prepend("<input type='checkbox' name='single' id='single' checked='checked' style='vertical-align:middle' />");
}
$("table#gridTable").find("tr").click(function () {
if ($("input#single").attr("checked")) {
$(".trSelected").removeClass("trSelected");
$(this).addClass("trSelected");
}
});
}
I found this in Flexigrid but in JQGrid How can I do it.
Another Question :
.navButtonAdd('#pager',
{ caption: "Add",
buttonimg: "/Areas/Pages/Content/Images/add.png",
onClickButton: function () {
PopupCenter('<%= Url.Action("CreatePublisher","Publisher") %>',
'CreatePublisher', '500', '300');
}, position: "last"
})
the buttonimg is not work even I use
ui-icon-plus
Thanks in Advance.
The second part of your question is very easy to answer. The parameter buttonimg is no more supported in the navButtonAdd function. You should use buttonicon instead. An example you can find here. In general as a value of buttonicon you can use any from the jQuery UI Framework Icons.
To toggle multipleSearch parameter you can just define search parameters of navGrid separately and toggle the value of the multipleSearch property. To make all more easy I suggest to use an additional parameter recreateFilter:true.
var grid = jQuery('#list');
var pSearch = { multipleSearch:false, recreateFilter:true };
grid.jqGrid({
// all jqGrid parameters
}).jqGrid ('navGrid', '#pager', {edit:false, add:false, del:false, refresh:true, view:false},
{},{},{},pSearch));
$("#pager_left table.navtable tbody tr").append ( // here 'pager' part or #pager_left is the id of the pager
'<td><div><input type="checkbox" class="myMultiSearch" id="navMultiSearch"/>Multi-Search</div></td>');
$(".myMultiSearch").change(function() {
if ($(this).is(':checked')) {
pSearch.multipleSearch = true;
$(".myMultiSearch").attr("checked","checked");
}
else {
pSearch.multipleSearch = false;
$(".myMultiSearch").removeAttr("checked");
}
});
On the small demo I inserted both internal and external checkboxes to the navigation bar and a custom button additionally: