Skip to content

Instantly share code, notes, and snippets.

@datchley

datchley/jsongrid.html

Created May 4, 2011 15:23
Show Gist options
  • Save datchley/955405 to your computer and use it in GitHub Desktop.
Save datchley/955405 to your computer and use it in GitHub Desktop.
Download ZIP
ExtJS 4.0 Json Grid
Raw
jsongrid.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Stylesheets to handle CSS -->
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
<!-- Javascript for the applications -->
<!-- <script type="text/javascript" src="js/extjs/ext-all-debug.js"></script> -->
<script type="text/javascript" src="js/extjs/bootstrap.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'js/extjs/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
Ext.define('LoanRecord', {
extend: 'Ext.data.Model',
fields: [
"loan_number" , "needs_research" , "commit_number" , "issue_date" , "final_settle" ,
"early_fund_date" , "issue_type" , "balance_type" , "pool_type" , "io_term" ,
"war_io_term" , "sale_name" , "bond_spec" , "cusip_num" , "pool_suffix" ,
"occupancy_code" , "amort_term" , "original_ltv" , "borrower_name" , "address" ,
"loan_amount" , "hockey_team" , "credit_score" , "cost_of_gas" , "favourite_band"
]
});
var mySelModel = Ext.create('Ext.selection.CheckboxModel');
var columns = [
{ "id": "loan_number" ,"header": "Loan Number", "dataIndex": "loan_number" ,"sortable": true },
{ "id": "needs_research" ,"header": "Needs Research", "dataIndex": "needs_research" ,"sortable": true },
{ "id": "commit_number" ,"header": "Commit #", "dataIndex": "commit_number" ,"sortable": true },
{ "id": "issue_date" ,"header": "Issue Date", "dataIndex": "issue_date" ,"sortable": true },
{ "id": "final_settle" ,"header": "Final Settle Date", "dataIndex": "final_settle" ,"sortable": true },
{ "id": "early_fund_date" ,"header": "Early Fund Date", "dataIndex": "early_fund_date" ,"sortable": true },
{ "id": "issue_type" ,"header": "Issue Type", "dataIndex": "issue_type" ,"sortable": true },
{ "id": "balance_type" ,"header": "Balance Type", "dataIndex": "balance_type" ,"sortable": true },
{ "id": "pool_type" ,"header": "Pool Type", "dataIndex": "pool_type" ,"sortable": true },
{ "id": "io_term" ,"header": "IO Term", "dataIndex": "io_term" ,"sortable": true },
{ "id": "war_io_term" ,"header": "War IO Term", "dataIndex": "war_io_term" ,"sortable": true },
{ "id": "sale_name" ,"header": "Sale Name", "dataIndex": "sale_name" ,"sortable": true },
{ "id": "bond_spec" ,"header": "Bond Spec", "dataIndex": "bond_spec" ,"sortable": true },
{ "id": "cusip_num" ,"header": "Cusip", "dataIndex": "cusip_num" ,"sortable": true },
{ "id": "pool_suffix" ,"header": "Pool Suffix", "dataIndex": "pool_suffix" ,"sortable": true },
{ "id": "occupancy_code" ,"header": "Occupance Code", "dataIndex": "occupancy_code" ,"sortable": true },
{ "id": "amort_term" ,"header": "Amort. Term", "dataIndex": "amort_term" ,"sortable": true },
{ "id": "original_ltv" ,"header": "Orig LTV", "dataIndex": "original_ltv" ,"sortable": true },
{ "id": "borrower_name" ,"header": "Borrower Name", "dataIndex": "borrower_name" ,"sortable": true },
{ "id": "address" ,"header": "Address", "dataIndex": "address" ,"sortable": true },
{ "id": "loan_amount" ,"header": "Loan Amount", "dataIndex": "loan_amount" ,"sortable": true },
{ "id": "hockey_team" ,"header": "Hockey Club", "dataIndex": "hockey_team" ,"sortable": true },
{ "id": "credit_score" ,"header": "Credit Score", "dataIndex": "credit_score" ,"sortable": true },
{ "id": "cost_of_gas" ,"header": "Cost of Gas", "dataIndex": "cost_of_gas" ,"sortable": true },
{ "id": "favourite_band" ,"header": "Favourite Band", "dataIndex": "favourite_band" ,"sortable": true }
];
var store = new Ext.data.Store({
model: 'LoanRecord',
autoLoad: false,
remoteSort: false,
pageSize: 100,
proxy: {
type: 'ajax',
url: 'inc/data/loans-short.json',
reader: {
type: 'json',
root: 'records',
totalProperty: 'count',
successProperty: 'success',
idProperty: 'loan_number'
}
}
});
Ext.onReady(function() {
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: columns,
frame: true,
width: 800,
height: 400,
loadMask: true,
disableSelection: true,
selModel: mySelModel,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true,
pageSize: 100
}]
});
Ext.create('Ext.panel.Panel', {
title: 'Grid Test',
renderTo: Ext.getBody(),
width: 800,
height: 500,
bodyBorder: false,
border: 0,
frame: true,
layout: {
type: 'vbox',
align: 'stretch',
flex: 1
},
dockedItems: [{
xtype: 'toolbar', dock: 'top', items: [
{ xtype: 'button', text: 'Load Data', handler: function() {
console.time("Loading grid");
store.load(function() {
console.timeEnd("Loading grid");
});
}
}
]
}],
items: [ grid ]
});
});
</script>
</head>
<body>
</body>
</html>
@Discordanian
Copy link

