I have the below extjs combobox created for user to change an item through an API call. I have a specific tpl to display the values in a format which works fine when the select list gets populated. I have displayField showing when user selects an item from the list, which is great too. The problem is, when user selects and item and submits, I need to pull 2 values off of that selection. One value is gmiExchangeCode and the other value is gmiFuturesCode. I need to be able to get both of these values when user submits. The code below only sends the gmiDescription
}, {
xtype: 'combo',
autoLoad: true,
hideTrigger: true,
fieldLabel: 'Product',
displayField: 'gmiDescription',
hiddenName: 'gmiExchangeCode',
valuefield: 'gmiExchangeCode',
forceSelection: true,
submitValue: true,
name: 'exchange',
queryMode: 'remote',
queryParam: 'entry',
typeAhead: true,
minChar: 2,
tpl: new Ext.XTemplate('*****'),
store: {
fields: ['text', 'value'],
proxy: {
type: 'ajax',
url: '*****',
reader: {
type: 'json'
}
},
sorters: [{
property: 'exchange',
direction: 'ASC'
}]
},
listeners: {
select: function (combo, record, index) {
exchangeCode.setValue(record.get('exchangeCode'));
}
}
}, {
By default, form submission sends all form elements values only (no extra field).
In order to send the second value you could create a hidden form field and set it ( see Sencha ExtJS Submit two values), and that way this hidden field would also be submitted
Another way around it is to pass some extra params to the submit action (if it is triggered manually), from https://docs.sencha.com/extjs/6.5.1/classic/Ext.form.action.Submit.html#cfg-params
Extra parameter values to pass. These are added to the Form's
Ext.form.Basic#baseParams and passed to the specified URL along with
the Form's input fields.
form.getForm().submit({
url: 'panel.php',
params: {
data: Ext.encode(json)
},
})
Related
I have a form that has a field that gets populated by my store:
Ext.define('EcommBackoffice.store.TransactionProviderStatus', {
extend: 'Ext.data.Store',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'resources/data/providerstatus.json',
reader: {
type: 'json',
root: 'providerstatus'
}
},
fields: ['id', 'name']
});
My store contains a simple list of items:
{
providerstatus: [{
id: "EXPIRED",
name: "EXPIRED"
}, {
id: "ERROR",
name: "ERROR"
}, {
id: "FRAUD",
name: "FRAUD"
}, {
id: "PAID",
name: "PAID"
}, {
id: "UNCONFIRMED",
name: "UNCONFIRMED"
}]
}
Inside my form, the above store is then populated by a BoxSelect:
{
xtype: 'boxselect',
name: 'providerstatus',
fieldLabel: oMe.providerstatusField,
width: 468,
store: 'TransactionProviderStatus',
displayField: 'name',
valueField: 'id',
minChars: 2,
typeAhead: true
}
While this perfectly works, I also intend to add more items while the user types new values in it. Note that this BoxSelect is a multi-selection. Currently, when I type in random values on it, it simply clears it out.
How do I set up this particular field in such a way that I will be able to add more items, and include it as part of the data that will be passed on submit?
Did you try forceSelection:false for this boxselect.
When forceSelection is false, new records can be created by the user as they are typed. These records are not added to the combo's store. Multiple new values may be added by separating them with the delimiter, and can be further configured using the createNewOnEnter and createNewOnBlur configuration options.
Also check createNewOnEnter and createNewOnBlur
Create new on Enter for Box Select
Hello i'm trying to do search in combobox.It's working but search only in current page i'm using pagination with search too i need to search in all pages not current page only
Any suggestion
{
xtype: 'combo',
fieldLabel: 'Organization Id',
name: 'company_id',
displayField:'name_en',
valueField:'id',
store: Ext.create('UserApp.store.PicklistList', {
autoLoad: true,
fields: ['id', 'name_en', 'name_se'],
proxy:{
type:'ajax',
api: {
read:'picklist/listitems'
},
reader: {
type: 'json',
root: 'root',
successProperty: 'success'
},
extraParams:{
table :'table_name'
}
}
}),
editable: true,
autoSelect: false,
selectOnFocus:true,
typeAhead:true,
minChars:2,
queryMode: 'local',
mode: 'local',
pageSize: 25,
width:370,
allowOnlyWhitespace: false,
regex: /[a-zA-Z0-9]+/, // avoid to empty data only
})
I'm using combobox with queryMode : 'remote' and doing a search withing combobox for matches. I'm doing a 'contains' search - meaning it looks for matches anywhere in the result string not just beginning and also it searches for values not only in current page but in the entire resultset. I'm using extjs 4.0.7 and i achived it by overriding doQuery method.
`doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if(this.queryMode == 'remote') {
this.store.load({
params: this.getParams(queryString)
});
}
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}`
your store needs to be setup for pagination
your server needs to handle pagination correctly based on the parameters received from the store's proxy. The proxy will send up querystring parameters like ?page=1&start=0&limit=25, and your server needs to return only 25 (for example) records and a total parameter.
{"total":101,"data":[{model data}, {model data}, ...]}
despite the documentation, the pageSize property in combobox is actually a boolean, turning pagination on if 1 or greater.
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);
}
}
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
I have a combobox and a form window opening on the same page.
The combobox code is:
combo1 = new Ext.form.ComboBox({
fieldLabel: 'Intrested in',
hiddenName: 'interest',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'ajax.php',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'rows',
fields: [{
name: 'myId'
}, {
name: 'displayText'
}]
})
}),
valueField: 'myId',
displayField: 'displayText',
triggerAction: 'all',
emptyText: 'Select',
selectOnFocus: true,
editable: false
});
First time the list fetched from SQL table is loaded correctly.
On the same page there is a window with a short form submitting new values to sql database,
but after submitting it and opening the combobox, the list is not refreshed.
ONLY after submitting the form again I can see the previously added values.
Why doesn't the combobox reload automatically after the first submitting?
The problem here is, that the combobox internally caches the so called "last query" - if that doesn't change it does not reload its data from the store. So the solution is to reset this "last query" parameter:
combo1.lastQuery = null;