Ext基础---布局：FormPanel中加入Tabpanel并多列布局
2009-03-24 16:41 ClarkZhou 阅读(6997) 评论(2) 编辑 收藏 举报最近做一个东西需要如下效果：
后来根据 殷良胜老大的【经典布局第五篇】稍做了下修改，实现了需要的效果，唯一不同的是我使用了TabPanel，实现方式几乎都是一样的，可能有那么一点小差异，把在实现过程中的一些问题罗列一下，以供以后参考！
具体划分情况：
记录代码：
function formTest()
{
//<s-------------------这一段要放前面，不过可以先不用看！-------------------------------
var L_RowOne=new Ext.Panel({//上左第一行
layout:"column", //采用列布局方式
border:false, //去掉边框
items:[{
layout:'form', //必须要加，不然不显示下面的控件，因为column替换了前面一个FORM，这里的再给它加上
columnWidth:.5, //上左宽度的一半
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"用户名"
}]
},
{
layout:'form', //第二列依然
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"密码"
}]
}]
})
var L_RowTwo=new Ext.Panel({//上左第二行
layout:"column",
border:false,
items:[{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"用户名"
}]
},
{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"密码"
}]
}]
})
var L_RowThree=new Ext.Panel({//上左第三行
layout:"column",
border:false,
items:[{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"用户名"
}]
},
{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"密码"
}]
}]
})
var L_RowFour=new Ext.Panel({//上左第四行
layout:"column",
border:false,
items:[{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"用户名"
}]
},
{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"密码"
}]
}]
})
//<------------------这一段要放前面，不过可以先不用看！-----------------------------e>
这一段确实有点苦恼，要是你有10行就得加入10个Panel，要是你有N行就得加入N个，如果能够通过配置生成那该多好啊 ，不过，现在也只能想想，能实现的配置也不怎么智能，那就还是有时间再看吧！
var LeftPnl=new Ext.Panel({//左边N列
layout:"form",//这里要为form
columnWidth:.6,
// labelPad:0,
style:'height:105px',
labelWidth:80,
border:false,
items:[
L_RowOne, //添加上面的行
L_RowTwo,
L_RowThree,
L_RowFour
// {
// border:false,
// fieldLabel:"密码"
// }
]
})
var RightPnl=new Ext.Panel({//上右，没问题很简单
layout:"form",
columnWidth:.4,
defaultType: 'textarea', //暂时使用它来顶替下
style:'height:105px',
//labelPad:0,//label与输入控件的距离
border:false,
labelWidth:80,
items:[{
fieldLabel:"图片",
style:'with:120px;height:95px'
}]
})
var pnl=new Ext.Panel({//整个上边pnl
layout:"column",//分为上左上右两块
border:false,
items:[LeftPnl,RightPnl]
})
var Bottom=new Ext.Panel(//下边块，再次感叹，要是能配置那是多么爽的事情啊！哈哈！
{
layout:'column',
// defaultType: 'textfield',
//isFormField:true,
border:false,
items:[
{
layout:'form',
columnWidth:.3,
border:false,
items:[{
fieldLabel:'测试1',xtype:'field'
}]
},
{
layout:'form',
columnWidth:.3,
border:false,
items:[{
xtype:'field',
fieldLabel:'测试2'}]
},
{
layout:'form',
columnWidth:.3,
border:false,
items:[{
xtype:'field',
fieldLabel:'测试3'}]
}
]
}
)
var frm=new Ext.FormPanel({//主体了
labelWidth:80,
//labelPad:0,
renderTo:Ext.getBody(),
items:[{
xtype:'tabpanel',
defaults:{autoHeight:true,bodyStyle:'padding:10px'},
// deferredRender :true,
layoutOnTabChange :true, //这个是必须加的，不然点击PANeL后是没有反应的
//defaultType: 'textfield',
activeTab: 0,
items:[
{title:'pnll1'},
{title:'pnll2',layout:'form',items:[pnl,Bottom]} //同时加载上下两部分，
//isFormField:true,这个东西我用起来有问题
]
}
]
})
}
Ext.onReady(function(){
formTest();
});
总结：Ext的布局方式还是比较灵活的，table布局方式还没有试过，虽然我这个写的代码有点多，方法比较原始，不过呢，能满足需求就先用吧，如果有什么好的方法再改进，至于往深层次考虑，那就只能自己再花些时间了！哈哈！
