EXTJS Remote Combobox - combobox

I have a combo box with a store getting data from a server via remote. My problem is that my pagination does not work. Here is a snippet of my code:
Ext.define('EmployeeModel', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'fullname', type:'string'}
]
});
// remote store
var employeeStore= new Ext.data.Store(
{
model: 'EmployeeModel',
pageSize: 10,
proxy: {
url: '/schedule/home/EmployeeList',
params: {
'active_id': params
},
type: 'ajax',
autoLoad: true,
reader:
{
root: 'data',
totalProperty: 'total',
id: 'id',
type: 'json'
},
simpleSortMode: true
}
});
this.employeeBox = new Ext.form.ComboBox(
{
store: employeeStore,
displayField: 'fullname',
valueField: 'id',
typeAhead: false,
loadingText: 'Searching...',
triggerAction: 'all',
hiddenName: 'employee',
name: 'Employee Name',
fieldLabel: 'Employee',
selectOnFocus: true,
allowBlank: false,
anchor: '98%',
width: 370,
enableKeyEvents: true,
pageSize: true,
minListWidth: 220,
minChars: 2,
labelWidth: this.labelWidth,
resizable: false
});
I dont know what is lacking but as far as i have searched through the internet I copied and tested everything, still it does not work.

If you have remote store, paging also should be remote. pageSize is only parameter which is send to server, where you should handle paging. Beside pageSize you will also see parameters like start and limit.
You can see example here: http://docs.sencha.com/ext-js/4-1/#!/example/form/forum-search.html
Check out requests in firebug or something similiar, you will see url like this: http://www.sencha.com/forum/topics-remote.php?_dc=1354611968514&query=form&page=2&start=10&limit=10&callback=Ext.data.JsonP.callback3
If you want to have paging on client side, you can create local store and preload data via custom AJAX request.

Related

How to set DisplayField and ValueFiled of combobox

How to set DisplayField and ValueFiled of combobox with store response like ex: [1,2,3,4,5]
Ext.create('Ext.form.ComboBox', {
id: 'combo',
width: 400,
fieldLabel: 'distinct value',
emptyText: 'select',
store: '',
displayField: 'name',
valueField: 'id',
renderTo:"viewFilter" ,
triggerAction: 'all',
editable: false,
pageSize:10,
});
store code
var store = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'Model',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'dynamicAjax.exc?action=getDistinctValues',
simpleSortMode: true
}
});
I am going to do lazy loading on combo box ,If you have any alternate solution just drive me.
As far as I know, a store cannot work with a response of [1,2,3,4,5] out of the box.
You will have to convert the response to objects in the model. When you do that, you can set the field name to text, so you don't have to define the displayField.
I have made a working fiddle for you here:
https://fiddle.sencha.com/#view/editor&fiddle/22k4

ExtJS Paging Grid will not advance

