Extjs: Dynamic store bind to combo box- array - javascript

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.

Related

ExtJS: Converting model columns to rows in a grid

I'm very new to ExtJS and wanted to achieve the following:
I have a model with data something like this:
{
"Account_Enabled": true,
"Requirements_gathered": true,
"work_done": false,
"deadlines": {
"Account_Enabled": true,
"Requirements_gathered": false
}
}
There are no multiple rows. Only a single row returned from the database.
I want to display the data in a grid with three columns
Column1: The name of the column
Column2: A checkbox that shows whether the value is true or false
Column3: A checkbox that shows whether the column name present in "deadlines" or not
Ex:
Account_Enabled True True
Requirements_Gathered True False
work_done False Undefined(Checkbox need to be disabled)
Basically, i need to convert that single row into three columns.
Also, i need to the update the store when the user checks/uncheks the checkboxes
May i know if there is any way to achieve this via ExtJS grids? or is there any better idea?
Thanks in advance
There is no direct way to bind your json response in the format you mention to the grid store.
What you need to do is to manipulate the response the match grid columns required.
Check this working example ExtJs Fiddle
//Your Original Response
let response = '{"Account_Enabled": true, "Requirements_gathered": true, "work_done": false, "deadlines": {"Account_Enabled": true, "Requirements_gathered": false}}';
// Convert your response to object
let jsonDecode = Ext.decode(response);
//This function to convert your response to match grid store
let dataConvert = function(jsonObj){
//Returned array object
let data = [];
// To get Object of deadlines and know if the property exist or not
let availableData = jsonObj.deadlines
//Loop throw object property
for(var objProperty in jsonObj){
//Ignore deadlines property
if(objProperty=="deadlines"){
continue;
}
//Adding the object to the array "objPropery" will return the property name
//"jsonObj[objProperty]" will return the value of property if it is true or flase
//"availableData[objProperty]" will return the value if exist in availableData
data.push({colName:objProperty,isReqGathered:jsonObj[objProperty],isWorkDone:availableData[objProperty]})
}
return data
}
let gridStore = Ext.create('Ext.data.Store', {
storeId: 'gridStoreId',
fields: ['colName', 'isReqGathered', 'isWorkDone'],
data: dataConvert(jsonDecode)
});
Ext.create('Ext.grid.Panel', {
title: 'Test Store Filter',
width: 500,
height: 400,
renderTo: Ext.getBody(),
store: gridStore,
columns: [{
dataIndex: 'colName',
text: 'colName'
}, {
dataIndex: 'isReqGathered',
text: 'isReqGathered'
}, {
dataIndex: 'isWorkDone',
text: 'isWorkDone'
}]
})

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:

How to change values of combobox in ExtJS

I am using ext js to populate my two combo boxes. I want the value of combobox2 to change dynamically when an item is selected in combobox1. So far I have managed to get the contents that I want in the combobox2 which is in the required format.
For example:
This is what I am doing for this purpose:
ddlLocation.on('select', function (box, record, index) {
PageMethods.getAllBanksList(ddlLocation.getValue(), function (banks) {
ddlBank.banksArray = banks; //this is the assignment part
//Bank returns the formatted string
}, GenericErrorHandler);
});
this is my ddlBank combobox:
ddlBank = new Ext.form.ComboBox({
fieldLabel: 'Bank',
labelStyle: 'width:130px',
id: 'ddlBank',
store: banksArray,
mode: 'local',
editable: false,
triggerAction: 'all',
value: banksArray[0][0]
});
It changes nothing on the assignment, Also it does not refreshes or even cleans out the values of the dropdown?
This looks like what you are looking for.
http://www.sencha.com/forum/showthread.php?184207-Controlling-one-combobox-by-selection-of-another-combobox

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.

how can dojo.FilteringSelect be configured to match wildcard values?

Below is a sample of a filteringSelect populated with user data. My goal is to have perform wilcard match on the displayed values. for example, if the user types 'son', the dropdown matches will be "homer simpSON' and 'carl calSON'.
By default, the match will only be on the beginning of the label.
I tried changing dijit.byId('userselect').searchAttr, but setting it to anything but a string causes erronious behaviour.
<input id="userselect">
<script type="text/javascript">
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
var user_data = {
"itentifier":"user_id",
"label":"label",
"items":[
{"first_name":"Waylon","last_name":"Smithers","label":"Waylon Smithers","user_id":7}
,{"first_name":"Carl","last_name":"Carlson","label":"Carl Carlson","user_id":6}
,{"first_name":"Homer","last_name":"Simpson","label":"Homer Simpson","user_id":4}
,{"first_name":"Lenny","last_name":"Leonard","label":"Lenny Leonard","user_id":5}
,{"first_name":"Montgomery","last_name":"Burns","label":"Montgomery Burns","user_id":8}
]
};
dojo.addOnLoad(function() {
var userStore = new dojo.data.ItemFileReadStore({
//url: "/user/lookup",
data: user_data
});
var filteringSelect = new dijit.form.FilteringSelect({
id: "userselect",
name: "userselect",
store: userStore,
searchAttr: 'label' //["first_name", "last_name", "oasis"]
},
"userselect");
});
</script>
You'll need to set queryExpr and set autoComplete to false
var filteringSelect = new dijit.form.FilteringSelect({
id: "userselect",
name: "userselect",
store: userStore,
searchAttr: 'label',
queryExpr: '*${0}*',
autoComplete: false
},"userselect");
Dojo documentation for queryExpr:
This specifies what query is sent to the data store, based on what the
user has typed. Changing this expression will modify whether the
results are only exact matches, a "starting with" match, etc.
dojo.data query expression pattern. ${0} will be substituted for the
user text. * is used for wildcards.
${0}* means "starts with"
*${0}* means "contains"
${0} means "is"
Have a look at queryExpr

Categories

Resources