Rowediting is not working on update. I have grid with column in it. If i add a new row then data will bind as we change.
If we try to change the binded data then after update it will not reflect the changed one.
Here is my Grid combo box
xtype: 'grid',
itemId: 'gdItemId',
store: {
type: 'webapi',
api: {
read: 'api/Report/GetTimeDetails'
},
autoLoad: false,
},
columns: [
{
text: 'Type', dataIndex: 'type_id', width: '12%', editor: combo, renderer: comboBoxRenderer(combo),msgTarget: 'side'
}
var store = new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
[1, "Deliverys"],
[2, "Pickup"]
]
});
var comboBoxRenderer = function (combo) {
return function (value) {
var idx = combo.store.find(combo.valueField, value);
var rec = combo.store.getAt(idx);
return (rec === null ? '' : rec.get(combo.displayField));
};
}
var combo = new Ext.form.ComboBox({
store: store,
valueField: "value",
displayField: "text"
});
What i am doing wrong here ?
I found some problems here one is , I think has no model defined the model is necessary for use as base in your CRUD, another thing is there no proxy type webapi should be type: 'rest' if you wanna use RESTFULL [ , finally autoSync should be true for update data and another problem you should map the update method for send data to your server api{ read : yourlinkread , update: yourlinktoupdate }
Complete Example
https://docs.sencha.com/extjs/4.2.3/#!/example/build/KitchenSink/ext-theme-neptune/#cell-editing
Related
Lets say I have a pair of comboboxes backed by simple remote stores. I need to do some task when either combobox selection changes using selected records (not values).
{
xtype: 'combo',
reference: 'combo1',
store: {
type: 'MyStore1',
},
displayField: 'name',
valueField: 'id',
listeners: {
select: 'onSelect',
},
},
{
xtype: 'combo',
reference: 'combo2',
store: {
type: 'MyStore2',
},
displayField: 'name',
valueField: 'id',
listeners: {
select: 'onSelect',
},
},
//controller
doTask: function(record1, record2){
console.log(record1.data.name, record2.data.name);
},
onSelect: function(combo, record) {
var record1 = this.lookupReference('combo1').getSelection();
var record2 = this.lookupReference('combo2').getSelection();
this.doTask(record1, record2);
},
Now I am trying to trigger doTask() when having only id values, and ended up with something like this:
initData: function(id1, id2){
this.lookupReference('combo1').setValue(id1);
this.lookupReference('combo2').setValue(id2);
var self = this;
var waitTimer = Ext.Function.interval(function(){
var record1 = this.lookupReference('combo1').getSelection();
var record2 = this.lookupReference('combo2').getSelection();
if(record1 && record2){
window.clearInterval(waitTimer);
this.doTask(record1, record2);
}
}, 100, self);
}
Is there a better way?
You should have a look at whether your method works with values that you entered by typing. Not sure about that.
You could also use findRecordByValue wiht getValue. This searches the store using the value that was either chosen by selection or by typing. On the other hand this may come up blank, e.g. if the typed value is not in the store.
I have rowediting grid that gird have two combos and two text field.
when type some character on combo box that combo box filter that type word from drop down list
select that filter value and form combo and do save record ok and gird view record correctly
NEXT---
after that select one of the gird record and start edit that record.type some character on combo box but that combo don't filter that type word form drop down list.
note: that happen clearFilter(true); after save/update record. If i remove clearFilter(true); gird view combo filtered result only that why I clear filter data before load store
This is my combo box grid column
{
xtype: 'gridcolumn',
itemId: 'colId',
width: 140,
dataIndex: 'ID',
menuDisabled: true,
text: 'Name',
editor: {
xtype: 'combobox',
id: 'cbold',
itemId: 'cbold',
name: 'CBO_ID',
allowBlank: false,
displayField: 'NAME',
queryMode: 'local',
store: 'Store',
valueField: 'FIELD_ID'
}
},
This gird RowRditing
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
saveBtnText: 'Save',
pluginId: 'grdEditor',
autoCancel: false,
clicksToMoveEditor: 1,
listeners: {
edit: {
fn: me.onRowEditingEdit,
scope: me
}
}
})
],
onRowEditingEdit function
Ext.Ajax.request({
url: 'url',
method: 'POST',
scope:this,
success : function(options, eOpts) {
var store = Ext.getStore('GridStore');
var grid = Ext.getCmp('gridFileLyt');
cbo1Store = Ext.getStore('cbo1Store');
cbo1Store.clearFilter(true);
cbo1Store.load();
cbo2Store = Ext.getStore(cbo2Store);
cbo2Store..clearFilter(true);
fldStore.proxy.extraParams = {
'_ID': ''
};
cbo2Store.load();
if(response.success){
Ext.Msg.alert('Success', response.msg);
} else {
Ext.Msg.alert('Failed', response.msg);
}
}
});
I feel i did some basic mistake please help to me
Same story here, bro.
I actively use ExtJS 4 and RowEditing since 2011, it always worked, until today when I found this bug.
I could not even Google it until I debugged and found out a workaround with clearFilter():
rowEditingPlugin.on('beforeedit', function(editor, e) {
editor.editor.form.getFields().each(function(field){
if (field instanceof Ext.form.field.ComboBox) {
field.store.clearFilter(true);
}
});
});
I'm using ExtJS 4.1.2, and I have an Ext.grid.Panel with a check-box selection model and a text-box in the header for filtering the items in the grid:
var nameStore = new Ext.data.Store({
...
proxy: { type: 'ajax' ... },
fields: [ { name: 'name', type: 'string' }, ... ],
});
var headerBar = new Ext.toolbar.Toolbar({
xtype: 'toolbar',
dock: 'top',
layout: 'fit',
items: [{
xtype: 'textfield',
...,
listeners: {
change: function(fld, newVal, oldVal, opts) {
var grid = ...;
if (newVal.length > 0)
grid.store.filterBy(function(record, id) { return record.get('name').indexOf(newVal) !== -1; });
else
grid.store.clearFilter()
}
}
}]
});
var nameGrid = new Ext.grid.Panel({
...
selType: 'checkboxmodel',
selModel: { mode: 'SIMPLE' },
store: nameStore,
columns: [ { dataIndex: 'name', flex: true }, ... ],
dockedItems: [ headerBar ],
bbar: [ { xtype: 'tbtext', text: '0 items selected' ... },
listeners: {
selectionchange: function(selModel, selected, opts) {
var txt = ...;
txt.setText(Ext.String.format("{0} items selected", selected.length));
}
}
});
As shown nameStore's filter is applied (or removed) based on the value in headerBar's textbox. Also, a text string in the bottom bar is updated as items are selected/deselected.
Each of these features is working smoothly on its own. But the interaction is giving me trouble: if an item is selected and then gets filtered out, it is deselected and then remains so when the filter is cleared.
How can I maintain the selections (or at least appear to do so to the user) of "hidden" items, either for use elsewhere in my application or to reselect when the filter is cleared? Thanks!
you need not to add the selected grid separately. This can be done in one grid only. Simple method is to have an array variable in page scope and capture the grid select event or itemclick event whatever you want.
e.g if you use select event it will give you your record.
select( this, record, index, eOpts )
you can get your record id and push it to the array variable that you declared.
Once you filtered out the grid. you can loop through the filtered records and call select method by getting selection model.
e.g
grid.getSelectionModel().select(record);
Hope this will help.
How to send AJAX request for combo box by having condition that current store size is 0.
Basically I have two remote combo box which are cascaded and both are lazily loaded ( This behaviour cannot be changed)
I found even if the second combo box is cascaded based on events in first combobox upoun expansion it makes AJAX call to server ( Only first expansion though)
querymode local and autoload option will not work as it load the combo box on page load when store is created.
Given below is code snippet.
xtype: 'combo',id='firstcombo', name: 'DEFAULT_VALUE' ,minChars:2, value: decodeHtmlContent('') ,width:200 ,listWidth:500, resizable: true,
valueField : 'id', displayField: 'id', pageSize: 15,forceSelection:true, enableKeyEvents: true,
store: new Ext.data.Store({reader: new Ext.data.CFQueryReader({id: 'NAME',
fields:[{name:'id', mapping:'id'}]}),
fields: [{name:'id', mapping:'id'}],
url:'server/ajax/Params'
}
}),
listeners : {
select:function(combo, record, index) {
this.setRawValue(decodeHtmlContent(record.get('id')));
cascadeFields();
}
xtype: 'combo',id='secondcombo', name: 'DEFAULT_VALUE' ,minChars:2, value: decodeHtmlContent('') ,width:200 ,listWidth:500, resizable: true,
valueField : 'id', displayField: 'id', pageSize: 15,forceSelection:true, enableKeyEvents: true,
store: new Ext.data.Store({reader: new Ext.data.CFQueryReader({id: 'NAME',
fields:[{name:'id', mapping:'id'}]}),
fields: [{name:'id', mapping:'id'}],
url:'server/ajax/Params',
baseParam:{valuefirst:''}
},
listeners: {
beforeload: function(store, options) {
var value = Ext.getCmp('fistcombo').value;
Ext.apply(options.params, {
valuefirst:value
});
},
}),
listeners : {
select:function(combo, record, index) {
this.setRawValue(decodeHtmlContent(record.get('id')));
}
function cascadeFields()
{
var combo = Ext.getCmp('secondcombo');
if(combo.store)
{
var store = combo.store;
combo.setDisabled(true);
combo.clearValue('');
combo.store.removeAll();
combo.store.load();
combo.setDisabled(false);
}
}
To just extend your code you can do it Like so
listeners: {
beforeload: function(store, options) {
if (store.getCount() > 0) {
return false; // will abort the load operation.
}
var value = Ext.getCmp('fistcombo').value;
Ext.apply(options.params, {
valuefirst:value
});
}
}
This should work all the same in ExtJS 3.x and ExtJS4.x cause you didn't specified this. But I guess you are using 3.x
If this hangs the combo give me feedback cause there is still another but a bit more complex way.
I'd like to know a way of how to update or reload the list values of a ExtJs ComboBox. For instance, I have a some checkboxes. These checkboxes determine what values the ComboBox should have. So, after selecting some of those, I click the drowndown list (combobox) to see the values.
In short, how can I change the values (store) of a ComboBox already has.
Hope someone can help me
Thanks
I've been using this undocumented ExtJs API function to change the store at runtime:
mycombobox.bindStore(newStore);
as stated by the support team in http://www.sencha.com/forum/showthread.php?40749-Change-Combobox-store-data-update.
Edit: If I want to put the new data when the store is populated, I do something like this
storeMyStore = new Ext.data.Store({
...
listeners: {
load: function(this, records, options) {
cbMyCombo.bindStore( storeMyStore );
}
}
});
It goes a little something like this
{
xtype: 'checkbox',
//configs
listeners : {
checked : function (checkbox, checkedBool) {
var yourCombo = Ext.getCmp(yourComboID);
//I'm not sure what params you will need to reload the comboBox from your
// service but hopfully this will give the jist of things. . .
yourCombo.store.reload(
{
params:
{yourParam : checkedBool},
{yourRowID : rowID}
});
}
}
Here I making a combobox that is updated after a selection is made on another ComboBox.
Basically, the final user can use the two comboboxes to select a main category and a sub-category, which is based on the selection made on the first combobox.
This is the store for First comboBox:
Ext.define("StoreSubject", {
extend: "Ext.data.Model",
fields: [
{
name: 'i_Id'
},
{
name: 's_Value'
}
]
});
var StoreSubject = Ext.create('Ext.data.JsonStore', {
model: 'StoreSubject',
proxy: {
type: 'ajax',
url: '../General/AdministrationDefaultXMLDOM.aspx?qid=15',
reader: {
type: 'json'
}
}
});
StoreSubject.load();
This is the store for Second comboBox:
Ext.define("StoreLanguageGroup", {
extend: "Ext.data.Model",
fields: [
{
name: 'i_Id'
},
{
name: 's_Value'
}
]
});
var StoreLanguageGroup = Ext.create('Ext.data.JsonStore', {
model: 'StoreLanguageGroup',
proxy: {
type: 'ajax',
url: '../General/AdministrationDefaultXMLDOM.aspx?qid=16',
reader: {
type: 'json'
}
}
});
My code for Comobox is looks like this..
First ComboBox :
var cmbSubjectName = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbSubjectName',
fieldLabel: '<b>Subject</b>',
name: 'cmbSubjectName',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreSubject,
queryMode: 'local',
typeAhead: true,
listeners: {
'select': {
fn: function (combo, value) {
var strSubjectName = Ext.getCmp('cmbSubjectName').getValue();
Ext.getCmp('cmbLanguageType').clearValue();
Ext.getCmp('cmbLanguageType').getStore().load({
params: {
SubjectName: strSubjectName
}
});
}
}
},
});
This code is used to call and override the combox store (Impotent otherwise it will keep on loading )
Ext.override(Ext.LoadMask, {
onHide: function () {
this.callParent();
}
});
//---------------------------
Second ComboBox :
var cmbLanguageType = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbLanguageType',
fieldLabel: '<b>Language</b>',
multipleSelect: false,
name: 'cmbLanguageType',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreLanguageGroup,
queryMode: 'local',
typeAhead: true,
});
Hope this will helps you.. and Please rate my answer
In an event listener on the checkboxes, get a reference to the store that your ComboBox is reading from. Then invoke its add or remove functions to update the data in the store based on what check box is checked Once the updates are complete, invoke a doLayout() on the ComboBox component, it should re-render itself based on the current state of the store.
Although I think there is a way to have it automatically update any time the store updates -- I haven't used that yet.