Ext布局

wangmengbk

浏览: 292358 次
性别:
来自: 上海

最近访客更多访客>>

yeming471114363

yonge812

zlbmm007

changfengwuhen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT 360 浏览器 HTML

这是Ext做的部分布局,请多多指教.
//定义一个选项的面板，并且放在右边的窗口中
var tabPanel=new Ext.TabPanel({
region:"center",
//activeTab:"",
resizeTabs:true,//True表示为自动调整各个标签页的宽度，以便适应当前TabPanel的候选栏的宽度（默认为false）
enableTabScroll:true,//此项设为true以出现标签页可滚动的功能。只当标签页位于上方的位置时有效（默认为false）。
 titleCollapse:true,
 layoutOnTabChange:true,//True表示为每当Tab切换时就绘制一次布局.
 //collapsible:true,
 hideMode:"display",
 height:600,
 width:800,
 closable:true,
 autoScroll:true
});

//var p1=new Ext.Panel({title:"ain",
// html:'fdsfsdfsdfsd',
// id:'ccc',
// closable:true});
//tabPanel.add(p1);
var north=new Ext.Panel({
region:"north",//上边
height:100,
html:"<img src='images/top.jpg'><a href='#'onclick='Login();'>登陆</a>   <a>退出</a>"
});
var west=new Ext.Panel({
region:"west",//左边
width:150,
title:"详细",
htmle:"ddddddddddd",
split:true,//true表示具有分割功能
contentEl:"westTree",//现有HTML节点的id,用作面板body的内容 (缺省为 '')
collapsible:true//显示折叠功能
});
Ext.onReady(function(){
Ext.QuickTips.init();

var vieTable=new Ext.Viewport({
layout:"border",//类型
autoScroll:true,
height:700,
defaults:{
ativeItem:0
},
items:[north,west,tabPanel]
});

//定义根节点
var root=new Ext.tree.TreeNode({
id:"root",
text:"根节点"
});
//定义根节点下的子结点
var c1=new Ext.tree.TreeNode({
id:"c1",
text:"发表文章",
listeners:{//在该对象初始化时便加入多个事件处理函数
'dblclick':addForm
}
});
var c2=new Ext.tree.TreeNode({
id:"c2",
text:"文章管理",
listeners:{
'click':bkGril
}
});
var c3=new Ext.tree.TreeNode({
id:"c3",
text:"浏览文章"
});
var c4=new Ext.tree.TreeNode({
id:"c4",
text:"文章评论"
});
var c5=new Ext.tree.TreeNode({
id:"c5",
text:"上传照片"
});
//给root(根节点)添加子接点
root.appendChild(c1);
root.appendChild(c2);
root.appendChild(c3);
root.appendChild(c4);
root.appendChild(c5);

//设置treePanel
var tree=new Ext.tree.TreePanel({
renderTo:"westTree",//存放的位置
lines:false,//false禁止显示树的虚线
root:root,//绑定
animate:true,//true表示激活展开、闭合的动画
enableDD:false,//
border:false,//设置边框
rootVisible:true//

});
});

