Related
I am using select2 with jqgrid.
something is not working correctly, these are the cases when I edit a row.
WITHOUT OPTGROUP
standard select (no select2) without optgroup: select will show the selected item (the one i’m editing)
select2 without optgroup: select will show the selected item (the one i’m editing)
WITH OPTGROUP
standard select (no select2) with optgroup: select will show the selected item (the one i’m editing)
select2 with optgroup: select will NOT show the selected item (the one i’m editing) but when I open it il will focus the selected item.
So as you see #2 works, my problem is #4. Is it a bug or am I missing something?
Thank you,
Lorenzo
Not sure what you search, but the problem when navigating row is described here
In your case I have tested and the following code work:
$('#grid'). jqGrid('navGrid', pager, {params},
...
{ // edit params
{ afterclickPgButtons : function(button, form, id ) {
$("#name").trigger('change.select2');
},...
}
);
Note the difference of the link above.
UPDATED
In order to solve the problem you will need to use setTimeout within dataInit function. Try with one of the following settings:
{
name: "name",
index: "name",
autosize: true,
searchoptions:{clearSearch:false},
width:200,
editable:true,
edittype: 'select',
editoptions: {
// Simulo la risposta di una chiamata
// Per funzionare deve esistere più sotto
// ajaxSelectOptions
dataUrl:'/echo/html/',
postData: {
html: serverResponce
},
//
dataInit: function(element) {
setTimeout(function(){
$(element).select2({
allowClear: false,
// Imposto il tema bootstrap
theme: "bootstrap4",
dropdownAutoWidth : true,
width: 'auto',
placeholder: 'Search...'
});
}, 500);
}
}
}
I expect to have a demo with optgroup
I have a combobox which is a list of various addresses. When any address is selected, the select event plots this address on map. I want to change this program in such way that, if a user enters an address which is not a part of the Combo store, this address should still be plotted on the map. I do not require to modify the combo store. How can this be done? What event listener can trigger such event? Do I need to swap to a textfield?
{
xtype: 'combobox',
name: 'address1',
style: {
marginLeft: '15px'
},
store: Ext.create('MyStore'),
valueField: 'address',
displayField: 'address',
triggerAction: 'all',
emptyText: 'Select Address',
typeAhead: true,
minChars: 2,
typeAheadDelay: 100,
queryMode: 'remote',
width: 300,
queryParam: 'searchAddress',
hideTrigger:true,
listeners: {
select: function(combo, records, eOpts){
//Plot the address from records[0].data.address
}
}
}
The user can press enter key to indicate that the address is either
selected or types in. Currently, the specialkey event can't always
capture it because on enter rather than taking the typed in value, it
selects the first value in store
specialkey won't be captured indeed if the dropdown list is shown. This is because the event is simulated on keydown which the dropdown list intentionally stops as can be seen here.
Still there are ways to react to user input:
Method 1
Use a custom onFieldMutation method like this:
Ext.define('MyCombo', {
extend: 'Ext.form.ComboBox',
onFieldMutation: function(e) {
if (e.getKey() === e.ENTER) {
// Call address plotting method here
}
return this.callParent(arguments);
}
});
Method 2
Use keyup:
listeners: {
keyup: {
fn: function(e) {
if (e.getKey() === e.ENTER) {
// Call address plotting method here
}
},
element: 'inputEl'
}
}
See both methods in action: https://fiddle.sencha.com/#fiddle/sdf
I'm having an issue similar to the issues reported both here and here, with a only a few changes in how my form data is loaded.
The solution provided in the second link seemingly resolves my issue, but removing the show/hide scaling effects should not be required in order for CKEditor to instantiate properly. There's bound to be a much better alternative to resolving this conflict.
My issue:
When I open my page, and click the edit button, a jQueryUI Dialog pops up, loads its data via ajax, and then I attempt to replace the textarea added to the dialog with a CKEditor instance. The first time I load the page, the dialog works without a hitch. I'm able to modify the data within the editor, save my form data, and get on with life. However, if I close the dialog, then open it again, the editor is no longer enabled. The buttons still have hover effects, and are clickable, but do nothing. The text area of the editor is disabled and set to "style: visibility: hidden; display: none;". Nearly all the information I can find regarding this issue is from many years ago, and the fixes involve using functions/techniques that no longer exist or are applicable.
Control Flow
I open the page containing a text link 'Edit Update', which calls my Javascript function openEditTicketUpdateDialog.
function openEditTicketUpdateDialog(tup_id, url)
{
simplePost(null, url, new Callback
(
function onSuccess(data)
{
$('#editticketupdatedialog').dialog('option', 'buttons',
[
{
text: 'Save Edits',
click: function()
{
// Save the Update info
var formData = {
tup_update: CKEDITOR.instances.tup_update_edit.getData(),
tup_internal: +$('#tup_internal_edit').is(":checked"),
tup_important: +$('#tup_important_edit').is(":checked")
};
simplePost(formData, data['submitRoute'], new Callback
(
function onSuccess(data)
{
$('#update-' + tup_id).html(data.input['tup_update']);
$('#updateflags-' + tup_id).html(data.flags);
$('#editticketupdatedialog').dialog('close');
},
function onFail(errors)
{
console.log(errors);
}
));
}
},
{
text: 'Cancel',
click: function()
{
$(this).dialog("close");
}
}
]);
$('#editticketupdatedialog').dialog('option', 'title', data['title']);
$('#editticketupdatedialog').html(data['view']);
$('#editticketupdatedialog').dialog('open');
destroyEditor('tup_update_edit');
console.log('CKEDITOR.status: ' + CKEDITOR.status);
createEditor('tup_update_edit');
},
function onFail(errors)
{
console.log(errors);
}
));
}
This function uses three helper functions, simplePost, destroyEditor and createEditor.
function simplePost(data, url, callback)
{
post(data, url, true, false, callback);
}
function createEditor(name)
{
console.log('Create editor: ' + name);
console.log('Current Instance: ');
console.log(CKEDITOR.instances.name);
if (CKEDITOR.status == 'loaded')
{
CKEDITOR.replace(name,
{
customConfig: '/js/ckeditor/custom/configurations/standard_config.js'
});
}
else
{
CKEDITOR.on('load', createEditor(name));
CKEDITOR.loadFullCore && CKEDITOR.loadFullCore();
}
console.log('After instance created: ');
var instance = CKEDITOR.instances.name;
console.log(instance);
}
function destroyEditor(name)
{
console.log('Destroy editor: ' + name);
console.log('Current Instance: ');
console.log(CKEDITOR.instances.name);
if (CKEDITOR.instances.name)
{
console.log('Instance exists - destroying...');
CKEDITOR.instances.name.destroy();
$('#' + name).off().remove();
}
console.log('After instance removed: ');
var instance = CKEDITOR.instances.name;
console.log(instance);
}
This method of creating a CKEditor instance was gathered from here. This method of destroying a CKEditor instance was gathered from here.
As you can see, openEditTicketUpdateDialog fires an AJAX call to my getEditUpdateForm function through Laravel routes.
public function getEditUpdateForm($tup_id, $update_number)
{
$update = Update::find($tup_id);
$data = [
'title' => 'Editing update #' . $update_number . ' of ticket #' . $update->tup_ticket,
'view' => View::make('tickets.ticketupdate-edit')
->with('update', $update)
->render(),
'submitRoute' => route('tickets/update/submit', $tup_id)
];
return Response::json(array('status' => 1, 'data' => $data));
}
From here, a status of 1 is returned, and the onSuccess function is called. I've attempted to add the create/delete calls before the $('#editticketupdatedialog').dialog('open'); call, but to no avail. I've also tried multiple other solutions that I've found surfacing, which involve hacked implementations of jQueryUI's Dialog functions and attributes: _allowInteraction and moveToTop. I was originally successful in resolving this issue the first time it arose by calling this function before doing a CKEDITOR.replace:
function enableCKEditorInDialog()
{
$.widget( "ui.dialog", $.ui.dialog, {
/**
* jQuery UI v1.11+ fix to accommodate CKEditor (and other iframed content) inside a dialog
* #see http://bugs.jqueryui.com/ticket/9087
* #see http://dev.ckeditor.com/ticket/10269
*/
_allowInteraction: function( event ) {
return this._super( event ) ||
// addresses general interaction issues with iframes inside a dialog
event.target.ownerDocument !== this.document[ 0 ] ||
// addresses interaction issues with CKEditor's dialog windows and iframe-based dropdowns in IE
!!$( event.target ).closest( ".cke_dialog, .cke_dialog_background_cover, .cke" ).length;
}
});
}
After updating to Laravel 5, and making a few other changes serverside, this fix no longer works. I have been successful in resolving my issue by removing the show/hide properties from my dialog. I would very much prefer not to have to remove these properties, as half the reasoning for having the dialog is the aesthetics of an animation. Here is my dialog initialization.
$('#editticketupdatedialog').dialog({
modal: true,
draggable: false,
minWidth: 722,
autoOpen: false,
show:
{
effect: "scale",
duration: 200
},
hide:
{
effect: "scale",
duration: 200
},
closeOnEscape: true
});
When I have these animations enabled, the first time I use the dialog, it works perfectly. The second time, I receive the error TypeError: this.getWindow(...).$ is undefined - ckeditor.js:83:18 in the JS console, which refers to this line:
function(a)
{
var d = this.getWindow().$.getComputedStyle(this.$,null);
return d ? d.getPropertyValue(a) : ""
}
Recap
My main goal here is to find a fix for this issue, without having to remove the jQueryUI Dialog animation. I am unsure whom to point fingers at, as I really can't determine if the issue lies in CKEditor, jQueryUI or my implementation.
I finally found a solution that works in my case. losnir updated the outdated solution to a post here, and adding the open function to my dialog initialization resolved my issue.
My initialization is as follows:
$('#editticketupdatedialog').dialog({
modal: true,
draggable: false,
minWidth: 722,
autoOpen: false,
show:
{
effect: "scale",
duration: 200
},
hide:
{
effect: "scale",
duration: 200
},
closeOnEscape: true,
open: function()
{
$(this).parent().promise().done(function ()
{
destroyEditor('tup_update_edit');
console.log('CKEDITOR.status: ' + CKEDITOR.status);
createEditor('tup_update_edit');
});
}
});
I have an ExtJS 4 dataView and i would like to catch the id of a selected node.
It is the first time that i'm using the dataView, then, there are some troubles.
The store is loaded correctly and i see the datas into the view very well. The problem which i'm having, concern the "classic" actions of update and delete, particularly getting the id of a selected item.
For example into a grid i click, then select a record and through a button's pressing i open a window (or other actions) with a loaded form (by sending in AJAX to the store, the id of the selected row) and i update the datas.
I'm not still able to do it with the ExtJS 4 dataView.
Below my dataView:
dataView_player = Ext.create('Ext.Panel', {
id: 'images-view',
frame: true,
collapsible: false,
autoWidth: true,
title: 'Giocatori (0 items selected)',
items: [ Ext.create('Ext.view.View', {
id:'players-view',
store: store_player,
multiSelect: true,
height: 310,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'Nessun giocatore visualizzato',
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{id}-{name}">',
'<div class="thumb">',
'<img src="/img/players/{picture}" title="{name} {surname}" alt="{name} {surname}" style="">',
'</div>',
'<span class="" style="height:30px;">{general_description}{name} {surname}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
],
prepareData: function(data) {
Ext.apply(data, {
name: data.name,
surname: data.surname,
general_description: Ext.util.Format.ellipsis(data.general_description, 15)
});
return data;
},
listeners: {
'selectionchange': function(record, item, index, e) {
var node = this.getNode(record); //this.getNode(record);
console.log(node.get('id'));
}
}
}) ],
dockedItems: [{
xtype: 'toolbar',
items: [{
iconCls: 'delete',
text: 'Cancella Selezionati',
scale: 'medium',
tooltip: 'Per <b>cancellare</b> i giocatori selezionati',
tooltipType: 'qtip',
id: 'delete-player',
disabled: true,
handler: delete_news
}, '-', {
iconCls: 'edit',
text: 'Aggiorna Selezionata',
scale: 'medium',
tooltip: 'Per <b>aggiornare</b> un giocatore selezionato',
tooltipType: 'qtip',
disabled: false,
id: 'update-player',
handler: function(nodes) {
var l = nodes.get('id');
console.log(l);
}
}
}
]
}]
});
Of course, this is a wrong example (because the listeners don't work) but it's just to make an idea.
There are two main things what i would like to do:
1) Catch the id (and other store's fields) of the selected item on the action "selectionchange". Obviously, now it doesn't work because of this: node.get('id'). Of course it's a wrong syntax but make up the idea of my will.
2) Catch the id of the selected item on the handler event of the "update-player" button. As above, the issue is the nodes.get('id'). Further trouble, is how to pass the selected item's features. in handler: function(nodes) { the nodes variable does not assume any value and i don't know how to pass the params from the dataview to the handler function.
I hope that somebody will able to help me.
According to the docs the selectionchange event provides the selection model as well as the array of selected records, so you are probably assuming the wrong parameters in your listener.
Without doing further testing, I think it should be something like this:
listeners: {
'selectionchange': function(selModel, selection, eOpts) {
var node = selection[0];
console.log(node.get('id'));
}
}
Note that you're using multiSelect: true, so it could be more than one record in the selection array.
Answer for second part of the question:
In button handler, you need to get selection model of the view and from it get information about selected records:
handler: function(nodes) {
// find view component
var view = dataView_player.down('dataview');
// get all selected records
var records = view.getSelectionModel().getSelection();
// process selected records
for(var i = 0; i < records.length; i++) {
console.log(records[i].getId());
}
}
I'm using an Ext.picker.Date and I have some checks I run on the hide event. However, if a certain criteria is met, I want to stop the process and have the date picker not hide.
I've tried using the beforehide event, and running my code there, but that event doesn't seem to fire.
Below is the config for my datepicker. If the condition is true, how can I stop the picker from hiding?
Thanks for any help.
var datePicker = new Ext.picker.Date({
docked: "bottom",
listeners: {
beforehide: function() {
console.log("before hide");
},
hide: function() {
if (1 == 1) {
//how do I stop the picker from hiding?
Ext.Msg.alert("You cannot select that date.");
}
}
},
slotOrder: ["day", "month", "year"],
useTitles: false
});
this.add(datePicker);
Are you using Sencha Touch 2? I'm going to assume so, since you're using Ext.picker.Date.
According to the documentation, the date picker doesn't fire a beforehide event:
Sencha Docs
What you really want to do here is insert some logic after 'Done' is tapped and before the picker hides itself. The picker calls onDoneButtonTap internally; you can inject your own logic like so:
Ext.define('MyApp.widget.DatePicker', {
extend: 'Ext.picker.Date',
xtype: 'mypicker',
onDoneButtonTap: function() {
if (1 == 1) {
Ext.Msg.alert("You cannot select that date.");
} else {
Ext.picker.Date.prototype.onDoneButtonTap.call(this);
}
}
});
this.add({
xtype : 'mypicker',
docked : "bottom",
slotOrder : ["day", "month", "year"],
useTitles : false
});
This is assuming that your logic will be able to access what it needs within the scope of the date picker. If this isn't the case, you can pass additional configuration to the date picker when you create it...maybe something like acceptedDateRange {...}
The simplest way could be:
var datePicker = new Ext.picker.Date({
docked: "bottom",
slotOrder: ["day", "month", "year"],
useTitles: false,
onDoneButtonTap: function() {
if (1 == 1) {
Ext.Msg.alert("You cannot select that date.");
} else {
Ext.picker.Date.prototype.onDoneButtonTap.call(this);
}
}
});
this.add(datePicker);
I think defining your own class like in the first example is the way to go, especially in situations where you inject logic into existing framework code and when you use the component in more than one place. But the second example will work as well.