extjs 2.3 Grid使用
View Code
Ext.onReady(function(){ Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); Ext.lib.Ajax.defaultPostHeader = "application/x-www-form-urlencoded; charset=utf-8"; // data.jsp ={ // "userList":[{"age":1,"name":"弄疯","password":"弄艾丝凡"}, // {"age":2,"name":"弄2","password":"弄艾丝凡gPassword2"} // ]} var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url:'data.jsp', method: 'POST' }), reader: new Ext.data.JsonReader({ root: 'userList', },[{name: 'age', mapping: 'age'}, {name: 'name', mapping: 'name'}, {name: 'password', mapping: 'password'}] ) }); store.baseParams={ euser:encodeURIComponent("utf-8"), batName:encodeURIComponent("utf-8") }; //编码 store.load(); //load var column = new Ext.grid.ColumnModel([ {header: '姓名', dataIndex: 'name'}, {header: '密码', dataIndex: 'password'}, {header: '年龄', dataIndex: 'age'} ]); column.defaultSortable = true; //排序 var grid = new Ext.grid.GridPanel({ el: 'grid-example', width:600, height:300, title:'标题', //标题 store: store, //Grid应使用Ext.data.Store作为其数据源(必须的)。 cm: column, //colModel的简写方式 trackMouseOver: false, //鼠标移动时高亮 sm: new Ext.grid.RowSelectionModel() //selModel的简写方式 }) grid.render(); //执行容器的渲染,可以将渲染执行在送入的HTML元素上面。 });
不兼容IE6,拒绝IE6!!!!!坑爷...
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="css/grid-examples.css" />
<link rel="stylesheet" type="text/css" href="css/examples.css" />