1. [Uncaught TypeError: Ext.ux.ProgressBarPager is not a constructor]
This error is because "Ext.ux.ProgressBarPager" is not introduced and needs to be added to the code :
Ext.Loader.setPath('Ext.ux', '../examples/ux/');//The relative path of examples/ux here Ext.require([ 'Ext.ux.ProgressBarPager' ]);
2. [Uncaught Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.ProgressBarPager]
This is because ExtJS auto-loading is not enabled by default, you need to add the following code:
Ext.Loader.setConfig({enabled: true});
The final code is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>Progress bar paging component</title> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> <script type="text/javascript" src="../ext-all.js"></script> <script type="text/javascript" src="Chinese.js"></script> <!--<script type="text/javascript" src="EditGrid.js"></script>--> <script type="text/javascript" src="GroupingGrid.js"></script> </head> <body> <div id="grid"></div> </body> </html>
Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '../examples/ux/'); Ext.require([ 'Ext.ux.ProgressBarPager' ]); Ext.onReady(function() { var columns = [ { header : 'ID', dataIndex: 'id' }, { header : 'gender', dataIndex: 'sex' }, { header : 'name', dataIndex : 'name' }, { header : 'description', dataIndex: 'descn' } ]; var data = [ ['1', 'male', 'name1', 'descn1'], ['2', 'female', 'name2', 'descn2'], ['3', 'male', 'name3', 'descn3'], ['4', 'female', 'name4', 'descn4'] ]; var store = new Ext.data.ArrayStore({ fields : [ {name : 'id'}, {name : 'sex'}, {name : 'name'}, {name : 'descn'} ], date: date, groupField : 'sex', //group reference column sorter : [{ //Set the sorting column property : 'id', direction : 'ASC' }] }); var grid = new Ext.grid.GridPanel({ autoHeight : true, store: store, columns : columns, features : [{ftype : 'grouping'}], //Set the features (style) for grouping display renderTo : 'grid', viewConfig : { plugins : { ptype : 'gridviewdragdrop' //This plugin is added to support drag and drop in tables } }, bbar : new Ext.PagingToolbar({ pageSize : 3, store: store, displayInfo : true, plugins : new Ext.ux.ProgressBarPager() }) /*bbar: Ext.create('Ext.PagingToolbar', { pageSize: 3, store: store, displayInfo: true, plugins: Ext.create('Ext.ux.ProgressBarPager', {}) })*/ }); var rz = new Ext.Resizable(grid.getEl(), { wrap : true, minHeight : 100, //The minimum height of the limit change minWidth : 100, //The minimum width of the limit change pinned : true, // handles : 'all' }); rz.on('resize', function(resizer, width, height, event) { grid.setHeight(height); }, grid); /* * Implement right-click menu */ var contextmenu = new Ext.menu.Menu ({ id : 'theContextMenu', items : [{ text : 'View details', handler : function() { // handler alert("kkk"); } }] }); grid.on("itemcontextmenu", function(view, record, item, index, e) { e.preventDefault(); //Prevent the browser's default right-click menu contextmenu.showAt(e.getXY()); }); })
Final renderings: