分享几个在ExtJS时度条分页组件时所遇的错误
一、【Uncaught TypeError: Ext.ux.ProgressBarPager is not a constructor】
这个错误是因为没有引入“Ext.ux.ProgressBarPager”,需要在代码中加入:
二、【Uncaught Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.ProgressBarPager】
这是因为ExtJS自动加载默认是不开启的,需要添加如下代码:
最终代码如下:
最终效果图:
[img]http://dl2.iteye.com/upload/attachment/0123/6845/1614d1ea-1026-30e7-bd5c-f4b3ec0c6429.png[/img]
一、【Uncaught TypeError: Ext.ux.ProgressBarPager is not a constructor】
这个错误是因为没有引入“Ext.ux.ProgressBarPager”,需要在代码中加入:
Ext.Loader.setPath('Ext.ux', '../examples/ux/');//此处为examples/ux的相对路径
Ext.require([
'Ext.ux.ProgressBarPager'
]);
二、【Uncaught Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.ux.ProgressBarPager】
这是因为ExtJS自动加载默认是不开启的,需要添加如下代码:
Ext.Loader.setConfig({enabled: true});
最终代码如下:
<!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>进度条分页组件</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 : '性别',
dataIndex : 'sex'
},
{
header : '姓名',
dataIndex : 'name'
},
{
header : '描述',
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'}
],
data : data,
groupField : 'sex', //分组参照列
sorter : [{ //设置排序列
property : 'id', direction : 'ASC'
}]
});
var grid = new Ext.grid.GridPanel({
autoHeight : true,
store : store,
columns : columns,
features : [{ftype : 'grouping'}], //设置分组显示的特征(风格)
renderTo : 'grid',
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop' //增加此插件是为了支持表格内拖放
}
},
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, //限制改变的最小高度
minWidth : 100, //限制改变的最小宽度
pinned : true, //
handles : 'all'
});
rz.on('resize', function(resizer, width, height, event) {
grid.setHeight(height);
}, grid);
/*
* 实现右键菜单
*/
var contextmenu = new Ext.menu.Menu({
id : 'theContextMenu',
items : [{
text : '查看详情',
handler : function() { //处理程序
alert("kkk");
}
}]
});
grid.on("itemcontextmenu", function(view, record, item, index, e) {
e.preventDefault(); //防止浏览器默认的右键菜单
contextmenu.showAt(e.getXY());
});
})
最终效果图:
[img]http://dl2.iteye.com/upload/attachment/0123/6845/1614d1ea-1026-30e7-bd5c-f4b3ec0c6429.png[/img]