Develop Reference

How to get scope of grid

I am creating a grid inside one penal. Now I wanted to access this grid and for that I am writing a function.
which is like this.
function getGrid(obj, store){
debugger;
}
Here obj is grid and store is store.
But I don't know where to write. How to get the correct scope.
my Store and Grid code is
initComponent:function(){
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole Blood',2,'eSample']
];
// create the data store
var myStor = new Ext.data.ArrayStore({
fields: [
{name: 'Stu'},
{name: 'Sub'},
{name: 'Excl'}
]
});
{
xtype: 'panel',
region:"east",
header:true,
collapsible:true,
autoScroll:true,
width:"30%",
hideBorders:true,
split:true,
items: [{
xtype:'panel',
title:"Panel Header",
items:[],
id:'East_pan',
tbar: this.desToolbar
},{
xtype:'panel',
title:"Result",
items:[{
xtype :'grid',
id: 'COHART_GRID',
selType: 'checkboxmodel',
frame: true,
store: myStor,
autoHeight: true,
stripeRows: true,
columns: [
{
text: 'Study',
id: 'Sd',
header: 'Study',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Stu'
},
{
text: 'Subject',
width: 130,
header: 'Subject',
id:'Sub',
dataIndex: 'Sub',
hidden:false,
},
{
text: 'Exclude',
width: 130,
id:'Ext',
header: 'Exclude',
dataIndex: 'Excl',
hidden:false
}
]
}]
}]
}
}
Thanks for help !!

You can get the grid using getCmp function & after getting the grid you can call getStore on it to get its store:
var obj=Ext.getCmp('COHART_GRID');
var store=obj.getStore();

1) Dont Use getCmp() use Component query.
2) Change id to itemID in the Grid declaration.
xtype :'grid',
itemId: 'COHART_GRID',
selType: 'checkboxmodel',
frame: true,
store: myStor,
autoHeight: true,
stripeRows: true,
3) store = Ext.ComponentQuery.query('#COHART_GRID')[0].getStore().
4) can you access your grid and Store in the Controller.

Issues Loading jqGrid with 25,000 Rows

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.

ExtJS 4.1.1 Infinite Scrolling only loading first page

I want to get an infinite scrolling grid with extjs4 and a c# backend... i am setting the proxy api in my controller..
My Model:
Ext.define('appname.model.training.course.TrainingRequirementList', {
extend: 'Ext.data.Model',
idProperty: 'ID',
fields: [
{ name: 'ID', type: 'int', convert: null },
{ name: 'EmployeeName', type: 'string' },
{ name: 'Description', type: 'string' },
{ name: 'StatusText', type: 'string' },
{ name: 'Status', type: 'int' },
{ name: 'Priority', type: 'string' },
{ name: 'Date', type: 'string' },
{ name: 'Cost', type: 'string' },
{ name: 'CanApprove', type: 'bool' },
{ name: 'CanRequest', type: 'bool' },
{ name: 'ConfirmStatus', type: 'string' },
{ name: 'PlanId', type: 'int'}
]
});
My Grid:
{
xtype: 'gridpanel',
flex: 1,
padding: '0 10 10 10',
minHeight: 200,
verticalScroller: {
xtype: 'paginggridscroller'
},
store: {
model: 'appname.model.training.course.TrainingRequirementList',
pageSize: 200,
autoLoad: true,
buffered: true,
remoteSort: true,
sorters: {
property: 'Date',
direction: 'DESC'
},
proxy: {
type: 'direct',
extraParams: {
total: 50000
},
reader: {
type: 'json',
root: 'ID',
totalProperty: 'TotalCount'
},
simpleSortMode: true
}
},
columns:
[{
text: Lang.Main.Employeee,
dataIndex: 'EmployeeName',
flex: 1,
filterable: true
},
{
text: Lang.Main.Course,
dataIndex: 'Description',
flex: 1,
filterable: true
},
{
text: Lang.Main.Status,
dataIndex: 'StatusText',
flex: 1,
filterable: true
},
{
text: Lang.Main.Priority,
dataIndex: 'Priority',
flex: 1
},
{
text: Lang.Main.Date,
dataIndex: 'Date',
flex: 1
},
{
text: Lang.Main.Cost,
dataIndex: 'Cost',
flex: 1,
filterable: true
},
{
text: Lang.Main.Actions,
flex: 1,
align: 'center',
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'Design/icons/cog_edit.png',
tooltip: Lang.Main.Open,
handler: function (grid, rowIndex, colIndex, item) {
this.onGridOpen(grid.getStore().getAt(rowIndex));
}
}]
}],
selModel: { mode: 'MULTI', selType: 'checkboxmodel' },
}
setting proxy in controoler:
view.grid.getStore().setProxy({
type: 'direct',
model: 'appname.model.training.course.TrainingRequirementList',
api: { read: SCT.Service.Training.Plan.GetFilteredRequirements },
extraParams: { total: 50000 },
reader: {
type: 'json',
root: 'ID',
totalProperty: 'TotalCount'
},
simpleSortMode: true
});
additional information about my view:
Ext.define('appname.view.training.course.TrainingRequirements',
{
extend: 'Ext.panel.Panel',
require: [ 'Ext.grid.PagingScroller'],
My grid is only loading the first 200 rows and the scrollbar is only as big as it would be for 200 rows.. :/ ...
the server response with entries like this:
{"ID":99,"PlanId":23,"firstname":"name","lastname":"name","Comment":"","Status":3,"ConfirmType":0,"Priority":"entry","DesiredDate":null,"StartDate":new Date(1354107600000),"ActualCost":180,"EstimatedCost":0,"row":201,"TotalCount":8568,"EmployeeName":"some, name","Description":"","StatusText":"state","Date":"28.11.2012","Cost":"EUR 180"}
what am i missing???
UPDATE
When i scroll down the script is loading the second page also.. still nothing more...
if you ned more information dont hesitate to ask

Does your server include the correct TotalCount value in the response?
Edit:
According to your reader's configuration, your server should answer with data formatted this way (of course your response should also be valid JSON, here Javascript is used for illustration):
{
// total property at the root level of response object
TotalCount: 8568,
// root for items data, configured as "ID" in your reader (you should probably
// change that to something like "records" or "data" to better express meaning)
ID: [
// individual fields data
{ID: 1, EmployeeName: 'Foo', ...},
{ID: 2, EmployeeName: 'Bar', ...},
...
]
// if you had, for example, a successProperty, it would go here too
,success: true
}
In your case, it seems that your TotalCount is mixed in every item data?
You're right about the implementation on the server side: it should simply be the total number of records, so something like COUNT(*) in the database.
One more thing: new Date(1354107600000) is not valid JSON. You should use a string and cast it to a date once the JSON has been decoded. For example, in your model, your could configure the field type to have Ext handle this for your: {name: 'Date', type: 'date', format: 'd.m.Y'}.

Why doesn't this checkbox column work in this ExtJS grid?

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..

Extjs layout extension causing error in ext-all.js

I am trying to learn Extjs and I am immediately coming up with an issue. My Html has ext-base.js and ext-all.js correctly included. I then have the following in my js file:
Ext.BLANK_IMAGE_URL = '<%= Url.Content("~/Content/ext/images/default/s.gif") %>';
Ext.ns('MyNamespace');
Ext.onReady(function() {
alert("onReady() fired");
});
So far everything is working, no errors and the alert is thrown correctly. I then add the following code after onReady:
MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
}));
This causes the following javascript error in chrome:
Uncaught TypeError: Object #<an Object> has no method 'addEvents' ext-all.js:7
Ext.Component ext-all.js:7
Ext.apply.extend.K ext-base.js:7
Ext.apply.extend.K ext-base.js:7
Ext.apply.extend.K ext-base.js:7
(anonymous function) MyApp.js:13 (pointing to the Ext.Extend line)
If I take the Viewport code and put it directly into the OnReady function it (like the following)
Ext.onReady(function () {
var bl = new Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
});
});
It works. Can anyone clue me in to what I am doing wrong with the Extend method?

