Created
May 4, 2011 15:23
-
-
Save datchley/955405 to your computer and use it in GitHub Desktop.
ExtJS 4.0 Json Grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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
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.