The following ExtJS grid worked until I put the checkbox column in it, now I get this error:
I based the checkbox column code on this code.
What do I need to do to get the checkbox column to work?
var myData = [
[4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, true, '2010-11-17 08:31:12'],
[16, 'Computer2', 0.28, false, '2010-11-14 08:31:12'],
[5, 'Network1', 0.02, false, '2010-11-12 08:31:12'],
[1, 'Network2', 0.01, false, '2010-11-11 08:31:12'],
[12, 'Other', 0.42, false, '2010-11-04 08:31:12']
];
var myReader = new Ext.data.ArrayReader({}, [{
name: 'id',
type: 'int'
}, {
name: 'object',
type: 'object'
}, {
name: 'status',
type: 'float'
}, {
name: 'rank',
type: 'boolean'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'Y-m-d H:i:s'
}]);
var grid = new Ext.grid.GridPanel({
region: 'center',
style: 'margin: 10px',
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [{
header: 'ID',
width: 50,
sortable: true,
dataIndex: 'id',
hidden: false
},
{
header: 'Object',
width: 120,
sortable: true,
dataIndex: 'object',
renderer: columnWrap
}, {
header: 'Status',
width: 90,
sortable: true,
dataIndex: 'status'
},
{
xtype: 'checkcolumn',
header: 'Test',
dataIndex: 'rank',
width: 55
},
{
header: 'Last Updated',
width: 120,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
dataIndex: 'lastChange'
}],
viewConfig: {
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
if(rowIndex == 2){
return 'red-row';
} else {
return '';
}
}
},
title: 'Computer Information',
width: 500,
autoHeight: true,
frame: true,
listeners: {
'rowdblclick': function(grid, index, rec){
var id = grid.getSelectionModel().getSelected().json[0];
go_to_page('edit_item', 'id=' + id);
}
}
});
You get this error because you have not included the CheckColumn extension. You can get the extension from : http://dev.sencha.com/deploy/dev/examples/ux/CheckColumn.js .. include it and you should be able to remove the error..
Related
I'm trying to put a GridPanel powered by an ArrayStore in a Window, but no matter what I do, it just looks like this with no data rows inside:
Here's my code:
var ticketsStore = new Ext.data.ArrayStore
(
{
autoDestroy: false,
remoteSort: false,
data: result,
fields:
[
{ name: 'articleId', type: 'int' },
{ name: 'heatTicketRef', type: 'string' },
{ name: 'username', type: 'string' },
{ name: 'dateLinked', type: 'date' }
]
}
);
var ticketsGrid = new Ext.grid.GridPanel({
store: ticketsStore,
id: this.id + 'ticketsGrid',
viewConfig: {
emptyText: 'No data'
},
autoShow: true,
idProperty: 'heatTicketRef',
columns: [
{ id: 'heatTicketRef', header:"Ticket ID", width: 100, dataIndex: 'heatTicketRef', sortable: false },
{ header: "User", width: 100, dataIndex: 'username', sortable: false },
{ header: "Date Linked", width: 100, dataIndex: 'dateLinked', xtype: 'datecolumn', format: 'j M Y h:ia', sortable: false }
]
});
var window = new Ext.Window
(
{
renderTo: Ext.getBody(),
id: this.id + 'linkedHeatTickets',
closable: true,
modal: true,
autoHeight: true,
width: 500,
title:'Linked Heat Tickets',
resizable: false,
listeners:
{
close: function () { // do something }
},
items:
{
style: 'padding:5px;',
items: ticketsGrid
},
buttons:
{
text: 'Close',
handler: function () {
window.close();
}
}
}
);
window.show();
When I debug, I can see that my "result" object is healthy and the ArrayStore is of the right length:
But the GridPanel doesn't like the data because it's not in its items (although it's in the store) array:
What little thing have I done wrong?
Thanks!
Because I'm an idiot... I used an ArrayStore instead of a JsonStore!
I'm having some difficulty loading my jqGrid with a big amount of rows. Once my document is ready I'm calling a Javascript function that gets a collection of objects from an API and then adds the row data to the grid. Everything has been working fine, but now I have over 20,000 rows, so the grid never loads. Is there something I can do to fix this? Is it possible to only paint the data that the user can see? For example, if the row number on the pager is set to 50, can I simply only load 50 rows and not all 25,000?
Here's my grid:
$(function () {
$("#grid").jqGrid({
datatype: "local",
loadonce: false,
height: "auto",
search: true,
title: false ,
autowidth: true,
shrinkToFit: true,
searchOnEnter: true,
colNames: ['ID', 'BDO Number', 'BDO Date', 'Delivery Date', 'Miles', 'Zip Code', 'Zone', 'Fuel Surcharge', 'Driver', 'Driver Rate', 'Total Driver Pay', 'Order', 'Driver ID',
'Vendor ID', 'Vendor', 'Airport', 'Airline', 'Claim Reference', 'Clear Date', 'Mileage', 'Mileage Cost', 'Special', 'Special Cost', 'Exc Cost', 'Pickup Date', 'Total Delivery Cost',
'Vendor Profit', 'Driver Percent', 'Driver Fuel Surcharge', 'Total Driver Reported', 'Payment', 'User Cleared', 'Excess Costs', 'Additional Fees', 'DriverCostSchemaID'],
colModel: [
{ name: 'ID', index: 'ID', hidden: true },
{ name: 'BDONumber', index: 'BDONumber', align: 'center', classes: 'gridButton' },
{ name: 'BDODate', index: 'BDODate', width: 250, align: 'center', formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
{ name: 'DeliveryDate', index: 'DeliveryDate', width: 250, align: 'center', formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
{ name: 'Miles', index: 'Miles', width: 40, align: 'center' },
{ name: 'ZipCode', index: 'ZipCode', width: 55, align: 'center' },
{ name: 'Zone', index: 'Zone', width: 40, align: 'center' },
{ name: 'FuelFloat', index: 'FuelFloat', width: 50, align: 'center', formatter: money, sorttype: 'float' },
{ name: 'DriverName', index: 'DriverName', width: 125, align: 'center' },
{ name: 'RateFloat', index: 'RateFloat', width: 75, align: 'center', formatter: money, sorttype: 'float' },
{ name: 'PayFloat', index: 'PayFloat', width: 75, align: 'center', formatter: money, sorttype: 'float' },
{ name: 'Order', index: 'Order', hidden: true },
{ name: 'Driver', index: 'Driver', hidden: true },
{ name: 'Vendor', index: 'Vendor', hidden: true },
{ name: 'Airport', index: 'Airport', hidden: true },
{ name: 'Airline', index: 'Airline', hidden: true },
{ name: 'VendorName', index: 'VendorName', hidden: true },
{ name: 'ClaimReference', index: 'ClaimReference', hidden: true },
{ name: 'ClearDate', index: 'ClearDate', hidden: true, formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
{ name: 'Mileage', index: 'Mileage', hidden: true },
{ name: 'MileageCost', index: 'MileageCost', hidden: true, formatter: money },
{ name: 'Special', index: 'Special', hidden: true },
{ name: 'SpecialCost', index: 'SpecialCost', hidden: true, formatter: money },
{ name: 'ExcCost', index: 'ExcCost', hidden: true, formatter: money },
{ name: 'PickupDate', index: 'PickupDate', hidden: true, formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
{ name: 'TotalDeliveryCost', index: 'TotalDeliveryCost', hidden: true, formatter: money },
{ name: 'VendorProfit', index: 'VendorProfit', hidden: true, formatter: money },
{ name: 'DriverPercent', index: 'DriverPercent', hidden: true },
{ name: 'DriverFuelSurcharge', index: 'DriverFuelSurcharge', hidden: true, formatter: money },
{ name: 'TotalDriverReported', index: 'TotalDriverReported', hidden: true, formatter: money },
{ name: 'Payment', index: 'Payment', hidden: true },
{ name: 'UserCleared', index: 'UserCleared', hidden: true },
{ name: 'ExcCost', index: 'ExcCost', hidden: true },
{ name: 'AdditionalFees', index: 'AdditionalFees', hidden: true, formatter: money },
{ name: 'DriverCostSchemaID', index: 'DriverCostSchemaID', hidden: true },
],
rowNum: 100,
rowList: [100, 500, 1000, 100000],
viewrecords: true,
pager: "pager",
sortorder: "desc",
sortname: "DeliveryDate",
ignoreCase: true,
headertitles: true,
emptyrecords: "There are no results.",
})
$("#grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
GetBDOs();
});
And the GetBDOs function:
function GetBDOs() {
var request = $.ajax({
url: "#Url.Action("GetBDOs", "DPAdmin")",
type: "GET",
cache: false,
async: true,
dataType: "json"
});
request.done(function (results) {
var thegrid = $("#grid");
thegrid.clearGridData();
for (var i = 0; i < 100; i++) {
thegrid.addRowData(i + 1, results[i]);
}
thegrid.trigger("reloadGrid");
});
}
Which calls this:
[Authorize]
public JsonResult GetBDOs()
{
List<BDO> BDOs= new List<BDO>();
// Get all BDOs
BDOs = WebInterface.GetBDOs();
var jsonResult = Json(BDOs.ToArray(), JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
WebInterface.GetBDOs simply hits the database and grabs all the current BDO objects, which is now between 20,000 - 25,000 and freezes the grid. Any help with this?
You really should be paginating that data on the server side before sending it back to the browser. Then all you need to do is fetch the next/prev page and redraw the grid.
The part
var thegrid = $("#grid");
thegrid.clearGridData();
for (var i = 0; i < 100; i++) {
thegrid.addRowData(i + 1, results[i]);
}
thegrid.trigger("reloadGrid");
of GetBDOs function makes performance problems definitively. Instead of calling addRowData in the loop you should set data parameter to results with respect of setGridParam:
var thegrid = $("#grid");
thegrid.clearGridData();
thegrid.jqGrid("setGridParam", {data: results});
thegrid.trigger("reloadGrid");
Additionally it's very important to add gridview: true option to jqGrid.
Even better seems to me to replace use url: "#Url.Action("GetBDOs", "DPAdmin")" as jqGrid parameters together with datatype: "json" and loadonce: true. It will makes the same Ajax call to the server and fill the grid with all 20000 or 25000 rows of data, but placing only 100 first rows in the grid.
One more recommendation will be to use key: true property in ID column. It will inform jqGrid to use the value from ID column as rowid (the value of id attributes of <tr> elements of the grid). You should consider additionally to remove a lot of hidden columns and saves the data only in the internal data option of the grid.
Model
Ext.define('XXX.User', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
'nick',
'mobile',
{ name: 'create_time', type: 'date', dateFormat: 'Y-m-d H:i:s' }
]
});
Ajax Response
{
"error": "",
"errno": 0,
"success": true,
"message": "Operation performed successfully",
"data": [{
"nick": "muquaddim1",
"name": "Muquaddim One",
"id": "141",
"mobile": "01710000***",
"email": "muquaddim+1#example.com",
"create_time": "2012-02-26 14:58:29"
}]
}
Store
var user_store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
autoLoad: true,
model: 'XXX.User',
sotreId: 'user-store',
proxy: {
type: 'ajax',
url : 'proxy/user'
},
sorters: [{
property: 'create_time',
direction: 'ASC'
}]
});
Grid
var user_grid = Ext.create('Ext.grid.Panel', {
title: 'List of Users',
store: user_store,
columns: [{
header: 'Nick',
dataIndex: 'nick',
editor: {
allowBlank: false
}
}, {
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
header: 'Mobile',
dataIndex: 'mobile',
width: 100,
editor: {
allowBlank: false
}
}, {
xtype: 'datecolumn',
header: 'Join Date',
dataIndex: 'create_time',
width: 90,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d H:i:s',
maxValue: Ext.Date.format(new Date(), 'Y-m-d H:i:s')
}
}]
});
Panel
var users = Ext.create('Ext.panel.Panel', {
title: 'Users',
id: 'user_panel',
items:[user_grid]
});
I am using ExtJS 4.0.7. I modified the code found in Example. Example code works fine. But it does not work. What am I missing here?
Since your data is nested in your response you need to configure a reader in your store's proxy. Try setting up your proxy like this:
proxy: {
type: 'ajax',
url : 'proxy/user'
reader: {
type: 'json',
root: 'data'
}
}
I have a grid that I'm trying to populate from an XmlStore, which is populated from an Xml String. So far, the store appears to be load the XML just fine, but I cannot get the grid to load the store. (i.e. grid.getStore().getCount() is always 0.
// create the Data Stores for use by the grid
Ext.define('InterfaceModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', mapping: 'id' },
{ name: 'InterfaceName', mapping: 'InterfaceName' },
{ name: 'TX_OCTETS', mapping: 'TX_OCTETS' },
{ name: 'TX_BAD_OCTETS', mapping: 'TX_BAD_OCTETS' },
{ name: 'TX_FRM', mapping: 'TX_FRM' },
{ name: 'TX_BAD_FRM', mapping: 'TX_BAD_FRM' },
{ name: 'TX_MCAST', mapping: 'TX_MCAST' },
{ name: 'TX_BCAST', mapping: 'TX_BCAST' },
{ name: 'TX_PAUSE', mapping: 'TX_PAUSE' }
],
idProperty: 'id'
});
My XML is as follows:
var gridData = '<?xml version="1.0" encoding="UTF-8"?> <Interfaces> <Interface> <id>1</id> <InterfaceName>GMAC1</InterfaceName> <TX_OCTETS>123234</TX_OCTETS> <TX_BAD_OCTETS>234</TX_BAD_OCTETS> <TX_FRM>234234</TX_FRM> <TX_BAD_FRM>2341</TX_BAD_FRM> <TX_MCAST>23</TX_MCAST> <TX_BCAST>56</TX_BCAST> <TX_PAUSE>8</TX_PAUSE></Interface> <Interface> <id>2</id> <InterfaceName>GMAC2</InterfaceName> <TX_OCTETS>123234</TX_OCTETS> <TX_BAD_OCTETS>234</TX_BAD_OCTETS> <TX_FRM>234234</TX_FRM> <TX_BAD_FRM>2341</TX_BAD_FRM> <TX_MCAST>23</TX_MCAST> <TX_BCAST>56</TX_BCAST> <TX_PAUSE>8</TX_PAUSE></Interface></Interfaces>';
var gridDataXml = (new DOMParser()).parseFromString(gridData,'text/xml');
console.log ('xml', gridDataXml); // everything looks fine
I then define my store using a memory proxy XML reader:
var eioaGridStore = new Ext.data.XmlStore({
model: 'InterfaceModel',
autoLoad: true,
proxy: {
type: 'memory',
reader: {
type: 'xml',
root: 'Interfaces',
record: 'Interface',
idProperty: 'id'
}
}
});
And then load the parsed XML DOM into the store:
eioaGridStore.loadRawData(gridDataXml);
If I getCount() on the store, it properly responds with 2.
Viewing the store from the Web Inspector shows 2 arrays (that I want to be rows in my grid) (pardon the formatting)
store
Object
data: Object
allowFunctions: false
events: Object
generation: 3
getKey: function (record) {
hasListeners: Object
items: Array[2]
0: Object
data: Object
dirty: false
events: Object
hasListeners: Object
id: "InterfaceModel-1"
internalId: "1"
modified: Object
phantom: false
raw: Element
store: Object
stores: Array[1]
__proto__: Object
1: Object
length: 2
__proto__: Array[0]
keys: Array[2]
length: 2
map: Object
sorters: Object
__proto__: Object
events: Object
eventsSuspended: 0
filters: Object
groupers: Object
hasListeners: Object
model: function i() {return this.constructor.apply(this,arguments)||null;}
modelDefaults: Object
pageSize: 25
proxy: Object
removed: Array[0]
sorters: Object
totalCount: 2
__proto__: Object
My grid component is as follows:
createGrid: function () {
var me = this;
return {
id: 'eioaGrid',
xtype: 'grid',
border: true,
store: this.eioaGridStore,
columns: [{
header: 'Interface',
dataIndex: 'InterfaceName',
align: 'center',
sortable: true,
tooltip: 'Axxia Interface'
}, {
text: 'OCTETS',
sortable: false,
width: 100,
tooltip: 'Total number of octets in all frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_OCTETS',
tooltip: 'Transmitted'
}]
}, {
text: 'BAD OCTETS',
sortable: false,
width: 100,
tooltip: 'Total number of octets in all bad frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_BAD_OCTETS',
tooltip: 'Transmitted'
}]
}, {
text: 'FRAMES',
sortable: false,
width: 100,
tooltip: 'Total number of frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_FRM',
tooltip: 'Transmitted'
}]
}, {
text: 'BAD FRAMES',
sortable: false,
width: 100,
tooltip: 'Total number of bad frames.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_BAD_FRM',
tooltip: 'Transmitted'
}]
}, {
text: 'MULTICAST',
sortable: false,
width: 100,
tooltip: 'Multicast Frames: good non-pause frames with a multicast destination address which is not the broadcast address.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_MCAST',
tooltip: 'Transmitted'
}]
}, {
text: 'BROADCAST',
sortable: false,
width: 100,
tooltip: 'Broadcast Frames: good frames with the broadcast destination address.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_BCAST',
tooltip: 'Transmitted'
}]
}, {
text: 'PAUSE',
sortable: false,
width: 100,
tooltip: 'Pause Frames: pause frames internally generated by the MAC.',
columns: [{
header: 'TX',
width: 50,
align: 'center',
sortable: true,
dataIndex: 'TX_PAUSE',
tooltip: 'Transmitted'
}]
}]
};
}
Later, I then getCount() via the grid's store and it comes back as empty.
console.log('grid store count', Ext.getCmp('eioaGrid').store.getCount());
Any ideas? Been stumped for a couple of days now and I'm going mad! thanks.
Just a wild guess as I didn't load up your code, but maybe remove the autoload from the store definition since you are doing it manually?
I just found it... my reference to this.eioaGridStore when setting the grid store: was not in scope (was undefined)... everything now working.
I have an Editor Grid and a store with a custom type in it.
store :
var sourceStore = new Ext.data.JsonStore({
url: hp,
storeId: 'labels-data-store',
idProperty: 'ID',
root: 'results',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'LanguageID',
type: 'int'
}, {
name: 'KeyID',
type: 'int'
}, {
name: 'Value',
type: 'string'
}, {
name: 'ToolTip',
type: 'string'
}, {
name: 'LanguageName',
type: 'string'
}, {
name: 'KeyInfo',
type: 'LanguageKeyInfo'
},
CUSTOM TYPE HERE !! !{
name: 'ServerComments',
type: 'string'
}]
});
Editor Grid :
var sourceGrid = new Ext.grid.EditorGridPanel({
id: 'source-grid',
region: 'center',
title: localize.sourceView,
iconCls: 'source-view-title',
store: sourceStore,
trackMouseOver: true,
disableSelection: false,
loadMask: true,
split: true,
stripeRows: true,
border: true,
autoExpandColumn: 'label',
cm: sourceColModel,
// customize view config
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: false,
emptyText: localize.noRecordsFound
},
sm: new Ext.grid.RowSelectionModel({
singleSelect: false,
moveEditorOnEnter: true
})
});
Custome Type implementation:
LanguageKeyInfo = function () {
this.ID = arguments[0];
this.Value = arguments[1];
this.Description = arguments[2];
}
Ext.data.Types.LANGUAGEKEYINFO = {
convert: function (v, data) {
if (!data) {
return null;
}
if (!data.KeyInfo) {
return null;
}
return new LanguageKeyInfo(
data.KeyInfo.ID,
data.KeyInfo.Value,
data.KeyInfo.Description);
},
sortType: function (key) {
return key.ID;
},
type: 'LanguageKeyInfo'
}
Source Column Model:
var sourceColModel = new Ext.grid.ColumnModel({
columns: [{
header: 'ID',
dataIndex: 'ID',
width: 50,
hidden: true,
sortable: true
}, {
header: 'Language ID',
dataIndex: 'LanguageID',
width: 50,
hidden: true,
sortable: true
}, {
header: 'Language',
dataIndex: 'LanguageName',
width: 20,
hidden: true,
sortable: true
}, {
header: 'Key ID',
dataIndex: 'KeyID',
width: 30,
hidden: true,
sortable: true
}, {
header: 'Key',
dataIndex: 'KeyValue',
width: 40,
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 200
})
}, {
header: 'Label',
dataIndex: 'Value',
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 500
}),
renderer: function (sc) {
var lanID = getSelectedLanguageID() ? getSelectedLanguageID() : 1;
switch (parseInt(lanID)) {
case 2:
return '<div class="rtl">' + sc + '</div>';
default:
return sc;
}
}
}, {
header: 'Description',
dataIndex: 'KeyDescription',
width: 30,
editor: new Ext.form.TextField({
allowBlank: true,
vtype: 'englishOnly',
maxLength: 100
})
}, {
header: 'Tool Tip',
dataIndex: 'ToolTip',
width: 80,
sortable: true,
editor: new Ext.form.TextField({
allowBlank: true,
maxLength: 200
})
}]
});
When I start editing the first column row the text field value is [object,object] which mean the grid is passing the KeyInfo object to the textbox value.
How can I send one of KeyInfo properties to the textbox and have it mapped to the store record ??
For starters your dataIndex does not reference a valid record mapping:
dataIndex: 'KeyValue', should probably be dataIndex: 'KeyInfo',
Secondly I don't think there is any support for custom types on grid editors. I might be wrong of course.