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:
