extjs-gridPanel面板-实例

最新推荐文章于 2024-09-12 23:58:52 发布

王牛付付cleangh

最新推荐文章于 2024-09-12 23:58:52 发布

阅读量2.8k

点赞数

分类专栏： extjs web 文章标签： extjs web jsp java

本文链接：https://blog.csdn.net/u013967958/article/details/54809252

版权

extjs 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

web

2 篇文章 0 订阅

订阅专栏

1.实现从本地store中读取静态数据，显示在页面的girdpanel中。

代码如下：（将

${ctp}替换为${pageContext.request.ContextPath}

）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/ext-all.css">
<script type="text/javascript" src="${ctp}/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${ctp}/ext-all.js"></script>
<script type="text/javascript"src="${ctp}/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
	var cm=new Ext.grid.ColumnModel([
	  	{header:'编号',dataIndex:'id',width:60,sortable:true},
	  	{header:'名称',dataIndex:'name',width:120},
	  	{header:'描述',dataIndex:'desc'},   
	  	{header:'性别',dataIndex:'sex'}
	  	]);
	                       
	                        
	var data=[
	 		['1','a','desc1','male'],
	 		['2','b','desc2','male'],
	 		['3','c','desc3','female']
	 		];

	var ds=new Ext.data.Store({
	   	proxy:new Ext.data.MemoryProxy(data),
	   	reader:new Ext.data.ArrayReader({},
	   	[
	   	{name:'id',mapping:'1'},
	   	{name:'name',mapping:'0'},
	   	{name:'desc',mapping:'2'},
	   	{name:'sex',mapping:'3'}
	   	]

	   	),
	   	sortInfo:{field:"name",direction:"asc"}
	   	});
	ds.load();
	//Ext.MessageBox.alert('blank','success');
	//面板
	var grid=new Ext.grid.GridPanel({   
		title:'grid面板',
		//el:'my_grid',//这行不起作用
		renderTo:'my_panel',
		ds:ds,
		cm:cm,   
		//sm:sm
		tbar:new Ext.Toolbar({
			title:'工具条',
			items:
				[
				 {pressed:true,text:'查询'},
				 {pressed:true,text:'新增'}
				 ]
			
		}),
		bbar: new Ext.PagingToolbar({
			pageSize:5,
			store:ds,
			displayInfo:true,
			displayMsg:'显示第{0}条到第{1}条记录，共{2}条',
			emptyMsg:"提示：没有查询到记录！"
		})
		/* //,autoExpandColumn:'id' */
	});
});
</script>
</head>

<body>
	 test panel1<br>
	<div id="my_panel"></div>
</body>
</html>

2.效果图如下：吐舌头