I have wrote the extjs code for the pagination. It showed me all the data into grid but I set the itemsPerPage = 2. Here I used extjs with Grid + Panel. I think it is some minor mistake but I am new to extjs and all, so I cannot figured it out. I have tried but no luck so far.
Ext.onReady(function () {
var itemsPerPage = 2; // set the number of items you want per page
var store = Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
autoLoad: false,
pageSize: itemsPerPage,
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott"
}, {
firstname: "Dwight",
lastname: "Schrute"
}, {
firstname: "Jim",
lastname: "Halpert"
}, {
firstname: "Kevin",
lastname: "Malone"
}, {
firstname: "Angela",
lastname: "Martin"
}],
proxy: {
type: 'ajax',
url: 'example.json', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'blah',
totalProperty: 'total'
}
}
});
// specify segment of data you want to load using params
store.load({
params:{
start:0,
limit: itemsPerPage
}
});
Ext.create('Ext.grid.Panel', {
title: 'Pagination',
store: store,
columns: [{
text: 'First Name',
dataIndex: 'firstname',
field: 'textfield',
flex : 1,
}, {
text: 'Last Name',
dataIndex: 'lastname',
flex : 1,
field:{
xtype:'textfield',
allowBlank:false
}
}],
id : 'SimpleGrid',
width: 500,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
});
To use paging, pass the paging requirements to the server when the store is first loaded.
store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: myPageSize,
// other params
foo: 'bar'
}
});
Here I used extjs + Grid + Panel.
Kind Regards,
If you look at the comment to url field:
proxy: {
...
url: 'example.json', // url that will load data with respect to start and limit params
...
}
extjs sends request to the server when it loads with all needed params. For example: example.json?start=0&limit=2&page=1
So you should limit it on the server and then send back to extjs
Here you can look at the working example, where limits was handled manually.
http://jsfiddle.net/jardalu/TE4ah/
Related
I use https://github.com/backbone-paginator/backbone.paginator to display data at a table whose columns are sortable. But when clicking on any header of a column, the sorting is done at the client instead of doing a new server request that should contain the attribute (e.g. name) that should be used to sort the results.
Base class
module.exports = Backbone.PageableCollection.extend({
initialize: function (items, options) {
options || (options = {});
this.url = options.url || "/";
},
state: {
pageSize: 15,
firstPage: 0,
currentPage: 0
},
queryParams: {
sortKey: 'sort',
pageSize: 'size',
currentPage: 'page'
},
parseState: function (resp) {
return {totalRecords: resp && resp.length > 0 ? resp[0]['total_entries'] : 0};
},
parseRecords: function (resp) {
return resp && resp.length > 0 ? resp[1] : [];
},
model: Backbone.NestedModel
});
Example Instantiation
collections.myTasks = new collections.PagingCollection([], {
model: models.SyncModel.extend({
url: URLs.TASKS
}),
url: URLs.MY_TASKS,
state: {
pageSize: 30,
firstPage: 0,
currentPage: 0,
}
});
Columns
columns: [
{
name: "dueDate",
label: "Due Date",
cell: "date",
filterCell: FilterCell,
editable: false,
width: "80px"
},
{
name: "reminder",
label: "Reminder",
filterCell: FilterCell,
cell: Backgrid.StringCell.extend({
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function (rawValue, model) {
return DateHelper.format(
IntervalHelper.calculateBefore(model.attributes['dueDate'], rawValue)
);
}
})
}),
editable: false,
width: "80px"
},
{
name: "name",
label: "Subject",
cell: "string",
filterCell: FilterCell,
editable: false,
width: "auto"
},
{
name: "taskStatusCtlg.taskStatus",
label: "State",
filterCell: SelectFilterCell.extend({
filterField: 'taskStatus',
addAllOption: true
}),
cell: "string",
width: "75px"
},
{
name: "assignedTo.alfrescoUserName",
label: "Assigned To",
cell: "string",
filterCell: SelectFilterCell.extend({
filterField: 'assignee',
addAllOption: true
}),
editable: false,
width: "120px"
},
{
name: "taskTypeCtlg.taskType",
label: "Type",
cell: "string",
filterCell: SelectFilterCell.extend({
filterField: 'taskType',
addAllOption: true
}),
editable: false,
width: "70px"
},
{
name: "mainDocument.name",
label: "Case / Document",
link: "mainDocument.id",
cell: LinkCell,
filterCell: FilterCell,
editable: false,
width: '160px'
}
],
Fetching the data etc. is done without problems. But when clicking on a caret sorting is done on the client. But I need that attributes "sort" and "order" get append to the request URL when clicking on a column header (sorting on the server).
Current request:
http://localhost/tasks/user?page=0&size=30
Needed request:
http://localhost/tasks/user?page=0&size=30&sort=name&order=asc
Paginator offers 3 modes for the fetching and sorting:
client: all on the client. Feed the data yourself.
server: Fetch the data from an API (e.g.: collection.getFirstPage()) and receive the total number of pages.
infinite: like the server mode, but best used with unknown number of pages. Like a search result from an external API.
Ensure that you're using the server value for the mode property on the PageableCollection.
var books = new Books([
{ name: "A Tale of Two Cities" },
{ name: "Lord of the Rings" },
// ...
], {
// Paginate and sort on the server side, this is the default.
mode: "server",
});
or within your collection class definition:
module.exports = Backbone.PageableCollection.extend({
mode: "server", // this is the default
initialize: /*...*/
Other than that, this is likely solvable within Backgrid.
The default of Backgrid is to sort on the client. For a custom behavior, you can
provide a Backbone.PageableCollection
or override the HeaderCell view with your own implementation
Using a Backbone.PageableCollection
Set the collection property of the Grid.
var taskGrid = new Backgrid.Grid({
collection: collections.myTasks,
columns: [/*...*/],
});
Overriding the HeaderCell view
You are allow to use a different header cell class on columns. There is no restriction on what a header cell must do. In fact, any Backbone.View class can be used. However, if you wish to modify how the sorter behaves, you must
implement the sorting protocol. See the JSDoc for details.
var SelectAllHeaderCell = Backgrid.HeaderCell.extend({
// Implement your "select all" logic here
});
var grid = new Backgrid.Grid({
columns: [{
name: "selected",
label: "",
sortable: false,
cell: "boolean",
headerCell: SelectAllHeaderCell
}],
collection: col
});
Note (2017/01/30): Links to the API documentation within the documentation are not up to date, this is being discussed in issue #664.
I've got a prototype of a combo box where I'm trying to set the store data at runtime.
When I try to do this, the menu under the combobox doesn't render (or it renders so small you can't actually see it). It's here on sencha fiddle:
Ext.define('ComboBoxRates',{
extend: 'Ext.data.Store',
alias: 'store.rates',
storeId: 'ratescombo',
fields: ['rate', 'description', 'price' ]
});
Ext.define('ComboPanel',{
extend: 'Ext.panel.Panel',
title: 'Test',
renderTo: Ext.getBody(),
items:[
{
xtype: 'combobox',
editable: false,
displayField: 'description',
valueField: 'price',
}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var data = [
{
description: "$105: Standard Registration",
price: "105",
rate: "rate1"
},
{
description: "$125: Non-Member Rate",
price: "125",
rate: "rate2"
},
{
description: "$44: Price for SK tester",
price: "44",
rate: "rate3"
},
{
description: "$11: Another price :O",
price: "11",
rate: "rate5"
}
];
var rates = Ext.create('ComboBoxRates');
rates.setData(data);
// Showing data is loaded into the store
console.group('directly from store instance');
rates.each(function (rate){
console.log(rate.getData());
});
console.groupEnd();
var panel = Ext.create('ComboPanel');
panel.down('combobox').setStore(rates);
// Showing that the data is definitely in the widget's store
console.group('from widget store');
panel.down('combobox').getStore().each(function (rate){
console.log(rate.getData());
});
console.groupEnd();
}
});
I know the data is loaded into the combobox's store (open the console log in the fiddle) so I'm not sure why it's not rendering correctly.
I know this seems silly in this context, but the prototype is logic extracted out of a grid's widget column where each row has different store data.
I also built a one-step-back prototype with the same structure but the same data is inlined in the store's definition and that works:
Ext.define('ComboBoxRates',{
extend: 'Ext.data.Store',
alias: 'store.rates',
storeId: 'ratescombo',
fields: ['rate', 'description', 'price' ],
data: [
{
description: "$105: Standard Registration",
price: "105",
rate: "rate1"
},
{
description: "$125: Non-Member Rate",
price: "125",
rate: "rate2"
},
{
description: "$44: Price for SK tester",
price: "44",
rate: "rate3"
},
{
description: "$11: Another price :O",
price: "11",
rate: "rate5"
}
]
});
Ext.define('ComboPanel',{
extend: 'Ext.panel.Panel',
title: 'Test',
renderTo: Ext.getBody(),
items:[
{
xtype: 'combobox',
editable: false,
displayField: 'description',
valueField: 'price',
}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var rates = Ext.create('ComboBoxRates');
var panel = Ext.create('ComboPanel');
panel.down('combobox').setStore(rates);
}
});
I thought an updateLayout would resolve the issue but it doesn't.
Is there something wrong with my code? Is there some way of setting a combobox's values at runtime?
You are missing queryMode, use queryMode: 'local' in the combo.
Working example: https://fiddle.sencha.com/#fiddle/10al
I've got an incoming array of Offering objects that looks like this:
[{
"id" : 16,
"price" : 500,
"quantity" : 2000,
"denomination" : "case",
"denominationPlural" : "cases",
"product" : {
"id" : 14,
"description" : "This is the text description for product 14."
}
}, {
"id" : 18,
"price" : 500,
"quantity" : 1,
"denomination" : "study",
"denominationPlural" : "studies",
"product" : {
"id" : 17,
"description" : "This is a text description for product 17."
}
}]
An Offering is a Product times a quantity for a price.
Now I want to display these Offerings in a GridPanel, but also include the nested product information in those rows. Here's how I was doing it before:
Ext.define('Offering', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'number'},
{name: 'price', type: 'number'},
{name: 'quantity', type: 'number'},
{name: 'denomination', type: 'string'},
{name: 'denominationPlural', type: 'string'},
{name: 'product.description', type: 'string'},
]
});
var offeringStore = Ext.create('Ext.data.Store', {
autoDestroy: true,
model: 'Offering',
proxy: {
type: 'ajax',
url: '/offerings',
reader: {
type: 'json',
root: 'success'
}
},
autoLoad:true
});
var offeringGrid = Ext.create('Ext.grid.Panel', {
store: offeringStore,
columns: [{
header: 'id',
dataIndex: 'id'
}, {
header: 'price',
dataIndex: 'price'
}, {
header: 'quantity',
dataIndex: 'quantity'
}, {
header: 'denomination',
dataIndex: 'denomination'
}, {
header: 'description',
dataIndex: 'product.description'
},
};
And this worked just fine. Then, somewhere along the way (which included an upgrade to ExtJS 5.1.1 (from ExtJS 4.2.1) and use of Sencha Architect, it broke.
Problem 1: Sencha Architect prevents creating an entry for "product.description" in the Offering Model, complaining about the "." character. But if you create it as "whateveryouwant", you can go into the model field and rename it to "product.description" there.
Problem 2: after working around the "." issue and running the application, the "product.description" column's cells are blank.
Problem 3: the javascript console produces zero errors. The incoming data looks fine.
How should I go about getting this nested data to show up?
The way I do it is quite simple. Just add the mapping attribute to the model this way:
{
name: 'product.description',
type: 'string',
mapping : 'product.description'
}
No need for renderer.
My current workaround, which may help others in the same situation, uses a "renderer" clause to display the information desired.
{
xtype: 'gridpanel',
title: 'Offerings',
bind: {
store: '{OfferingsStore}'
},
columns: [
...
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return record.getData().product.description;
},
text: 'Product Description'
},
...
]
But I'd still like an answer about using "product.description" in the Offering Model definition rather than this rendering trick.
As per http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/row-editing.html example, I have the following code on my grid to facilitate adding new records to my store:
tbar: [{
text: 'Add Rate',
handler: function(button) {
var myGrid = button.up('grid');
//console.log(myGrid);
var myPlugin = myGrid.getPlugin('rowediting');
myPlugin.cancelEdit();
var r = Ext.create('RateManagement.model.CountrySpecific', {
id: '',
hostCountryId: '',
hostCountry: '',
rate: 0,
currencyId: '',
rateTypeId: '',
frequencyCode: '',
perFamilyMember: '',
familySize: 0
});
console.log(r);
var store = myGrid.getStore();
store.insert(0, r);
myPlugin.startEdit(0, 0);
}
}],
This is my model with the proxy:
Ext.define('RateManagement.model.CountrySpecific', {
extend: 'Ext.data.Model',
fields:
[
{name:'id', type: 'string'},
{name:'hostCountryId', type: 'string'},
{name:'hostCountry', type: 'string'},
{name:'rate',type: 'number', useNull: true},
{name:'currencyId', type: 'string'},
{name:'rateTypeId', type:'string'},
{name:'frequencyCode', type:'string'},
{name:'perFamilyMember'},
{name:'familySize', type: 'int', useNull: true}
],
proxy: {
type: 'rest',
format: 'json',
url: '/intake/sap/rates/CountrySpecific',
actionMethods: {
create : 'PUT',
read : 'GET',
update : 'PUT',
destroy: 'PUT'
}
}
});
Whenever I click "Add Rate" to insert a new record into my store, it calls my proxy and generates a GUID. However, when I go to click "Update" on that record, there is no ID value - it's just null. As a result, it just inserts a new record instead of updating the existing one I just created.
So, is there a way to use the reader of the proxy to try to update my model with the new ID that was generated?
Or, am I going about this the wrong way?
I am using ListFilter plugin to filter results on a Grid panel. The column definition is.
{
header: 'Provider',
filter: {
type: 'list',
store: Ext.getStore('MyApp.store.Provider'),
dataIndex: 'provider_id',
labelField: 'name'
}
}
MyApp.store.Provider is created as
Ext.create('Ext.data.Store', {
storeId: 'MyApp.store.Provider',
autoDestroy: true,
autoLoad: {start: 0, limit: 50},
autoSync: true,
model: 'MyApp.model.Provider',
pageSize: 50,
proxy: {
type: 'ajax',
api: {
create: 'proxy/provider/create',
read: 'proxy/provider/read',
update: 'proxy/provider/update',
destroy: 'proxy/provider/destroy'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'total'
},
writer: {
allowSingle: false,
type: 'json',
writeAllFields: false,
root: 'data'
}
}
});
And lastly model MyApp.model.Provider is defined as
Ext.define('MyApp.model.Provider', {
extend: 'Ext.data.Model',
fields: [
{ name: 'provider_id', type: 'int'},
'name',
{ name: 'create_time', type: 'date', dateFormat: appDateFormat },
{ name: 'status', type: 'int'}
],
idProperty: 'provider_id',
displayProperty: 'name' // A custom property used for dynamically use the property to display
})
Now this code does not show any sub-menu in the filter menu. It just shows loading. See the image.
Update
I have solved it using following filter config. This actually populates options config manually. So no store is used here.
{
type: 'list',
labelField: 'name',
options: (function () {
var opts = [];
fS.load(function (records, operation, success) {
for (var i = 0; i < records.length; i++) {
var ar = {
id: records[i].get('provider_id'),
name: records[i].get('name')
};
opts.push(ar);
}
});
return opts;
})(),
single: true
}
It seems 'id' is hard-coded. id: records[i].get('provider_id'), does not look good. Though it works.
But I am still looking for a proper way to do it.
Note: The expected behavior can be found on ExtJS 4.1.1. See this jsfiddle. I have reproduced it. But this very same thing does not work on ExtJS 4.0.7
I didn't tried this myself but you need to set the ID manually with the idField property [new to ExtJS4.1.3] which is per default set to id. So I guess this will work:
{
header: 'Provider',
filter: {
type: 'list',
idField: 'provider_id',
store: Ext.getStore('MyApp.store.Provider'),
dataIndex: 'provider_id',
labelField: 'name'
}
}
Update
OK, I looked at the source and I can now tell you that this is the answer. So will have to either live with your workarround until 4.2 is out or you can apply the following changes to your Ext.ux.grid.menu.ListMenu to make it run:
add the idField with a default value.
look within the constructor for this lines
case 'object': options.push([value.id, value[this.labelField]]); break;
// some more lines
fields: ['id', this.labelField],
and replace it with
case 'object': options.push([value[me.idField], value[me.labelField]]); break;
// some more lines
fields: [me.idField, me.labelField],
and within the onLoad function look for
itemValue = records[i].get('id');
and replace it with
itemValue = records[i].get(me.idField);
and that pretty much is it.