I am trying to implement a grid with a paging toolbar in ExtJS 5. I get the first page of data, however when advancing the grid will not update new data.
It appears that data.asp page is not being updated with a new starting value to update the .AbsolutePosition property of my recordset. So the grid keeps displaying the 1st page of information.
My code is below...
var gridStore = Ext.create('Ext.data.JSonStore', {
autoLoad: false,
fields: [
{name: 'field1', type: 'int'},
{name: 'field2', type: 'int'}
],
pageSize: 25,
proxy: {
type: 'ajax',
url: 'Data.asp',
reader: {
type: 'json',
rootProperty: 'rows',
totalProperty: 'totalCount',
}
}
});
gridStore.load({
params: {
start: 0,
limit: 25
}
});
grid = Ext.create('Ext.grid.Panel', {
renderTo: 'grid-Spec',
store: gridStore,
columns: [
{text: 'Field 1', width: 10, sortable: true, dataIndex: 'field1'},
{text: 'Field 2', width: 10, sortable: true, dataIndex: 'field2'}
],
height: 100,
width: 20,
selModel: { mode: 'SINGLE' },
dockedItems: [{
xtype: 'pagingtoolbar',
store: gridStore,
dock: 'bottom',
displayInfo: true
}]
});
Your code has some typos, but in general it looks OK.
Problem may lay on server side - when using ajax proxy, you must implement paging on server side. If you have implemented paging on server side, use some developer tools (for example in Chrome) and see if page number is submitted correctly. You should see start/page number in address (eg: http://fiddle.jshell.net/echo/json/?_dc=1410854522824&page=2&start=5&limit=5).
I made fiddle: http://jsfiddle.net/seur2aLx/9/ you can compare your code to mine (note that Ext.ux.data.reader.Json is there only to fake some data for grid).

ComboBox value undefined

I have a program with 2 DropDownBoxes, where 1 of the drop box value is depanded on the value of the first (users value).
My problem is that I try to get that value from one drop box and I get "cant get value of undefined".
This is the code:
{
xtype: 'combobox',
displayField: 'vendor_name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Choose vendor...',
selectOnFocus: true,
fieldLabel: 'Vendor Name',
margin: 10,
id: 'txtBidVendor',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'vendor_name'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendors.jsp',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
{
xtype: 'combobox',
displayField: 'rate_desc',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Choose Quality...',
selectOnFocus: true,
fieldLabel: 'Vendor Quality',
margin: 10,
id: 'txtBidVendorQuality',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'rate_desc'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendorQuality.jsp?' + Ext.urlEncode({'bid_vendor': Ext.getCmp('txtBidVendor').value}),
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
I get the error in the line where I try getting Ext.getCmp('txtBidVendor').value
You need to mention the valueField for the combo. This will fetch the value for that combobox.
displayField is only used to mention what will be displayed. valueField keeps the real value which will be accessed by Ext.getCmp('txtBidVendor').value
Ofcourse you won't get it.
You have to set this second url in the select event listener of first combo.
Because here before combo is created you are trying to access the value set in combo.
If you have any default value atleast set the 2nd combo url after load of first combo.

Dynamic DropDownMenu in extjs

I have a 2 DropDownBoxes, where 1 of the drop box value is depanded on the selected value of the first.
How do i create a dynamic store in the second DropDownBoxes.
This is the code:
{
xtype: 'combobox',
displayField: 'vendor_name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Choose vendor...',
selectOnFocus:true,
fieldLabel: 'Vendor Name',
margin: 10,
id: 'txtBidVendor',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'vendor_name'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendors.jsp',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
{
xtype: 'combobox',
displayField: 'rate_desc',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Choose Quality...',
selectOnFocus:true,
fieldLabel: 'Vendor Quality',
margin: 10,
id: 'txtBidVendorQuality',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'rate_desc'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendorQuality.jsp?' + Ext.urlEncode({'bid_vendor': Ext.getCmp('txtBidVendor').value}),
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
I get the error: "Cannot read property 'value' of undefined " ,in the line where i try getting "Ext.getCmp('txtBidVendor').value"
About what you are trying to accomplish here I have two considerations:
The error here is that you are trying to access to the txtBidVendor component at definition time (it doesn't exists), when you send a configuration object (like these two comboboxes here) you are not actually creating them, but just setting the initial configuration that will be used by its parent for later instantiation.
What I think you are trying to do is to change the query parameter value for the store, when the selection changes on txtBidVendor combobox. To accomplish that, you must listen for the selection event of the first combobox and then modify and reload the store of the second one. Something like this:
{
xtype: 'combobox',
displayField: 'vendor_name',>
emptyText: 'Choose vendor...',
selectOnFocus: true,
fieldLabel: 'Vendor Name',
id: 'txtBidVendor',
store: vendorStore,
listeners: {
select: function (combo, records, eOpts) {
var record = records[0]; // just want the first selected item
rateStore.getProxy().extraParams.bid_vendor = record.get('vendor_name');
alert('Store will load now with bid_vendor =' + record.get('vendor_name'));
rateStore.load();
}
}
}
For sake of readability it will be good idea to take store definition out of the components definition itself also. Here you can find a working sample of it.
Hope it helps.

Ext-JS 4 - strange behavior with submitting combobox to server

I have a combobox in a form:
{
xtype: 'combobox',
fieldLabel: 'Jurisdictions',
name: 'jurisdiction_id',
id: 'ComboboxJurisdictions',
store: Ext.create('App.store.Jurisdictions'),
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
}
Data is:
1 => Administrator
2 => User
3 => Guest
Now, if I don't touch anything when editing a user, on my server for my combobox I get "Administrator" (displayField), but when I change something in combobox I get the "id" (valueField). I really just want "id" in both cases. I was reading about hiddenName? Is that the case?
If you need any more code, feel free to ask. :)
Thank you!
EDIT (more code)
1.) There is no default value.
Here is the whole view code:
Ext.define('App.view.Suits.Update', {
extend: 'Ext.window.Window',
title: 'Suits',
width: 250,
id: 'UpdateWindowSuits',
defaultType: 'textfield',
items: [{
xtype: 'UpdateFormSuits'
}],
buttons: [
{ text: 'Save', id: 'submitUpdateFormButtonSuits'},
{ text: 'Cancel', id: 'cancelUpdateFormButtonSuits'},
]
});
Ext.define('App.view.Suits.UpdateForm', {
extend: 'Ext.form.Panel',
alias: 'widget.UpdateFormSuits',
layout: 'form',
id: 'UpdateFormSuits',
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id',
hidden: true
},{
fieldLabel: 'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Status',
name: 'status',
allowBlank: false
},{
xtype: 'combobox',
fieldLabel: 'Priority',
name: 'suit_priority_id',
id: 'ComboboxSuitPriorities',
store: Ext.create('App.store.SuitPriorities'),
editable: false,
displayField: 'name',
hiddenName: 'id',
valueField: 'id'
},{
xtype: 'combobox',
fieldLabel: 'Jurisdictions',
name: 'jurisdiction_id',
id: 'ComboboxJurisdictions',
store: Ext.create('App.store.Jurisdictions'),
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
}],
});
Here is the store:
Ext.define('App.store.SuitPriorities', {
extend: 'Ext.data.Store',
// Where is the Model.
model: 'App.model.SuitPriority',
// "id" of the Store.
storeId: 'SuitPriorities',
// Autoload all data on creation.
autoLoad: true,
// Number of records in one page (for pagination).
pagesize: 20,
// Proxy for CRUD.
proxy: {
// Type of request.
type: 'ajax',
// API for CRUD.
api: {
create : 'php/suitpriorities/update',
read : 'php/suitpriorities/read',
update : 'php/suitpriorities/update',
destroy : 'php/suitpriorities/delete'
},
// Type of methods.
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy : 'POST'
},
// Reader.
reader: {
// Which type will the reader read.
type: 'json',
// Root of the data.
root: 'suitpriorities',
rootProperty: 'data',
// One record.
record: 'SuitPriority',
// Message and success property.
successProperty: 'success',
messageProperty: 'message'
},
// Writer (when sending data).
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true
},
});
As I sad, the store is getting all the data because it's already loaded when I press the combobox. It's a simple JSON with 'id' and 'name' properties.
EDIT2: I've tried this for my Jurisdictions because I wasn't getting the right data selected in combobox. This is inside my controller.
onJurisdictionComboRender: function(combobox, eOpts){
// Getting the selected row.
var record = this.grid.getSelectionModel().getSelection()[0];
// Selected jurisdiction.
var jurisdiction = record.data.jurisdiction_id;
// Select it in combobox.
combobox.select(jurisdiction);
}
That doesn't make sense... If you read out the combo the correct way, meaning let either the form doing the work or calling getSubmitValue() on your own the combo would always returning the valueField. hiddenName is used for other purposes. Please take a look at the console of this JSFiddle and recheck how you fetch the combo value.
Here's the working demo-code
// The data store containing the list of states
var roles = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data : [
{"id":1, "name":"Administrator"},
{"id":2, "name":"User"},
{"id":3, "name":"Guest"}
//...
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Role',
store: roles,
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
renderTo: Ext.getBody()
});
combo.on('select', function(cb){ console.log(cb.getSubmitValue()); })
+1 for everyone for helping but the problems was here:
In my store I've put autoLoad: false and inside my combobox I've put store.load() manually and it works perfectly.
Thank you all! :)

Resources