My combo uses remote query. When the user types something, the server returns matching results. However, when there are a lot of matching results, then the combo expands, loses focus and highlights the firts record returned by the server. The combo has these properties:
...
queryMode:'remote',
enableKeyEvents:true,
forceSelection:true,
...
The screen of what is going on is here:
So, as you can see, when the user typed the last character, the server returned records and for some (I think stupid) reason highlighted the first record. But what is more important there is no focus any longer and the user has to put cursor on the field again to continue typing. To solve this problem, I tried these events:
'blur':function(){
this.focus();
},
'keydown':function(){
this.focus();
},
'keypress':function(){
this.focus();
},
'keyup':function(){
this.focus();
},
But there is no effect. I also tried to use load event, but it also has no effect.
I had this issue too, for solve it use the afterQuery property in the combo.
Something like this:
afterQuery: function() {
combo.setRawValue(combo.lastQuery);
},
pd: I think this is a Bug, but i'm not sure about it...
I could solve the similar issue with focus be two actions:
Set "selectOnFocus: false"
Update doRawQuery.
doRawQuery: function() {
var me = this;
...
me.inputEl.focus();
}
If you have your overridden version (I believe you should to not change original plugin), you can do it this way to not duplicate the logic:
doRawQuery: function() {
var me = this;
me.callParent(arguments);
me.inputEl.focus();
}
xtype: 'combo',
...
listeners:{
// repair raw value after blur
blur:function() {
var val = this.getRawValue();
this.setRawValue.defer(1, this, [val]);
}
}
Look this example(thanks to Saki)
Related
I'm using a custom validator on my combobox's:
function(v) {
console.log(v === 'some value I know for SURE is in the store'); // (1)
var index = this.getStore().findExact(this.displayField, v);
return (index!==-1) ? true : 'Invalid selection';
}
Basically admits the same set as forceSelection but allows the user to type arbitrary text to attempt to auto-complete.
However; I'm having really odd results with findExact(). For example, if the combobox's value is currently valid, and a user does a space + backspace, the validator will fail, even though the output of (1) is true.
Any ideas what is causing the problem? The end-experience is currently very buggy-feeling..
When you type additional space, store is filtered. After you press backspace, and validator is fired, store is still empty.
If you have local store, then you could validate combo with some delay after each change. Example:
listeners: {
change: function() {
this.validate();
},
delay: 100
}
That should be enough.
On the other hand if you have remote store, try something like this:
validator: function(v) {
var store = this.getStore(),
index = store.findExact(this.displayField, v);
if (index === -1 && store.isLoading()) {
store.on('load', function() {
this.validate();
}, this, { single: true, delay: 100 });
}
return (index !== -1) ? true : 'Invalid selection';
}
I had a similar issue and found this entry. My problem was, that I reused the same store instance across multiple ComboBoxes. After giving each ComboBox an own store with cloned data, everything was fine.
See also:
https://www.sencha.com/forum/showthread.php?305182-ComboBox-forceSelection-clears-input&p=1127218&viewfull=1#post1127218
I just spent a few days on this issue and found a really great solution (by accident, really). You can - as the accepted answer suggests - utilize the provided validator function; however, from my understanding, there is a much simpler solution than the accepted answer provides: evaluating whether or not the user-provided input equates to a value in the store (which is the underlying question in the original post).
The advantage of thinking about the input in this way is that it enables us to handle the use case of an invalid value entered by the user (validated; no value) and - after the field loses focus - Ext JS sets the field back to its previous value (which remembers its store value).
This is an entirely different route than your thinking, but it should work, especially as .validate() runs regardless of whether you provide an implementation of the validator procedure:
validator : function(someParam) {
if(this.value === null) {
return "error message"; //falsy
} else {
return true;
}
}
If you enable forceSelection, the above works, very well, and gets rid of the buggy feeling. This allows you to rely on the .validate to do its magic elsewhere (notice I don't even call it; read the doc. to figure out when its called in relationship to validator) and not have to worry about what the user correctly explains in the accepted answer.
We were having trouble with forceSelection clearing user text before they were finished typing. We seemed to get what we needed by setting forceSelection false and just checking that they selected something.
validator: function(v) {
if (this.getSelection() === null) {
return 'invalid text';
}else{
return true;
}
}
I need to get(retrieve) updated cell value in controller. (MVC)
So I tried this,
var modified = this.getItemGrid().getStore().getUpdatedRecords();
console.log(modified); // return [] empty array
var modified = this.getItemList_Store().getUpdatedRecords();
console.log(modified); // return [] empty array
but always it returns empty array even I updated some cell value.
anybody know what I am doing wrong?
Here is my part of view code,
Ext.define("App.view.orders.ItemList_view", {
extend: "Ext.grid.Panel",
alias: "widget.itemList_view",
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
initComponent: function () {
this.store = "ItemList_store";
this.columns = [
{
xtype: 'checkcolumn', text: "Ship", width: 50, dataIndex: "DR"
},
{ header: "test", width: 100, dataIndex: "test",
editor: {
xtype : 'textfield'
}
}
];
this.selModel = Ext.create("Ext.selection.CheckboxModel");
//this.selModel = Ext.create("Ext.selection.CellModel"); // It does not works either.
this.callParent(arguments);
},
.
.
.
Thank you!
[EDIT]
Thank you very much for your answer! I have some more question about editor grid.
Its much different from Ext3. so I'm very confusing now :(
Q1. How to collect edited record data (once click button)?
the event fired once the grid cell be changed.
but I want collect edited grid record once I click the 'Update edited cell' button, and I want to update all together at the once.
In Ext3, I did like this,
(button) click : function(){
var modified = mygridStore.getModifiedRecords();
var recordsToSend = [];
Ext.each(modified, function(record){
recordsToSend.push(record.data);
});
var grid = Ext.getCmp('grid');
grid.el.mask('Updating','x-mask-loading');
grid.stopEditing();
recordsToSend = Ext.encode(recordsToSend);
Ext.Ajax.request({
url : '/test/test',
params : {
data : recordsToSend
},
success : function(response){
grid.el.unmask();
alert(response.responseText);
mygridStore.commitChanges();
},
failure : function(response){
mygridStore.rejectChanges();
}
});
}
How can I change the code for Extjs4 ?
Q2. I don't know still how to find out for changed checkcolumn.
I tried this, but I does not work for checkcolumn (of cause I tested after change checkbox)
// grid coumn
{
xtype: 'checkcolumn', header: "My Check Column", width: 50, dataIndex: "CH"
}
-
// in control
'myGrid': {
validateedit: function (plugin, edit) {
console.log(edit);
},
checkchange: function (plugin, edit) {
console.log(edit);
console.log(edit.value);
}
}
Q3. When I click the cell to edit, the show some HTML tag in -_-;;
I really appreciate for your help. and thank you very much for your valuable time!
The editors (cell editors or row editors) do not commit their values to the store until you complete the edit - which means pressing ENTER or blurring the active cell editor by clicking elsewhere on the page, or clicking the save button on the row editor form .
If your purpose for reading the updated value in your editor is to perform some kind of validation I would suggest simply listening to the validateedit event in your grid's controller, as described here.
The second argument that this event passes to your handler contains a lot of data about the edit that you can then perform validation with. If the edit doesn't pass your validation you can return false from your handler and the value in the celleditor will revert to it's original value. The validateedit event gets fired from the editor grid itself so you would add an event handler in your controller for it like this:
Ext.define('MyApp.controller.MyController', {
init: function() {
this.control({
'mygridpanel': {
validateedit: function(plugin, edit) {
// silly validation function
if (edit.value != 'A Valid Value') {
return false;
}
},
},
});
},
});
But you should check out the link above to see all the different objects available in that second argument I named edit.
The validateedit event is fired right before the record is committed into the store - after the user has already clicked ENTER or blurred the editor, i.e., while the editor is closing.
If you are trying to get the celleditor's value before it starts to close, for some reason other than validation for example, you could get the active celleditor's value like this:
// myGrid is a reference to your Ext.grid.Panel instance
if (myGrid.editingPlugin.editing) {
var value = myGrid.editingPlugin.getActiveEditor().field.value
console.log('value: ' + value);
}
If there is no active editor then myGrid.editingPlugin.getActiveEditor().field would throw an error, that's why I wrapped a conditional around it.
One other point I should make, for validation in editor grids, I found that it is easiest to just put a validator config in the grid column's editor definition. That will give you all the handy validation CSS while the user is setting the field's value and alert him if there is a problem with the value before he tries to save it.
To get an idea of what I mean, try entering letters in the date column of this example. Mouse over the editor cell and you will get the error message.
EDIT
It seems I misunderstood you original question, I'll break down my answers to your questions above though,
Question 1
Once you have completed an edit (clicked ENTER or ), your call to mygridStore.getModifiedRecords() should be working fine because the record will have been committed to the store. I see that it was not working, I will cover that in a moment.
I should point out that ExtJS4 has a store.sync() method as covered here.
Instead of extracting the modified records from the store, encoding them, manually doing an ajax request to save them to the server and then manually committing them you can call this sync method and it will take care of all of these actions for you.
If you have different URLs to handle the different create, read, update, destroy operations fired off by your store's load and sync methods, you can use the store's proxy api config to map your URLs to these operations as covered here. Or you can set-up your server side controller to be able to differentiate between your store's load request (read operations default to HTTP GET) and it's sync requests (create, update and delete operations default as HTTP POST).
There could be many different ways to go about doing this on the server side, the way I usually do it is to have one SQL stored procedure for GET requests and one for POST requests for any given store. I include the store name as an extra param and then my server side controller runs the appropriate stored procedure based on whether it is a GET or a POST request.
Question 2
Cell editing doesn't support checkcolumn edits. You have to make a different handler to listen to changes on that, something like this:
checkchange: function (column, rowIndex, checked) {
var record = store.getAt(rowIndex),
state = checked ? 'checked' : 'unchecked'
console.log('The record:');
console.log(record)
console.log('Column: ' + column.dataIndex);
console.log('was just ' + state)
}
Your call to mygridStore.getModifiedRecords() should be able to pick up the check changes also however, they get committed to the grid's store right away after being checked. store.sync() would also pick up changes to checkcolumn.
Question 3
I can't completely tell what is causing that problem but it may be something strange going on with your validateedit event, your handler should be returning true or false.
As I said earlier, I misunderstood the reason you originally asked this question. I thought you were trying to do some kind of validation while an edit was in progress. Now I understand that you are trying to get all of the modified records from the store after all the editing is completed in order to save them to the database, I was thrown off because in ExtJS 4 a store is usually saved to the database with the sync method as I mentioned.
In other words, you don't need the validateedit event or checkchange event to get a list of modified records.
The actual problem you are having might be trouble with the store's getter methods (getModifiedRecords, getUpdatedRecords) in some 4.07 versions, take a look at this post and this one.
So with all that said, the best advice I can give you is 1) try out the stores sync method for saving modified data to the database and 2) upgrade to ExtJS 4.1, there were a lot of bugs that were straightened out between 4.07 and 4.1 which you should be able to take advantage of, I cut out about 75% of the overrides I was using to make things work when I switched over to 4.1.
EditedGrid.plugins[0].completeEdit();
This will make the active changes commit and call edit event also.
listeners: {
validateedit: function (editor, e) {
//console.log(editor);
var oldVal = editor.originalValue;
var newVal = editor.value;
}
}
I have a grid bound to a form the forms submit action is to update the loaded record if there is one and add a new record if its a blank form. but if I select a record first and then call
myGrid.getSelectionModel().deselectAll();
myform.getForm().reset();
to clear the form so I can add a new record it overwrites the previously selected record with an update.
record = myform.getRecord();
if(record){
record.set(values);
}
shouldn't myform.getRecord(); be null after a reset? how do I clear the record selection?
In short, no, it shouldn't and you don't have legal approaches to clear the record after the first time you load anything via loadRecord.
Although, you could still do myform.getForm()._record = null assignment, I would strongly object against that, as it may break some internal functionality by ExtJS.
Here is an extract from ExtJS API:
getRecord() : Ext.data.Model
Returns the last Ext.data.Model instance
that was loaded via loadRecord
And it does exactly that, returns the last record loaded via loadRecord.
Here are some sources:
getRecord: function() {
return this._record;
},
loadRecord: function(record) {
this._record = record;
return this.setValues(record.data);
},
Actually, those are the only methods of Ext.form.Basic (an instance of which is returned by getForm()) dealing with this._record field.
As for reset
reset: function() {
var me = this;
me.batchLayouts(function() {
me.getFields().each(function(f) {
f.reset();
});
});
return me;
},
As you could see, reset has nothing to do with the record returned by getRecord(), it's just resetting field values.
For anyone interested, you can override the default form panel to add functionality to clear form fields. Add the following to your code:
Ext.override(Ext.form.Panel, {
clearForm:function(){
Ext.each(this.getForm().getFields().items, function(field){
field.setValue('');
});
}
});
You can then clear a form using:
myForm.clearForm()
Where myForm is your form panel.
This is what you looking for:
form.getForm().reset(true);
True to unbind any record set by loadRecord.
See Ext.form.Basic.reset() syntax
I find this question because I have a similar scenario but slightly different:
ExtJS 4.1.1
TreePanel
In ExtJS 4.1 in sync() method you can use an options object in which you can define a callback, success and failure functions. Since I'm sure I'm only synchronozing just one record, I loaded the returned record:
me.getHelpItemsStore().sync({
success: function(batch) {
// We expect single operation so...
var record = batch.operations[0].getRecords()[0];
form.loadRecord(record);
}
});
Little late but hope helps you.
I have a nice working Ext.grid.Panel, with column headers you can click on to "automatic" sort.
The store has "autoSync: true".
I have a button "new", when the user clicks on it, it creates an empty record without the id property:
onAddClick: function(){
this.down('#new').setDisabled(true);
var rec = new GroupeSynergies.data.Partenaire({
/* Valeurs par défaut des colonnes */
description: 'Nouveau partenaire'
});
this.store.insert(0, rec);
},
I insert the record in the #0 position, because I know that it'll be automatically synced (and that's what's happening actually).
The problem is: if you click on the "id" column, it's sorted by id asc, if you click again, reverse order.
Then you click on the button "New", it creates empty new record, sends it to the server, and gets the resulting record with the id field completed, updates the grid, but... don't take in account the sort: when it's synced, the returned id is very high and it stays on the top, no matter what the sort order is. What am I doing wrong?
Thank you very much
(PS I'm asking at stackoverflow because Sencha's forum seems to be overwhelmed)
In a similar situation, the solution I've found is to add a store.sort in the 'write' event handler of the store.
Ext.application({
(...)
launch: function() {
var myStore = this.getStore('myStore');
myStore.on('write', function(store, operation){ store.sort('id','ASC') }; );
}
});
Adapt the sorting parameter to your needs. Documentation for the 'sort' method.
If you have a writer set on the proxy of your store, the sorting will also fire for a simple "update". To avoid this situation you can test the value of the operation parameter.
Documentation for the 'write' event.
I don't know if it is the better way of doing it, it's the only one I've found for now.
Here's another solution:
Ext.define('My.data.Store', {
extend: 'Ext.data.Store',
sortOnWrite: false,
resort: function () {
var me = this;
me.doSort(me.generateComparator());
},
onProxyWrite: function (operation) {
var me = this;
if (me.sortOnWrite && operation.wasSuccessful()) {
me.resort();
}
}
});
I'm using the following combobox:
var cb = new Ext.form.ComboBox({
store: someDs,
fieldLabel: 'test',
valueField:'name',
displayField:'name_id',
typeAhead: true,
minChars: 3,
triggerAction: 'query'
});
So when the user typed in 3 chars, a query to the server is made showing the proper results.
Now I try to make the user input programmatically usint the doQuery() function of the combobox. After calling the doQuery() method, I want to seledct an Item via setValue().
cb.doQuery('myval');
cb.setValue('myval');
The problem is that setValue() can't select the propper value, because at the time it is called, the request started through doQuery() hasn't finished.
So I need something like a callback in which I could use setValue() - but doQuery() doesn't seem to have a callback function.
any ideas? thanks!
I'm answering myself bacause code formatting ist not avaiable in the comment.
Igor: it works but it feels like a ugly hack then a clean solution.
For a better understanding I explain the situation:
I have a GridPanel. When the user clicks on a row on this panel, I want to preselect the selected value in the combobox. Because there's a lot of data I want to lower it with using the doQuery-function of the combobox.
In the GridPanel's rowClick-event i have the following code:
var myrec = Ext.getCmp('mygrid').store.getAt(rowIndex);
mycombo.store.on('load', myfn1 = function() {
// When the store has finisihed loading, select item in the combobox
mycombo.setValue(myrec.data.customer_id);
// Remove the function assigend to the load event...
// ...(when user types directly to the combobox instead clicking on a row...)
mycombo.store.un('load', myfn1);
});
// setValue has to be called again, because the load-event doesn't fires
// when doQuery is called with same params
mycombo.setValue(myrec.data.customer_id);
// Call do query to fill the combo only with the relevant values
mycombo.doQuery(myrec.data.customer_id);
The ComboBox has a beforequery event that gives you the option to intercept the query, do your own store load instead and cancel the ComboBox query. Also, in your example you are saving the handler function to a variable and then calling un from within the handler. That's totally unnecessary, as you can pass the options {single: true} as the fourth parameter to on (third parameter is scope).
If I understand your question, you want to set the value of a combo to a certain value, say customer id 123. The problem is that the record for customer 123 is not loaded so you don't have any data in the store regarding that customer. Am I right?
What you would want to do then is (this is not necessarily correct for your situation, just a direction to get you started):
combo.on('beforequery', function(q) {
q.cancel = true;
var id = q.query;
combo.setDisabled(true);
combo.store.on('load', function() {
combo.setValue(id);
}, combo.store, {single: true});
combo.store.reload({
customer_id: id
});
return q;
});