Ext.onReady(function(){
//1.使用布局(第一个布局)
// 1>认识布局中的几个元素 panel 小容器,region 小容器存放位置,viewport 大容器
// 2>布局中的参数
// @collapsible 是否可以折叠,双击时折叠
// @collapseMode 折叠模式,出现小图标
// @minSize 拖拉的最小宽度
// @maxSize 拖拉的最大宽度
// @margins 上下左右间格度
// @cmargins 折叠时间格度
// @bodyStyle 内容样式
//2.使用tab panel
// 1>使用tabpanel时,把原来xtype找成tabpanel(注意这里大小写敏感),增加activeTab项(可选),配置items项
// 2>增加gridPanel到对应的tab项中,增加xtype:'grid',配置对应的store和cm项
// 3>使用accordion 配置title和autoLoad()
//3.增加工具栏
// 1>类型 为toolbar,设置items选项
//4.增加form
// 1>类型 为form ,设置items选项
//5.嵌套布局
// 1>设置 在已有的布局中,增加layout为border.配置items选项,
// 2>设置图标,ie:iconCls:'de',
//6.给viewport设置ID值
// 1>getCmp 取容器,findById,取容器中的子元素
// 2>根据需要动态增加 tabpanel
var store = new Ext.data.Store({
//定义数据 data
data:[[
"de.png",
1,
"Office Space",
"Mike Judge",
"1999-02-19",
1,
"Work Sucks",
"19.95",
1
],[
"us.png",
3,
"Super Troopers",
"Jay Chandrasekhar",
"2002-02-15",
2,
"Altered State Police",
"14.95",
2
]
],
reader:new Ext.data.ArrayReader({
id:"id"
},[
'image',
'id',
'title',
'director',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
'price',
'available'
]
)
});
var myFirstViewport = new Ext.Viewport({
layout:"border",//描述布局类型
renderTo:Ext.getBody(),
id:"myFirstViewport",
items:[ {
region:"north",
xtype:"toolbar",
items:[
{
xtype:"tbspacer"
},{
xtype:"tbbutton",
text:"button",
handler:function(btn){
btn.disable();
}
},{
xtype:"tbfill"
}
]
},{
region:"west",
xtype:"form",
// html:"西",
split:true,
width:400,
collapsible: true,
title:"西方",
collapseMode:"mini",
minSize:100,
maxSize:250,
margins:'10 0 0 3',
cmargins:'1 0 0 3',
bodyStyle:'padding:5px;',
items:[
{
xtype:"textfield",
fieldLabel:"标题",
name:"title"
},{
xtype:"textfield",
fieldLabel:"导演",
name:"director",
vtype:"name"
},{
xtype:"datefield",
fieldLabel:"发布日期",
name:'released'
},{
//radio
xtype:"radio",
fieldLabel:"影片颜色",
boxLabel:"黑白",
name:"rdFilmColor",
checked:true
},{
xtype:"radio",
hideLabel:false,//default false
labelSeparator:"",//替换默认的:
boxLabel:"彩色",
name:"rdFilmColor"
}
]
},{
region:"center",
xtype:"tabpanel",//注意大小写
activeTab:0,
id:"tplCenter",
items:[{
title:"first tabPanel",
html:"first tabpanel here!!!"
},{
title:"second tabPanel",
xtype:"grid",
store:store,
columns:[{
header:"图片",dataIndex:"image",renderer:function(val){
return "<img src='image/" + val + "'>";
}
},{
id:"title",header:"标题",dataIndex:"title",renderer:function(val,x,curStore){
return "<b>" + val + "</b><br/>" + curStore.get("tagline");
}
},{
header:"导演",dataIndex:"director"
},{
header:"发布日期",dataIndex:"released",renderer:Ext.util.Format.dateRenderer("m/d/y")
},{
header:"喜剧类型",dataIndex:"genre"
// ,renderer:function(val){
// return genreStore.queryBy(function(rec){
// return rec.get("id") == val;
// },this).itemAt(0).get("name");
// }
},{
header:"说明",dataIndex:"tagline"
},{
id:"price",header:"价格",dataIndex:"price"
}
]
},{
title:"accordion",
layout:"accordion",
items:[{
title:"director info",
autoLoad:"./html/director.txt"
},{
title:"genre info",
autoLoad:"./html/genre.txt"
},{
title:"name",
autoLoad:"./html/name.txt"
}]
},{
title:"嵌套布局",
layout:'border',
iconCls:'de',
border:false,
items:[{
title:"",
region:"north",
html:"north",
height:100,
split:true
},{
title:"",
region:"center",
html:"center"
}
]
}
]
},{
region:"east",
xtype:"panel",
html:"东",
id:"plEast",
split:true,
width:200
},{
region:"south",
xtype:"panel",
html:"南"
}
]
});
//查找元素
var eastPanel = Ext.getCmp("myFirstViewport").findById("plEast");
// console.debug(eastPanel.isVisible());
if(!eastPanel.isVisible()){
eastPanel.expand();
}
//取元素,动态增加组件
var centerPanel = Ext.getCmp("myFirstViewport").findById("tplCenter");
centerPanel.add({title:"test",html:"text"});
});