/**
定义发表文章的窗体表单
*/
var fbForm=null;
function addForm(node,event){
if(fbForm!=null)
return;

fbForm=new Ext.form.FormPanel({
title:"发表文章",
closable:true,
height:500,
autoScroll:true,
items:[
{
xtype:"textfield",
fieldLabel:"文章主题",
name:"art.title",
width:220,
msgTarget:"side",//显示错误提示
allowBlank:false,
blankText:"文章主题不能为空！",
maxLength:100,
maxLengthText:"文章主题不能超过100个字符！",
regex:new RegExp("^[0-9a-zA-Z\_]+$"),
regexText:"文章主题必须是字母和数字、或下划线的组合"
},
{
xtype:"htmleditor",//编辑内容框
fieldLabel:"文章内容",
name:"art.contents",
height:360,
anchor:'98%',//设定和屏宽的比列
invalidText:"请输入有效的字符！",
allowBlank:false,
blankText:"文章内容不能为空！",
msgTarget:"side"

}
],
buttons:[
{
id:"btnSubmit",
text:"发表",
handler:function(){
if(fbForm.form.isValid()){
Ext.MessageBox.show({
msg:"正在上传文章，请稍等....",
progressText:"Save....",
width:240,
wait:true,
waitConfig:{interval:200},
icon:"downLoad",
animEL:"saving"
});
setTimeout(function(){},10000);
fbForm.form.submit({
url:"articles.do?method=saveArticles",//提交路径
method:"post",//提交方式
success:function(form,action){
var falg=action.result.success;
if(falg==true){
Ext.MessageBox.show({
title:"恭喜",
msg:"恭喜！文章发表成功！",
width:200,
height:150,
buttons:Ext.Msg.OK
});
}
},
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});

}
}
},
{
id:"btnreset",
text:"重置",
handler:function(){
fbForm.getForm().reset();
}
}
],
listeners:{
"destroy":function(){
fbForm=null;
}
}

});
tabPanel.add(fbForm);//给tabPanel中添加form表单
tabPanel.show();//显示tabPanel
fbForm.show();//显示form表单
}

========登陆界面=========
function Login() {
Ext.QuickTips.init();
var loginForm=new Ext.form.FormPanel({
frame:true,
width:280,
height:120,
items:[{
xtype:"textfield",
fieldLabel:"用户名",
msgTarget:"side",//在表单元素右侧加错误图标，鼠标旋停上面时显示错误信息。
name:"loginId",
validateOnBlur:true,//失去焦点进行验证
allowBlank:false,
minLength:3,
minLengthText:"至少要输入3个字符！",
maxLength:50,//输入最大长度50
maxLengthText:"最大长度不能超过50个字符！",
regex:new RegExp("^[0-9a-zA-Z\_]+$"),
regexText : "用户名必须是字母和数字、或下划线的组合",
blankText:"用户名不能为空！"
},
{
xtype:"textfield",
fieldLabel:"密码",
inputType:"password",
name:"loginPwd",
validateOnBlur:true,
msgTarget:"side",
minLength:6,
minLengthText:"至少要输入6个字符！",
maxLength:12,//输入最大长度12
maxLengthText:"最大长度不能超过12个字符！",
allowBlank:false,
blankText:"密码不能为空！"
},
{
html:"<a href='#' onClick='Reg();'>新用户注册</a>"
}
],
buttons:[
{
id:"btnOk",
text:"登录",
handler:function(){
if(loginForm.form.isValid()){//判断是否是表单，如果是就返回true
Ext.MessageBox.show({
msg:"正在登陆，请稍等....",
progressText:"Login...",//背景值
width:300,
wait:true,//是否等待
waitConfig:{interval:200},
icon:"download",
animEl:"login"
});
setTimeout(function(){},10000);
loginForm.form.submit(
{
url:"login.do?method=getLogin",//提交路径
method:"post",//提交方式
//登陆成功后，执行的语句
success:function(form,action){
//如果服务器端传过来的数据为true则表示登录成功
var flag=action.result.success;
if(flag ){
Ext.MessageBox.alert('恭喜','登陆成功!');
win.hide();
}
},
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});
}
}
},
{
id:"btnCancel",
text:"取消",
handler:function(){
win.hide();//隐藏窗体
}
}
]
});
var win=new Ext.Window({
layout: 'fit',
modal:true,//模态窗体
//draggable:false,
resizable:false,//True 表示为允许用户从window的四边和四角改变window的大小(默认为 true).
title:"登录",
plain:true,//True 表示为渲染window body的背景为透明的背景,这样看来window body 与边框元素(framing elements)融为一体,false表示为加入浅色的背景, 使得在视觉上body元素与外围边框清晰地分辨出来(默认为 false).
width:300,
height:150,
//pageX:200,//定位x坐标
//pageY:200,//定义Y坐标
hideCollapseTool:false,
draggable:false,//true为激活此面板的拖动
items:loginForm //添加表单

});
win.show();//显示窗体
}

====效果如附件:====