I have this code:
var comboStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '../cxf/rest/CustomerService/getGroups'
}),
reader : new Ext.data.JsonReader({
fields : [ 'id', 'name' ]
}),
autoLoad : true
});
and
var groupsCombo = new Ext.form.ComboBox({
name : 'GroupsCombo',
fieldLabel : 'Groups',
mode : 'local',
store : comboStore,
displayField : 'name',
triggerAction : 'all',
valueField : 'groupID',
selectOnFocus:true,
width : 130
});
When the page is loaded the values are populated successfully in the combo box.
However, when I'm trying to select a value from the combo, the first value is always selected. I'm not talking programatically here, but even on the browser the first value would be selected.
Thanks
Sorry :S I don't know how I didn't notice this, but the the id in Json data store should be groupID istead of 'id'.. I changed this and it's working now.
Have you tried just using a JsonStore? Try doing something like this:
var comboStore = new Ext.data.JsonStore({
id: 'JsonStore',
idProperty: 'id',
autoLoad: true,
idProperty: 'id',
root: <root of your JSON>,
fields: [ 'id', 'name' ],
proxy: new Ext.data.ScriptTagProxy({
api: {
read: '../cxf/rest/CustomerService/getGroups',
}
})
});
Then use that is the Store for the ComboBox. A JsonStore automatically creates a JsonReader, which I think is where the conflict in your code is.
Related
I'm working with ExtJS 4.1, I need to create a combo box containing a list of customers and I'd like to set a specific pre-selected item in it, but I don't know how to do it.
Here's the code to create my combo box:
xtype: 'combobox',
fieldLabel: 'customer',
name: 'customer_id',
allowBlank:false,
afterLabelTextTpl: required,
//data store
store: Ext.create('Ext.data.Store', {
autoDestroy: true,
model: 'customer_model',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'load.php?item=customer',
reader: {
type: 'json',
successProperty: 'success',
root: 'data'
}
}
}),
valueField: 'id',
displayField: 'company',
typeAhead: true,
queryMode: 'remote',
emptyText: ''
As you can see my combo box is filled by a data store, that data store is built on a data model called 'customer_model'. Here's the code for data model:
Ext.define('customer_model', {
extend: 'Ext.data.Model',
fields: [
{type: 'int', name: 'id'},
{type: 'string', name: 'company'},
{type: 'string', name: 'vat'},
{type: 'string', name: 'ssn'},
{type: 'int', name: 'ref_id'}
]
});
Well, I'd like to configure my combo box so that a certain item, for instance the customer having id equals to 1, is automatically selected when the page is loaded.
Can anyone help me ?
Thanks in advance.
Enrico.
In Ext.js 3.2.1, you are able to do this:
combobox.setValue(id);
This assumes that the combobox is configured to use id as the valueField. Your code seems to indicate that this is the case. You would also need to have a reference to the id value that you want to set the value to. The caveat here is that you need to make sure that this code only executes after the model is loaded, otherwise the combobox won't have anything to display. You can ensure this by setting the combobox in the callback method of the ajax call or in the load event of the store.
I've looked into the documentation for Ext.js 4.1, and this method seems to still be there. I believe this should do the trick.
Edit: clarity
Thanks to Christopher help I wrote a working version of my code, I've decided to post it here, maybe it could be useful for someone...:
buttons: [{
text: 'Load',
handler: function(){
var form = this.up('form').getForm();
var combobox = form.findField('ref_id_combo');
formPanel.getForm().load({
url: <?php echo "'update_loader.php?id=".$_GET['id']."&item=customer',"; ?>
waitMsg: 'Loading...',
success: function(form, action) {
combobox.setValue(<?php echo get_property_id("ref_id","customer",$_GET['id']);?>);
}
});
}
}
Programatically with combo.setValue(val) or declaratively:
{
xtype: 'combo',
value: val,
...
}
if you want to select the first value of a store you can do
combo.select(combo.getStore().getAt(0))
it will select the value at index 0 of the combo store
If you create your own store first, you can use afterrender: function(combo){}
listeners: {
afterrender: function (combo) {
var record = yourStore.getAt(0);
var abbr= record.get('abbr');
combo.setValue(abbr);
}
}
Hi I'm having trouble making a comboBox, I'd really appreciate if you help me, here's the code for my store:
Ext.define('Benef', {
extend: 'Ext.data.Model',
fields: ['id', 'name']
});
var bene = new Ext.data.Store({
model: 'Benef',
reader: new Ext.data.JsonReader({
fields: ['id', 'name'],
root: 'benef'
}),
proxy: new Ext.data.HttpProxy({
url: '../data/benef.php'
})
});
When benef.php is called, it sends names of people this way:
{
"benef":[
{"id":"1","name":"Person"},
{"id":"2","name":"aPerson"},
{"id":"3","name":"Per 2"},
{"id":"4","name":"BeneP"},
{"id":"5","name":"BeneA"}
]
}
And my comboBox code is:
dataIndex: 'benefOne',
width: 150,
header: 'Benef',
editor: {
xtype: 'combobox',
typeAhead: true,
selectOnTab: true,
allowBlank: false,
autoSelect: true,
editable: false,
store: bene,
mode: 'local',
triggerAction: 'all',
displayField: 'name',
valueField: 'name',
lazyRender: true,
listClass: 'x-combo-list-small'
}
Everything seems to work fine when I run the script, firebug gets the answer from benef.php but when I click the combobox to display the values, it only shows a tiny blank field :s any ideas? Thanks in advance!
Add this property to you combobox:
displayField: 'name',
valueField: 'id'
I had the same problem, because I used complex field names in my model and these are not working with combobox.
I.e. I had to change
fields:[
{name:'employeeId.char10'},
{name:'fullname.char50'}
],
to
fields:[
{name:'employeeId', mapping:'employeeId.char10'},
{name:'fullname', mapping:'fullname.char50'}
],
and
displayField:'fullname.char50',
valueField:'employeeId.char10',
to
displayField:'fullname',
valueField:'employeeId',
Everything looks correct except one thing: try to put reader config into proxy config.
//...
proxy: new Ext.data.HttpProxy({
url: '../data/benef.php',
reader: new Ext.data.JsonReader({
fields: ['id', 'name'],
root: 'benef'
})
}),
//...
try to change mode to queryMode
I think the code was not clear to some people so I am updating the code to provide a detailed understanding:
var httpProxy = new Ext.data.HttpProxy({
url: '../data/benef.php'
});
var jsonReader = new Ext.data.JsonReader({
fields: ['id', 'name'],
root: 'benef'
});
var newStore = new Ext.data.SimpleStore({
proxy: httpProxy,
reader: jsonReader
});
var combobox = new Ext.form.ComboBox({
store: newStore,
//..........
});
This is how I am using in my code and its working fine.
I have an editor grid panel, with 2 fields. Based on the 1st field, the second field should change to a combobox with further options. For that getting the value of the 1st field on runtime is required to fire the query for the second field.
The code is working fine and retriving the data. But even when the mentioned width is 350 for the second field, the combobox which appears, is very small and can't be read. Even the dropdown is not seen. I tried the ListWidth property too.. but no change in the output.
Is it because, initially the combobox is empty and I'm using the beforequery property to change the url with the id field so the combobox is not getting the data? But I can't see any errors on firebug.
I have the following code:
createGrid= function(e){
var store= new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({ url: ..... }) //url to get the data
reader: new Ext.data.JsonReader({
root: //the root,
id: //id,
sortInfo: {field: 'id', direction: 'ascending' },
fields: ['id','fields']
})
});
var store2= new Ext.data.store ({
autoLoad: true,
id: 'store2',
proxy: new Ext.data.HttpProxy({ url: ' '}) //url
reader: new Ect.data.JsonReader({
root: 'enums','id', fields: ['enum_id','value']
})
});
var cm=new ext.grid.columnModel([
{id:'id',name:'id',dataIndex: 'id', width: 300},
{id:'fields', header: 'fields',width: 350, editor: new Ext.form.ComboBox({
name: 'combo',
store: store2,
width: 350,
valueField: 'enum_id',
displayField: 'value',
listeners: {
beforequery: function(query){
var g_n=Ext.getCmp('grid1');
var s_t=g_n.getSelectionModel().getSelections();
var record=s_t[0];
var assign_data=record.get('id');
var actionStore=Ext.StoreMgr.get('store2');
var action_combobox=Ext.getCmp('combo1');
actionStore.proxy.conn.url=' ',//new url which requires the 'id' field
actionStore.load();
return query;
}
}
})},
]);
return new Ext.grid.EditorGridPanel({
id: 'grid1',
store: store,
cm:cm,
sm: new Ext.grid.RowSelectionModel ({ singleSelect: true});
autoExpandableColumn: 'fields',
listeners: {
//the other grid listeners
}
})
}
Please help me with this problem.
Thanks in advance.
var store2 = new Ext.data.store(
Maybe you need to replace Ext.data.store with Ext.data.Store or Ext.data.JsonStore
I am having combobox with in window->form->combo, iam binding data from grid to combo using form.loadRecord(record).
My issue is:
After binding the data, i am trigger the combo to change the combo data ,For the first time combo expand little and hide automatically after second click only combo items loads correctly.
{
xtype: 'combobox',
editable: false,
id: 'USERTYPECmbo',
queryMode: 'remote',
displayField: 'USERTYPE',
store: Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['USERTYPE'],
proxy: {
type: 'ajax',
extraParams: {
typeName: 'USERTYPE'
},
url: 'USERTYPE.htm',
reader: {
type: 'json',
root: 'res'
}
},
listeners: {
load: function (store, options) {
var combo = Ext.getCmp('USERTYPECmbo');
combo.setValue(combo.getValue()); //Set the remote combo after the store loads.
}
}
}),
name: 'USERTYPE',
fieldLabel: 'USER TYPE'
}
point me where iam going wrong or any property need to be added for component.
Try to add
queryMode: 'local'
to your combobox properties
It's because valueField is not defined in your config object(while displayField is set). When extjs tries to load your combo he needs both value and display fields to display your combo correctly but in render time,your valueField is not yet set and he`s waiting for the ajax request sent to server and response is sent back.
In your listener you are setting the combo value while its not rendered yet.So when you click on your combo for the second time,exactly after remote JSON is loaded then combo fields are set.
{
xtype : 'combobox',
editable : false,
id:'USERTYPECmbo',
queryMode: 'remote',
displayField: 'USERTYPE',
valueField: 'USERTYPE',//set whatever field you like in your json
store :new Ext.data.Store({
autoLoad: true,
fields: [ 'USERTYPE' ],
proxy: {
type: 'ajax',
extraParams: {typeName : 'USERTYPE'},
url : 'USERTYPE.htm',
reader: {
type: 'json',
root : 'res'
}
}
}),
name : 'USERTYPE',
fieldLabel: 'USER TYPE'
}
Update:
One issue i didn't notice was that you created the store using Ext.create and because of that,extjs would try to Get your JSON twice(just check it using firebug) while one request would be enough.Just use new instead of Ext.create.I tested your code in my local server and its working correctly.if you still have the same issue please provide a download link to your form js + html + Store so i could review ur code.You may download my test files built on your code and working from here.tested on FF 6 and opera 10 and IE9
hi i have grid with store and i add record dynamically to the store for most times the data being added to the store gets reflected on the grid but sometimes the record dont seem to get reflected on the grid..please help me solve this problem
var entityGrid = new Ext.grid.EditorGridPanel({
ddGroup : 'gridDDGroup',
layout : 'fit',
store : gridStore,
closable : true,
enableDragDrop : true,
enableColumnMove : false,
enableColumnResize: true,
columnLines : true,
stripeRows : true,
colModel : new Ext.grid.ColumnModel({
columns:cols
}),
expandable : true,
autoExpandColumn : 'name',
tbar : gridToolBar,
view : new Ext.grid.GridView({
enableRowBody : true,
ignoreAdd : true,
deferEmptyText: false,
emptyText : 'No Record found.',
getRowClass : function(record, rowIndex, rp, ds){}
}),
id : id,
selModel : new Ext.grid.RowSelectionModel({
singleSelect : true
})
var store =new Ext.data.JsonStore({
fields : [
{
name : 'name',
mapping : 'name'
}, {
name : 'displayName',
mapping : 'displayName'
}
],
root : masterData.
})
I am not sure it makes a difference but this code always worked for me:
var r = new store.recordType({ field1: '1', field2: '2' });
r.commit();
store.add(r);
store.commitChanges();
grid.store.sort('field1', 'ASC');
Try adding commitChanges() and refreshing.
I'm not sure if you're still plagued by this problem, but I found the code at:
http://www.sencha.com/forum/showthread.php?141982-commitChanges-and-rejectChanges-for-the-Store-in-ExtJS-4
to be very useful as things changed moving to EXTJS-4. Which version of EXTJS are you using? Since you're using an EditorGridPanel, I'm guessing it's ExtJS 3. If you'd like, I can contribute a code fragment that uses the above architecture successfully to update a record on a grid.