I have the following combobox element:
editType = new Ext.form.ComboBox({
fieldLabel: 'Type',
name: 'Type',
queryMode: 'local',
displayField: 'name',
valueField: 'id',
store: {
fields: ['id', 'name'],
data: [
{id: '1', name: 'View'},
{id: '2', name: 'Edit'},
{id: '3', name: 'Admin'}
]
}
})
when I try to submit my form I submit its value like this:
userType: editType.getValue()
The Problem is that if I don't choose anything from it, then it returns displayField value, i.e. View. If I choose something then it returns the valueField, i.e. 1, 2 or 3. If the user don't choose anything I want to return number value like I have set, not the label.
I have search about this but couldn't find where my problem is. I read the specification and it states that:
comboboxElement.getValue() returns valueField
comboboxElement.getRawValue() returns displayField
Update
I am loading combobox as a part of a panel form, i.e. when I click on a row form a grid I load that particular row in a form with method myForm.loadRecord(clickedRow)
Thanks in advance
Related
I have two comboboxes. The first one is for selecting a region, and the second one is for selecting a province. The values that should appear in the province combobox will be based on the value selected in the region combobox.
Region combobox code:
xtype: 'combobox',
label: 'Region ID',
margin: '10 20',
flex: 1,
valueField: 'regionid',
displayField: 'regionname',
store: 'RegionStore',
minLength: 1,
id: 'region_id',
reference: 'region_id',
name: 'region_id',
listeners: {
select: function(combo, value) {
var id = Ext.getCmp('province'),
store = id.getStore();
if (!value) {
store.getFilters().removeAll();
}
else {
store.filter('regionid', val)
}
}
}
Province combobox code:
label: 'Province',
margin: '10 20',
flex: 1,
queryMode: 'remote',
store: 'ProvinceStore',
valueField: 'provinceid',
displayField: 'provincename',
minLength: 1,
id: 'province',
name: 'province',
reference: 'province'
I'm not getting any errors but when I click the province combobox(assuming that I have already selected a value for the region combobox), the values displayed in the province combobox are not filtered, instead, all of the results are displayed. I have been on this for days. Is there someone who can help?
You are using queryMode: 'remote', so that your server returns the data.
The frontend has no control, what is returned.
Plus in your example val should be value.
I would go with a chained store, that has a filter based on the selection.
Here is a fiddle to show this:
Fiddle
This is duplicate to your other question
I have data in below format,
$scope.myStudentData = {"Moroni":{"id":"1","grade":"A"},"Tiancum":{"id":"2","grade":"B"}}
But what is expected by grid is,
$scope.myGridOptions = [{"details":"id", "Moroni":"1", "Tiancum":"2"},{"details":"grade", "Moroni":"A", "Tiancum":"B"}];
This is because the ng-grid-options expects rows.
Is there a way we can make a grid column-wise?
Note: I want to use angular two-way binding between some derived fields and hence, not transforming the data into the format expected by grid.
You can actually.
$scope.gridOptions = {
data: users,
columnDefs: [
{field: 'id', displayName: 'Member ID'},
{field: 'lastName', displayName: 'Last Name'},
{field: 'firstName', displayName: 'First Name'},
{field: 'email', displayName: 'Email'},
{field: 'phone', displayName: 'Phone'}
};
And
<div ui-grid="gridOptions"></div>
Where users is your array of objects and your column definitions the columns you want to display. The field property must match the fields in your objects.
The API of gridoptions can be found here.
I am new to ExtJS and I find documentation confusing, I need to get the first data from store, which I get from the report. How to do it correctly?
this.divisionList = new ....SimplestReportCombo({
fieldLabel: "Division",
allowBlank: false,
valueField: 'KEY',
displayField: store.load.get(0),
width: 200,
reportID: 'USER_ACCESS',
store : new Ext.data.ArrayStore({
fields: [{name: 'KEY'}],
data: [{name: 'VALUE'}]
}
)
});
Javascript Stores mostly resembles RDBMS tables. They have in memomy storage and they are helpful to perform various grid level operation like sorting , paging , shuffling , editing etc.
Lets come to your code now,
You dont need to load store get its elements.If you requirement is only to select 1st ellement from store then you can do that using getAt function like below:
this.divisionList = new ....SimplestReportCombo({
fieldLabel: "Division",
allowBlank: false,
valueField: 'KEY',
displayField: store.getAt(0),
width: 200,
reportID: 'USER_ACCESS',
store : new Ext.data.ArrayStore({
fields: [{name: 'KEY'}],
data: [{name: 'VALUE'}]
}
)
});
or else you can also use following store method if you want to render mere 1st element:
store.first()
I'm seeing an issue with a combobox where I have a listener for the 'change' event. When the event fires it runs a function that filters a store that powers another combobox to filter the values that are available in the 2nd combobox.
The idea is that when you pick from a short list in the first combobox, it pares down the choices in the second combobox.
When the form loads, you can click the second combobox and see all the choices, that works great. When you then select something in the first combobox and then click the second combobox again, you see the appropriate shortened list but it's grayed out and the 'loading...' thing just spins and will never go away.
If you load the form and pick something in the first combobox and then click the second combobox it will filter and show fine but you run into the issue of the loading problem I described above if you try to change your selection in the first box and click the second combobox again.
Please see the code below, I have this setup working on another screen and it doesn't seem to have this issue.
I've got an ext store created like the following:
var comboBreaker = Ext.create('Ext.data.Store', {
autoLoad: false,
remoteSort: true,
remoteFilter: true,
fields: [{
name: 'id',
mapping: 'item_id',
type: 'int',
useNull: false},
'item_display_number','item_name', 'line_item_type_id', 'item_description'
],
proxy:{
type:'ajax',
url: '/invoicer/data/getlineitems',
reader: {
type: 'json',
successProperty: 'success',
root: 'results',
totalProperty: 'totalCount'
},
sorters:[{
property:'item_display_number',
direction:'ASC'
}]
}
});
This store powers a combobox, like so:
Ext.define('Writer.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.writerform',
requires: ['Ext.form.field.Text'],
initComponent: function(){
this.addEvents('create');
Ext.apply(this, {
activeRecord: null,
frame: true,
title: 'Line Item',
id: 'writerform',
fieldDefaults: {
anchor: '100%',
labelAlign: 'right'
},
items: [{
xtype: 'combobox',
fieldLabel: 'Item #',
name: 'item_number',
store: comboBreaker,
displayField: 'item_display_number',
valueField: 'id',
allowBlank: false,
forceSelection: true
},{
xtype: 'combobox',
fieldLabel: 'Item Type',
name: 'item_type',
id: 'item_type',
displayField: 'line_item_type',
valueField: 'id',
store: invoicer_lineItemTypeStore,
forceSelection: true,
labelWidth: 75,
width: 200,
listeners: {
change: {
fn: function() {
itemNumberFilter(comboBreaker);
}
}
}
}]
});
The itemNumberFilter() function takes a store and does filtering on it, here is that code:
function itemNumberFilter( store ) {
var id = Ext.getCmp('item_type').getValue();
store.remoteFilter = false;
store.clearFilter();
if ( id ) {
store.filter('line_item_type_id', id);
}
store.remoteFilter = true;
store.removeAll();
store.load({
scope: this,
callback: function( records ) {
console.log('Loaded records!');
console.log(records);
}
});
}
I see the logged out records every time I change my selection in the first combobox and I can 'see' the results in the second combobox but they're always grayed out with the 'loading..' GIF showing.
Edit: Video example: http://screencast.com/t/cUSHyFE6FIV
Edit: I believe this is the solution:
lastQuery: '',
listeners: {
beforequery: {
fn: function(query) {
delete this.lastQuery;
}
}
}
Adding this to the combobox config fixes the issue.
Edit2: I ran into a second bug introduced by this, it was fixed by adding:
this.clearValue();
to the beforequery function (above delete this.lastQuery). This clears the value of the combobox each time the drop down arrow is clicked.
Let's say you select item x in combo_1 and then item a in the pared down list in combo_2. You then change the selection in combo_1 to y, which then changes the list of items again in combo_2. Is a available in the new list in combo_2 that results from selecting item y in combo_1? Maybe it is an issue of trying to keep an item selected when it no longer exists in the list available to the combo.
Have you tried clearing the selection in combo_2 before applying the filter?
You can dynamically load the store of the second combox box but be sure to set the second combox box to "local".
forum member I am having one problem is displaying the combobox name selected values to my gridpanel column.
I am having the gridPanel with one column containing the resources combobox and the user can select multiple values from the resource.
below is my gridpanel column with the column combobox
gridpanel column
{
xtype: 'gridcolumn',
dataIndex: 'resourceid',
text: 'Resource',
field: resourcecombo
},
resourcecombo
var resourcecombo = new Ext.form.ComboBox({
id: 'resourceid',
name: 'resourceid',
emptyText: 'Select resource',
displayField: 'firstname',
store: Ext.create('rms.store.employee'),
valueField: 'id',
multiSelect: true,
queryMode: 'local',
typeAhead: true
});
here I getting the list of resources and I can do multiselect also. Based on this multiselect the id is send to server and with the response I want to set the values to grid column.
but, something wrong is there I am getting the correct response from server, but my gridcolumn displays only one name in this column..
I want to display the name of all the resource selected, separated by comma sign , like
rishi,yogi,hiren etc
solution
just change the gridcolumn with below code
xtype: 'gridcolumn',
dataIndex: 'resources',
header: 'Resources name',
field: resourcecombo,
renderer: function(resources){
var result = [];
resources = resources || [];
for (var idx = 0, len = resources.length; idx < len; idx++ ){
var value = resources[idx].name;
if(value){
result.push(value);
}
}
return result.join(', ');
}
and change the model with below code
Ext.define('rms.model.taskmainModel', {
extend : 'Ext.data.Model',
fields : [
{ name : 'id', type : 'int' },
{ name : 'taskname', type: 'string'},
**{ name : 'resources', type: 'auto'},**
{ name : 'cmpname', mapping: 'project.company.cmpname'}
]
});
above solution works for me, hope this may help some one.
thanks for your support.
You have specified the name displayed on the combobox is 'firstname', and this string will correspond 1-1 to its value beneath (i.e. 'id'). If you think it does not work your way, just think about these:
How will the "selected items" be displayed on the combobox if multi items are chosen and this combobox is not in "focus" state? (The combo will show one random of the selected item, or list them as in a menu?)
How will the "selected items" be RE-displayed after you click on the combobox again to select some other items? (If multi items has been selected, will all of them display the same "name of all the resource selected, separated by comma sign , like rishi,yogi,hiren" as you described?)
So I recommend to choose other ways, such as: using another field to show the comma-separated names