Search in combobox with pagination extjs - extjs

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.

Related

How to send two values generated using ExtJS ComboBox

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)
},
})

Extjs Combobox store not filtering values on typeahead

I'm having trouble in filtering the comboxbox on typeahead, when I type the required value which I want, the combo highlights the value correctly but it does not filters the store. The store reloads to the original data even after typing some text in the combobox.
Here is my code for store.
Ext.define('Dashboard.store.Rule', {
extend: 'Ext.data.Store',
model: 'Dashboard.model.Rule',
storeId : 'Rule',
pageSize: 35,
autoSync : false,
autoLoad: true,
remoteFilter: true,
sorters : ['ruleName'],
proxy: {
type: 'ajax',
api: {
read : 'rule/view.action',
create : 'rule/create.action',
update: 'rule/update.action',
destroy: ''
},
reader: { //reads the data in the JSON Format
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json', //writes the data in the JSON Format
writeAllFields: true,
encode: true,
root: 'data'
},
listeners: { //Exception Handler for the Ajax Request
exception: function(proxy, response, operation){
var error = Ext.decode(response.responseText);
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: error.message,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
And below is my code for combobox in view
xtype: 'combobox',
id : 'ruleName',
padding : '10 30 10 20',
fieldLabel: '<html><font color = "red">*</font></html>Rule Name',
store: 'Rule',
width: screen.width*0.22,
emptyText: 'Select Rule',
typeAhead : true,
allowBlank: false,
queryMode: 'remote',
lastQuery:'',
displayField: 'ruleName',
disabled : true,
maxLength: 100,
maxLengthText: 'Maximum text size allowed 100',
listeners : {
'change' : function(){
//TODO
},
'blur' : function(){
//TODO
}
}
I also tried putting triggerAction : 'all' but still nothing works.
Please help on this issue
Many Thanks
Your store is configured with
remoteFilter: true,
which tells the store to reload whenever the filter is changed, sending the filter configuration to the server, so a server-side filter can be applied.
The records that are sent back by the server are not filtered by the client, since the server should have done that.
Did you implement a filter server-side? If so, what's your filter code there?
If you didn't mean to filter server-side, set remoteFilter to false.

Live Search Combo Box Isn't Working ExtJS 4.2.1

I'm not sure what's wrong with my code. However after I type 4 characters on combobox, all of value will be displayed, not filtered based on characters that I have typed. Because of that my live search is broken. Please see attached image for better illustration.
I'm creating combobox inside panel as one of item
{
xtype: 'combobox',
fieldLabel: 'Guest Name',
padding: '10px 10px 20px 10px',
allowBlank: false,
id: 'guest_id_payment',
name: 'guest_id',
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{identity_number} - {name}</div>',
'</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{identity_number} - {name}',
'</tpl>'
),
valueField: 'identity_number',
store: 'SGuest',
height: 20,
queryMode: 'remote'
}
This is the store:
Ext.define('ghb.store.SGuest', {
extend: 'Ext.data.Store',
model: 'ghb.model.MGuest',
autoLoad: true,
autoSync: true,
proxy: {
pageParam: false,
startParam: false,
limitParam: false,
type: 'ajax',
api: {
create: '/ghb_manager/add_guest',
read: '/ghb_manager/data_guest',
update: '/ghb_manager/edit_guest',
destroy: '/ghb_manager/delete_guest'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data'
},
root: 'data'
}
});
I'm also add change event listener
'#guest_id_payment':{
change: this.changeGuestCombo
},
This is the function of change event listener, loading another store (not the store of ComboBox)
changeGuestCombo: function(self, newValue, oldValue, eOpts){
var store = Ext.getStore('SReservation');
store.load({
params: {
data: self.getValue(),
}
});
},
N.B. I'm using 4.2.1
The way you currently have it setup the filtering should be handled server side. If you change queryMode: 'remote' to queryMode: 'local' then the filter should work the way you want.
queryMode: 'remote' tells the combo box to call the proxy with the value you typed and the server would have to return only matching values. This is helpful if you have a huge dataset to search
I found the problem. When we use tpl & displayTpl on Combobox, the livesearch feature won't work
When you are using custom tpl and displayTpl in your Combobox, you can define a custom Filter function, for example on key up:
// Clear the filter collection without updating the UI
store.clearFilter(true);
store.filter([
{filterFn: function(item) { return item.get("identity_number") == "[....]" }}
]);
For more information check the ExtJS documentation.

PagingToolbar does not work

I am using PagingToolbar to filter my result search, I want do display 20 result per page, but in my grid still display all records.
The bbar in my grid
bbar: Ext.create('Ext.PagingToolbar',
store: store,
pageSize: 20,
displayInfo : true,
plugins: Ext.create('Ext.ux.ProgressBarPager', {})
}),
My Store
Ext.define('Mystore', {
extend: 'Ext.data.Store',
model: 'Mymodel',
pageSize: 20,
autoLoad: true,
remoteSort: true,
proxy: {
type: 'rest',
url: 'search',
reader: {
type: 'json',
root: 'root',
idProperty: 'id'
},
writer: {
type: 'json',
writeAllFields: true
}
}
});
Anybody could help me ??
Thanks.
Your /search REST service that provides the data for the store needs to support the start, limit, and/or page parameters so that the store can request a single page of results at a time.
To support the limit parameter, your service must limit the number of returned results to no more than the count specified in that parameter. You'd typically implement that by passing the limit value through to the database query you're using to provide the results.
Your Store must contain this parameter with start and limit and your backend need to use these parameters.
baseParams : {
start:0, limit:20
}
In java backend,
String startPage = request.getParameter("start");
String limits = request.getParameter("limit");
It's kind of filter for your grid.

Extjs 4 Combo box not loading for first time (after combo is set with form data)

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

Resources