{
success: true,
count: 100,
records: [
{
"loan_number" : 123412312,
"commit_number" : '035-0A3',
"loan_amount" : "$70,000",
"issue_date" : '01-02-2011',
"final_settle" : '01-02-2011',
"early_fund_date" : '01-02-2011',
"issue_type" : 'C',
"balance_type" : 'PROJECTED',
"pool_type" : 'MBS',
"io_term" : 120,
"war_io_term" : 117,
"sale_name" : 'GII FIX TLI',
"bond_spec" : 'LLB3',
"cusip_num" : '3141BUCK8',
"pool_suffix" : 'M',
"occupancy_code" : 'Delta',
"amort_term" : 360,
"original_ltv" : '78%',
"borrower_name" : 'J. Random Borrower',
"address" : '123 Easy Street AnyTown USA',
"hockey_team" : 'Detroit Red Wings',
"credit_score" : 600,
"needs_research" : 'Y',
"cost_of_gas" : 5.20,
"favourite_band" : 'They Might Be Giants',
"marital_status" : 'Married',
"note_rate" : 6.23,
"cat_name" : 'Oz',
"dog_name" : 'Sergei',
"movie_title" : 'O Brother Where Art Thou',
"song_title" : 'Good Day Sunshine',
"instrument_owned": 'violin',
"magazine_read" : 'Mondo 2000',
"occupation" : 'Librarian',
"console_game" : 'The Legend of Zelda',
"fifa_team" : 'Argentina',
"birthdate" : '01-MAY-1970',
"zodiac_sign" : 'Taurus',
"employer" : '6ish Industries',
"eligible_fnma" : 'No',
"eligible_fhmc" : 'Yes',
"eligible_gnma1" : 'Yes',
"eligible_gnma2" : 'No'
},
/* ... continue for 99 more records ... */
]
}

@Discordanian
Copy link

Looks like it didn't quite let me paste 100 records. But you get the point. That above would be loans.json in this instance. Just chop off the last record.

@datchley
Copy link
Author

Here's some initial timings I've come across in various browser, with different versions of ExtJS (from 2.2.1 to 4.0.1). It seems the rendering time (post ajax call for the JSON data) is considerably increasing as the Ext version goes up. The grid performance in 4.0.1 is unacceptable. The test is for the basic grid (the 4.0.1 code is in the above gist) with 100 records at 43 columns wide. For the Ext 4.0.1 timing, the timer stops after grid load completes, but there's still an approximated timing for the vertical scroll bar to even show up before the grid is usable. I approximated those timings as best I could, and the additional rendering time for the vertical scrollbar is shown in parenthesis for the 4.0.1 timings.

Ext Ver.    Browser     Timing              Total (approx sec.)

2.2.1       FF 4        1426 ms              1.42 s
2.2.1       Chrome 11    490 ms               .49 s
2.2.1       IE 7        1422 ms              1.42 s

3.3.1       FF 4        2002 ms              2.00 s
3.3.1       Chrome 11    526 ms               .52 s
3.3.1       IE 7        2109 ms              2.10 s

4.0.1       FF 4        2646 ms (+7.1s)      9.60 s
4.0.1       Chrome 11    786 ms (+1.3s)      2.00 s
4.0.1       IE 7        5576 ms (+9.7s)     15.20 s

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment