Uncaught TypeError: Ext.ux.ProgressBarPager is not a constructor -

深海云帆

浏览: 6693 次

最近访客更多访客>>

berylfangyuan

jihong10102006

onestopweb

syw820

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Uncaught TypeError: Ext.ux.ProgressBarPager is not a constructor

博客分类：

前端Error

javascript ExtJS

分享几个在ExtJS时度条分页组件时所遇的错误
一、【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());
	});

})

最终效果图：