Develop Reference

ExtJs 4.1.2 ComboBox Update or Reload Based on another ComboBox

I'd like to know a way of how to update the list values of a ExtJs ComboBox. For instance, I have two comboboxs.
One Combobox determine what values the another ComboBox should have. So, after selecting some of those,
I click the drowndown list (combobox) to see the values. But i dont get reflected.
change: function (combofirst, record) {
Ext.Ajax.request({
-- -- --
-- -- --
success: function (response) {
var combosecond = Ext.getCmp('defaultPackageType');
//I am unable to update the combosecond from below snippet.
combosecond.store = Ext.create('Ext.data.Store', {
fields: ['value', 'display'],
data: [
["N", "No"],
["A", "All accounts"]
] //json response
});
},
failure: function (record, action) {}
});
});
In short, how can I change the values of a ComboBox already has with ajax only.
Hope someone can help me
Thanks

I would also agree to the comment, that creating every time a new store and bind it to the combobox is not the optimal solution. I don't know really the reason why this should be done, but nevertheless here is a working example by using bindStore:
https://fiddle.sencha.com/#view/editor&fiddle/3ci0
Ext.create('Ext.form.field.ComboBox', {
// ...
listeners: {
change: {
fn: function (cb) {
Ext.Ajax.request({
url: 'https://jsonplaceholder.typicode.com/albums',
method: 'GET',
timeout: 60000,
success: function (response) {
var jsonResp = response.responseText;
let jsonObj = Ext.JSON.decode(jsonResp, true)
var combo2 = Ext.getCmp('myCombo2');
combo2.bindStore(Ext.create('Ext.data.Store', {
fields: ['id', 'title'],
data: jsonObj
}));
}
});
}
}
}
});
For selection of value 1 the data is loaded from a different url.
But I would think about whether a new proxy call is necessary and whether you can achieve your requirements by using filters or something else.

In xtype tagfield, the values sent to the server appear as a single combined line. Extjs

In the Ext.form.Panel component, I use the field:
....
{
xtype: 'tagfield',
fieldLabel: 'Установить сотрудников',
name: 'survey_users',
store: {
type: 'usertreestore'
},
reference: 'UserTreeStore',
displayField: 'text',
valueField: 'id',
filterPickList: true,
queryMode: 'remote',
publishes: 'value'
},
....
I set the values for this field and send it to the update in the store.
The value of the field survey_users looks like one combined string "survey_users": 469473475463
but the right kind of values is 469,473,475,463
Below is the full form data when you submit.
[{"text":"\u0414\u0430\u0432\u044b\u0434\u043e\u0432 \u0410\u043b\u0435\u043a\u0441\u0435\u0439","id":"75","survey_users":469473475463,"survey_cofficient":2,"parentId":"73"}]
In the controller, the save method looks like this:
...
saveUserData: function(button, e) {
var values;
var form = button.up('form');
record = form.getRecord();
store = this.getUserTreeStoreStore('UserTreeStore');
values = form.getValues();
id = form.getRecord().get('id');
values.id=id;
record.set(values);
console.log(record)
store.sync();
},
...
Before setting the values ​​in the record, it is clear that the values ​​are and they are in the correct format, but after setting the values ​​in the record field survey_users: NaN
I bring a screen output in the console
How to make sure that when submitting a form, the values of the survey_users field were sent in the correct format?

Try encodeSubmitValue
Here's the FIDDLE
Network:

jqGrid - loading values from JSON

