extjs4.2如何设置表格方向
1、新建一个html文件，填入html的基本结构标签。在head里面引入extjs的库文件
2、加上一个空白div标签，用来放置表格
普通表格：
<div id="grid">
</div>
再定义列和数据
3、创建一个Ext.data.ArrayStore对象进行转换和加载数据
4、创建Ext.grid.GridPanel来展示表格，详细的属性含义和更多的需求属性，可以查看官方api文档
5、打开浏览器测试html页面，可以看到如果表格效果
6、下面开始介绍竖列的表格
属性表格需要使用Ext.grid.PropertyGrid来创建
再次添加一个空白div来放置表格内容
属性表格：
<div id="grid1">
</div>
代码示例如图
7、刷新浏览器可以看到属性表格已经显示完成
8、完整示例代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>extjs演示</title>
<style>
</style>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script src="../ext-all.js"></script>
</head>
<body>
普通表格：
<div id="grid">
</div>
<br/>
属性表格：
<div id="grid1">
</div>
<script>
Ext.onReady(function(){
//定义列
var columns = [
{header:'编号',dataIndex:'id'},
{header:'姓名',dataIndex:'name'},
{header:'备注',dataIndex:'descn'}
];
//定义数据
var data =[
['1','Helen','测试1'],
['2','Tom','测试2'],
['3','Lili','测试3']
];
//转换原始数据为EXT可以显示的数据
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id'},
{name:'name'},
{name:'descn'}
]
});
//加载数据
store.load();
//创建表格
var grid = new Ext.grid.GridPanel({
renderTo:'grid', //渲染位置
store:store, //转换后的数据
columns:columns, //显示列
stripeRows:true, //斑马线效果
width:500,
forceFit:true //自动填满表格
});
var propertyGrid =new Ext.grid.PropertyGrid({
title:"属性表格",
width:500,
autoHeight:true,
frame: true,
source:{
"姓名":"Tom",
"年龄":30,
"出生年月":new Date(Date.parse("1988/08/07")),
"是否有效":true,
"邮箱":"测试邮箱"
}
});
propertyGrid.render('grid1');
});
</script>
</body>
</html>