Develop Reference

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:

Extjs: Dynamic store bind to combo box- array

I'm beginner to Extjs, adding an array of options for combobox in Extjs dynamically, but options in combo box appears with the 1st character of strings.
code:
function makeComboBox(){
var ImageCbx = new Ext.form.ComboBox({
id : cbID,
queryMode: 'local',
displayField : 'names',
valueField: 'names',
typeAhead : false,
mode : 'local',
triggerAction : 'all',
selectOnFocus : false,
//editable : true,
emptyText:'Select...',
width : 400
});
function rewrite()
{
var options = params[attach];//options=["apple", "ball", "cat"];
var store = new Ext.data.SimpleStore({
fields : ['names'],
data : options
});
var cbx = Ext.getCmp(cbID);
cbx.bindStore(store);
}
//output: options in combo box appears with 1st char of strings
a
b
c
//Expected output:
apple
ball
cat
Any suggestions ? where i have done wrong

A normal ExtJS store takes objects, not strings.
Since you use the store field "names" as the displayField, the data you want to add has to be in the format:
[{ names: "apple" },{names: "ball"}, {names: "cat"}]
which you can get with the following code:
data: options.map(function(option) {
return {names: option};
})
You are using a "SimpleStore" which is also called "ArrayStore" since it takes arrays (not strings).
In that case you have to wrap the string into an array, so use the following code:
data: options.map(function(option) {
return [ option ];
})
This also tells us why your store shows the first character - a string is an array, with each character being one element of the array.

Angular with Kendo, Using Grid Values Asynchronously

Ok I'm pretty sure I know exactly what I need to do here but I'm not sure how to do it. Basically I have a grid that I want to make a key column bind to an array of key/values, which I've done before with kendo (not using Angular) and I know that when I'm creating my key/value array asynchronously then that needs to complete before I can get them show-up with kendo, which I have done using promises before.
So here I have the same issue only angular is also involved. I need to fetch and format an array of data into the format in which a kendo grid column can digest it, so no problem here is my controller code:
var realm = kendo.data.Model.define({
id: 'realmID',
fields: {
realmID: { editable: false, nullable: true }
realmType: { type: 'string', validation: { required: true } }
}
})
var ds1 = kendoHelpers.dataSourceFactory('realms', realm, 'realmID')
var realmType = kendo.data.Model.define({
id: 'realmTypeID',
fields: {
realmTypeID: { editable: false, nullable: true },
name: { type: 'string', validation: { required: true } }
}
})
var ds2 = kendoHelpers.dataSourceFactory('realms/types', realmType, 'realmTypeID')
$scope.mainGridOptions = {
dataSource: ds1,
editable: true,
navigatable: true,
autoBind:false,
toolbar: [
{ name: "create" },
{ name: 'save' },
{ name: 'cancel' }
],
columns: [
{ field: 'realmID', title: 'ID' }
{ field: 'realmTypeID', title: 'Realm Type', editor: realmTypesDDL, values: $scope.realmTypeValues },
{ command: "destroy" }
]
}
$scope.secondGridOptions = {
dataSource: ds2,
editable: true,
navigatable: true,
toolbar: [
{ name: "create" },
{ name: 'save' },
{ name: 'cancel' }
],
columns: [
{ field: 'realmTypeID', title: 'ID' },
{ field: 'name', title: 'Name' }
{ command: "destroy" }
]
}
ds2.fetch(function () {
$scope.realmTypeValues = [{ text: 'Test', value: "24bc2e62-f761-4e70-804c-bc36fdeced3d" }];
//this.data().map(function (v, i) {
// $scope.realmTypeValues.push({ text: v.name, value: v.realmTypeID})
//});
//$scope.mainGridOptions.ds1.read()
});
function realmTypesDDL(container, options) {
$('<input />')
.appendTo(container)
.kendoDropDownList({
dataSource: ds2,
dataTextField: 'name',
dataValueField: 'realmTypeID'
});
}
I made this dataSourceFatory helper method above to return me a basic CRUD kendo dataSource that uses transport and also injects an authorization header which is working fine so don't get hung up on that, ultimately I'm going to be using this data in another grid as well as for reference values for the main grid, but I've hard coded some values that I can use to test with in the ds2.fetch callback.
My HTML is pretty plain:
<div>
<h2>Realms</h2>
<kendo-grid options="mainGridOptions"></kendo-grid>
<h2>Realm Types</h2>
<kendo-grid options="secondGridOptions"></kendo-grid>
</div>
This all works fine and well except I am only seeing the GUID of the realmTypeID in the grid, I click it and the editor is populated correctly so that's good but I want the text value to be displayed instead of the GUID. I'm sure the issue is that the array of values is empty whenever angular is binding to the grid options. My questions are:
How do I either delay this bind operation or manually rebind it after the fetch call?
Is there a better way to handle a situation like this? I try not to expend finite resources for no reason (IE making server calls when unnecessary)
Note: When I move the creation of the text/value array to happen before the grid options, I get the desired behavior I am after
EDIT A work around is to not use the directive to create the grid and instead defer the grid creation until the callback of whatever data your column is dependent on, I was hoping for a more elegant solution but this is better than nothing. So your HTML becomes something like
<h2>Realms</h2>
<div id="realms"></div>
<h2>Realm Types</h2>
<kendo-grid options="secondGridOptions"></kendo-grid>
Then you can create the grid in the fetch callback for example:
ds2.fetch(function () {this.data().map(function (v, i) {
$scope.realmTypeValues.push({ text: v.name, value: v.realmTypeID})
});
$('#realms').kendoGrid($scope.mainGridOptions);
$scope.mainGridOptions.dataSource.fetch()
});
But this doesn't feel very angularish so I'm really hoping for a better solution!

Ok...well I think I hacked this enough and without another suggestion I'm going to go forward with this approach. I'm just going to move the binding logic to the requestEnd event of the second grid so that the values array can be populated right before the binding even. I'm also reworking the values array in this method. It is a bit weird though, I think there is some kendo black magic going on with this array because I can't just set it to a new empty array without it breaking completely...which is why I'm poping everything out prior to repopulating the array. That way when something is deleted or edited in the second grid, the DDL in the first grid is updated in the callback.
function requestEnd(e) {
for (var i = $scope.realmTypeValues.length; i >= 0; i--) $scope.realmTypeValues.pop();
var data;
if (e.type == "read")
data = e.response;
else
data = e.sender.data();
data.map(function (v, i) { $scope.realmTypeValues.push({ text: v.name, value: v.realmTypeID }); });
if ($('#realms').data('kendoGrid') == undefined) {
$('#realms').kendoGrid($scope.mainGridOptions);
}
else
$('#realms').data('kendoGrid').columns[4].values = $scope.realmTypeValues;
}
ds2.bind('requestEnd', requestEnd);
So I'm going to accept my own answer unless anyone has a better approach!

ExtJS 4 Load store (just array) for a combo inside a grid using renderer

I've been facing an issue on ExtJS while developing a UI:
I have a simple array which contains:
['1234','2345','3456']
I created a grid which loads some data, one of the columns in that grid should contain a combobox, which I already done by:
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
I have the editor with an empty store:
{text: "Tickets", renderer: Utils.renderCombo, dataIndex: 'ASSOC_TKT_NUMS', flex: 1,
editor: Ext.create('Ext.form.field.ComboBox', {
editable: false,
queryMode: 'local',
store: []
})
},
And on my method "renderCombo" I'm doing this, since I need to render my array in the store (which at first uses a [] as you can see above) :
renderCombo: function(value, meta, record) {
meta.column.editor.getStore().loadData(value);
}
But that does not seems to work, I even see my column empty, not a combobox.
Is there something I'm missing or something I need to change in my implementation?
Thanks in advance.

When you specify, that this column's editor field will be combobox, first of all you need to create Cell Editor and only then specify edit field
editor: Ext.create('Ext.grid.CellEditor', {
field: Ext.create('Ext.form.field.ComboBox', {
editable: false,
queryMode: 'local',
store: []
})
})

ExtJS Combobox with 2 identical display values not changing value on select

I have a combobox that populates with a list of addresses:
this.entityAddressField = new Ext.form.ComboBox(
{
id: 'entityAddressField',
fieldLabel: 'Address',
store: entityAddressStore,
mode: 'local',
width: 250,
valueField: 'entity_address_id',
displayField: 'address_type',
tpl: new Ext.XTemplate(
'<tpl for="."><div class="search-item">',
'<p><b>{address_type}</b></p>',
'<p>{address_1}</p>',
'<p>{address_2}</p>',
'<p>{city}, {state_code} {zipcode}</p>',
'</div></tpl>'
),
itemSelector: 'div.search-item',
hidden: true,
triggerAction: 'all',
listeners: {
select: function(combo, record, index) {
me.entityAddressDisplay.update(address_template.apply(record.data));
me.entityAddressDisplay.show();
}
}
});
The list shows the full address when expanded, but once selected the combobox will only show the displayField, which is the address type (Home, Work, etc.).
In the case that two "Home" addresses are listed (same type but different addresses), if I change the combobox from one "Home" address to the other - calling:
this.entityAddressField.getValue();
will return the entity_address_id of the originally selected item, instead of the newly selected.
Are there rules unknown to me that prevent the combobox from having two records with the same displayField set, even though the valueField between the two is unique?
Or am I missing something else?

When the combobox is closed, it will display the displayField value. It is unaffected by your modified tpl configuration on the combobox.
One workaround would be to create a dynamic field in your record definition that concats the values together.
Ext.data.Record.create({
{name: 'address_type', mapping: 'address_type'},
..........,
..........,
..........,
// simple name concat
{name: 'simple_name', mapping: 'address_type+" "+obj.address_1+" "+obj.address_2+" "+obj.city+", "+obj.state_code+" "obj.zipcode'}
});
You can also nest ternary operators and such into this field if you need to do conditionals on optional fields like address 2....
Ext.data.Record.create({
{name: 'address_type', mapping: 'address_type'},
..........,
..........,
..........,
// simple name concat
{name: 'simple_name', mapping: 'address_type+" "+obj.address_1+" "+(obj.address_2 ? obj.address_2+" ": "")+obj.city+", "+obj.state_code+" "obj.zipcode'}
});

It sounds like you're having a similar problem to this one. Make sure you have the idProperty set in your store or reader. It's what the store uses to uniquely identify records it contains.