学习ExtJS的grid布局
Posted GuliGugaLiz
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习ExtJS的grid布局相关的知识，希望对你有一定的参考价值。
这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容。之后会发一个最近写的结合MVC项目的grid布局的案例。
上一篇关于ExtJS的学习资料什么的都已经更在上一篇了，这里只是对一些代码的记录。
【学习资料】（ExtJS4中的Grid、Tree、Form）http://www.cnblogs.com/niejunchan/p/4998512.html
【效果】
Array_Grid
Tree_Grid
【代码】
[Array_Grid的代码]
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="Scripts/Extjs/ext-all.js"></script> <script src="Scripts/Extjs/packages/ext-locale/build/ext-locale-zh_CN.js"></script> <script src="Scripts/Extjs/ux/app.js"></script> <link href="Scripts/Extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" /> <!--<script type="text/javascript"> //测试上面js,css文件是否连接进来用的 Ext.onReady(function () { Ext.Msg.alert("hh", "welcome"); var win = new Ext.Window({ title: "hello", width: 200, height: 300, html: \'<h1>ok....just a test....</h1>\' }); win.show(); }); </script>--> <script type="text/javascript"> Ext.onReady(function () { var userStore = Ext.create("Ext.data.Store", { fields: ["account", "name", "sex", "age", "role"], data: [ ["zhanglei", "张磊", "男", "30", "管理员"], ["liming", "黎明", "男", "27", "主编"], ["liuying","刘颖","女","22","内容编辑"] ] }); Ext.create("Ext.grid.Panel", { title: \'多表头Grid\', margin: 10, width: 600, height: 400, border: true, //添加左边的checkbox selModel: { type:"checkboxmodel" }, store: userStore,//加载数据 columns: [{ text: "账号", dataIndex: "account", flex: 1, align:\'center\', }, { text: "基本信息", flex: 3, align: \'center\', columns: [{ text: \'姓名\', dataIndex: \'name\', align:\'center\' }, { text: \'性别\', dataIndex: \'sex\', align:\'center\' }, { text: \'年龄\', dataIndex: \'age\', align:\'center\' }]}, { text: \'角色\', dataIndex: \'role\', flex:1, align:\'center\' }, ], //增加分页控件 bbar: { xtype: \'pagingtoolbar\', store: userStore, displayInfo:true }, renderTo:Ext.getBody() }); }); </script> </head> <body> </body> </html>
[Tree_Grid的代码]
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="Scripts/Extjs/ext-all.js"></script> <script src="Scripts/Extjs/packages/ext-locale/build/ext-locale-zh_CN.js"></script> <script src="Scripts/Extjs/ux/app.js"></script> <link href="Scripts/Extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" /> <!--<script type="text/javascript"> //测试上面js,css文件是否连接进来用的 Ext.onReady(function () { Ext.Msg.alert("hh", "welcome"); var win = new Ext.Window({ title: "hello", width: 200, height: 300, html: \'<h1>ok....just a test....</h1>\' }); win.show(); }); </script>--> <script type="text/javascript"> Ext.onReady(function () { Ext.define("DeptModel", { extend: "Ext.data.TreeModel", fields: [ "DeptName","Leader" ] }); var store = Ext.create("Ext.data.TreeStore", { model: "DeptModel", root: { expanded: true, DeptName: "总公司", Leader: "Lin", children: [ { DeptName: "技术部", Leader: "xia", leaf: true }, { DeptName: "财务部", Leader: "Li", leaf: true } ] } }); var viewport = Ext.create("Ext.container.Viewport", { layout: "auto", items: [{ xtype: "treepanel", itemId: "tree", width: 600, height: 500, store: store, lines: false, useArrows: true, multiSelect:true, columns: [ { xtype: \'treecolumn\', text: \'部门\', dataIndex: "DeptName", flex: 1, sortable:false }, { text: "领导", dataIndex: "Leader", flex: 1, sortable:true }, { xtype: \'checkcolumn\', header: \'选择\', dataIndex: \'done\', flex: 1, stopSelection: false, menuDisabled:true, }, { xtype: \'actioncolumn\', flex: 1, items: [ { icon: \'Content/images/user_edit.png\',//需要自己把图片弄进去才有 tooltip: \'Edit\', handler: function (grid, rowIndex, colIndex) {//这里的方法只是一个弹出信息，可替换成具体实现 var rec = grid.getStore().getAt(rowIndex); Ext.MessageBox.alert(\'Edit\', rec.get(\'Leader\')); } }, { icon: \'Content/images/user_delete.png\', tooltip: \'Delete\', handler: function (grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); Ext.MessageBox.alert(\'Delete\', rec.get(\'Leader\')); } } ] } ], bbar: { xtype: \'pagingtoolbar\', store: store, displayInfo: true }, }] }); }); </script> </head> <body> </body> </html>
以上是关于学习ExtJS的grid布局的主要内容，如果未能解决你的问题，请参考以下文章
Extjs中grid前端分页使用PagingMemoryProxy
具有布局适合和网格的 Extjs 3.3.1 FieldSet 在窗口调整大小时不会调整网格大小