I have a jqGrid working OK using the local datatype, but I now want the values to be loaded via json but having trouble changing it.
This is my jqGrid code
jQuery("#grid").jqGrid({
datatype: "json",
url: "/controller/getItems?id=2",
width: 1405,
colNames: ['id', 'surname'],
colModel: [
{ name: 'id', index: 'id', editable: false, hidden: false, hidedlg: true },
{ name: 'surname', index: 'surname', editable: true }
],
onSelectRow: function (id, status, e) {
...
},
editurl: url,
...
So the method to get the JSON is sucessfully fired.
[HttpGet]
public ActionResult getItems(string id)
{
List<model> items = method.getItems(id);
string jsonText = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(items);
return Json(jsonText, JsonRequestBehavior.AllowGet);
}
The column names in the JSON do match the colModel names
Example of the json being returned - what the object jsonText above contains
[{"id":434,"surname":"Woods"},
{"id":435,"surname":"Adams"}]
Is there anything I have done wrong or am missing?
Thanks

I suppose that the error in in using of System.Web.Script.Serialization.JavaScriptSerializer().Serialize. You need just return Json(items, JsonRequestBehavior.AllowGet);. Additionally you can remove the column id from the colModel. The id value will be still read and assigned as the value of id attribute of the rows (id of <tr> elements of the grid) known as rowid. You should add loadonce: true option to the grid because you don't implemented paging of data on the server side and to add gridview: true (if you not already use it) to have better performance and autoencode: true to interpret input data as texts instead of HTML fragments.
UPDATED: In case of usage old version of jqGrid one have to include jsonReader parameter which corresponds the format of input data:
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; }
}
One should still use loadonce: true option additionally.

Process extjs store proxy data after data recieved

I am using extjs sencha store for storing data. I make a proxy call to a web-service to get data. I refresh the data using store.load() function.
I am looking to edit the data that is received before it is given to the grid.
I know about the load event, but this function is executed after the load is completed and data is populated with the current data.
listeners : {
'load' : function(store,records, options) {
}
},
I am looking to see how I can edit the returned data from web-service before it is assigned to the store. Basically data returned from my webservice is in different format than the format we give to extjs datagrid. So, want to do a data operation before we give to the grid. Hope we can do this.
Thx

Model mappings can help you do this. There is a conversion function that can be supplied as well. Here is the example from the docs:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{
name: 'firstName',
convert: function(value, record) {
var fullName = record.get('name'),
splits = fullName.split(" "),
firstName = splits[0];
return firstName;
}
},
'name', 'email',
{name: 'age', type: 'int'},
{name: 'gender', type: 'string', defaultValue: 'Unknown'}
]
});

ExtJS 4, customize boolean column value of Ext.grid.Panel

Good day, i have a grid with boolean column:
var grid = Ext.create('Ext.grid.Panel', {
...
columns: [{
dataIndex: 'visibleForUser',
text: 'Visible',
editor: {
xtype: 'checkboxfield',
inputValue: 1 // <-- this option has no effect
}
},
...
Grid's store is remote via JSON proxy. When i save or update row, the resulting JSON
look like:
{... visibleForUser: false, ... }
As you see, ExtJS serializes checkbox value as true or false JSON terms.
I need to customize this and serialize to, say, 1 and 0, any suggestion how to accomplish this ? Thank you.

I've just changed my checkboxes system-wide to always act/respond to 0 and 1:
Ext.onReady(function(){
// Set the values of checkboxes to 1 (true) or 0 (false),
// so they work with json and SQL's BOOL field type
Ext.override(Ext.form.field.Checkbox, {
inputValue: '1',
uncheckedValue: '0'
});
});
But you can just add this configs per checkbox.

Ext JS 4.1.1 has a new serialize config on record fields. When a writer is preparing the record data, the serialize method is called to produce the output value instead of just taking the actual field value. So you could do something like this:
fields: [{
name: "visibleForUser",
type: "boolean",
serialize: function(v){
return v ? 1 : 0;
}
/* other fields */
}]
I try to avoid overriding default component behavior whenever possible. As I mentioned, this only works in 4.1.1 (it was introduced in 4.1.0 but I believe it was broken). So if you're using an earlier version, one of the other answers would suit you better.

You can try to override getValue
Ext.define('Ext.form.field.Checkbox', {
override : 'Ext.form.field.Checkbox',
getValue: function () {
return this.checked ? 1 : 0;
}
});