To fix your code, the issue is simply bad syntax in the Extend statement. You need a comma after Ext.Viewport, not an extra () pair:
MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport, {
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
});
However, I'd suggest taking #r-dub's advice and reading up more on what you're trying to do.

Here's a bit more complicated example of what you're trying to accomplish. I'd strongly suggest taking a look at Saki's 3 part series in building large apps with ExtJS, it'll help you understand how it use extend properly to create re-usable components.
Ext.ns('MyNamespace');
MyNamespace.BaseLayout = Ext.extend(Ext.Viewport, {
initComponent:function() {
var config = {
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
html: '<p>North</p>'
}
})
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
MyNamespace.BaseLayout.superclass.initComponent.apply(this,arguments);
}//end initComponent
});
//this will give you an xtype to call this component by.
Ext.reg('baselayout',MyNamespace.BaseLayout);
Ext.onReady(function() {
new MyNamespace.BaseLayout({});
});

ExtJS recommend the use of define instead of extend. Here is how a similar example works with define:
Ext.define('Grid', {
extend: 'Ext.grid.Panel',
config: {
height: 2000
},
applyHeight: function (height) {
return height;
}
});
new Grid({
store: store,
columns: [{
text: 'Department',
dataIndex: 'DepartmentName',
renderer: function (val, meta, record) {
return '' + record.data.DepartmentName + '';
},
width: 440,
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Department Code',
dataIndex: 'DepartmentKey',
width: 100,
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Main Phone',
dataIndex: 'MainPhone',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Room',
dataIndex: 'RoomLocation',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Hideway Location',
dataIndex: 'HideawayLocation',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Hideway Phone',
dataIndex: 'HideawayPhone',
flex: 1,
filter: 'string',
sortable: true,
hideable: false
}, {
text: 'Has OEC',
dataIndex: 'OECFlag',
xtype: 'checkcolumn',
width: 50,
filter: {
type: 'boolean',
active: true
},
flex: 1,
sortable: true,
hideable: false
},
{
text: 'Action',
dataIndex: 'ID',
renderer: function (value) {
return 'Edit';
},
hideable: false
}],
forceFit: false,
split: true,
renderTo: 'departmentSearchGrid',
frame: false,
width: 1300,
plugins: ['gridfilters']
});
I used the following post as a reference:
http://docs.sencha.com/extjs/5.0/core_concepts/classes.html