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.
Related
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:
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.
Ok, I'm new to angular and angular ui-grid.
I'm using angularjs(v1.4) with angular-ui-grid(v3.0.7).
I have defined a grid as below
seec.gridOptions = {};
seec.gridOptions.rowEditWaitInterval = -1;
seec.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};
seec.gridOptions.columnDefs = [
{name: 'pouch', displayName: 'Pouch', enableCellEdit: false, enableHiding: false, width: 250},
{name: 'content', displayName: 'Content', enableHiding: false, width: 150},
{
name: 'units',
displayName: 'Number of Items',
type: 'number',
enableHiding: false,
width: 150
},
{name: 'active', displayName: 'Status', type: 'boolean', enableHiding: false, width: 150}
];
The controller basically makes a http call and feeds data to the grid.
if (response.status === 200) {
seec.gridOptions.data = angular.copy(seec.data);
}
Currently, the last item in the grid is being displayed as either 'true' or 'false' based on the boolean field value., and when I double click on the field a checkbox appears.
So, I need to display true as 'active' and false as 'inactive'.
Is there any way of doing this with angular ui-grid?
There certainly is! One approach could be to use a cellTemplate and map your rowvalues to something different.
I created a Plunkr showcasing a possible setup.
There are two steps to take. First add a cellTemplate to your column:
cellTemplate: "<div ng-bind='grid.appScope.mapValue(row)'></div>"
Note: Instead of ng-bind you could also use "<div>{{grid.appScope.mapValue(row)}}</div>", if you are more familiar with that.
Second step is to define your mapping function, for example:
appScopeProvider: {
mapValue: function(row) {
// console.log(row);
return row.entity.active ? 'active' : 'inactive';
},
}
#CMR thanks for including the Plunkr. As I was looking at it I checked, and in this case it seems overkill to have the mapValue function.
This worked for me:
cellTemplate: "<div class='ui-grid-cell-contents'>{{row.entity.active ? 'active' : 'inactive'}}</div>"
(I added the class in there to match the other cells). I will say that this still smells a little hacky to me.
This question leads to using a function as the field itself: In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?
I'd still like to see an answer with the logic directly in the columnDefs.
You can use angular filter specifying in your columnDef for a column cellFilters : 'yourfiltername:args'.
args can be a variable or a value, in that case pay attention to use right quoting. if args is a string cellFilters : 'yourfiltername:"active"'
Your filter can be directly a function or a filter name. Here a plunkr
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: []
})
})
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