s
来源:互联网 发布:php redis队列异步 编辑:程序博客网 时间:2024/04/28 23:24
- var panel = new Panel({
- title: 'My Accordion',
- layout: 'accordion', //在这个面板中所使用的布局样式
- layoutConfig: {
- animate: true //布局指定的配置项写在这里
- }
- // 其他Panel的选项
- });
- *************************************************************************
Ext.onReady(function(){
Ext.QuickTips.init();
//第一句的目的是为需要的元件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息了。
Ext.form.Field.prototype.msgTarget = 'under';
//第二句的目的就是设置控件的错误信息显示位置,主要可选的位置有:
var tdate = new Ext.form.DateField({
fieldLabel: '日期',
emptyText: '请选择日期',
format: 'Y-m-d',
disabledDays: [0, 7]
});
var txt = new Ext.form.TextField({
fieldLabel: '请输入姓名',
allowBlank: false,
emptyText: '空',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px',
anchor: '90%'//给错误提示留下10的空间,
});
var htmlEdt=new Ext.form.HtmlEditor({
fieldLabel:'在线编辑器',
enableAlignments:true,
enableColors:true,
enableFont:true,
enableFontSize:true,
enableFormat:true,
enableLinks:true,
enableLists:true,
enableSourceEdit:true
});
var txt2 = new Ext.form.TextField({
fieldLabel: '请输入姓名',
allowBlank: false,
emptyText: '空',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px',
anchor: '90%'
//给错误提示留下10的空间
});
var frm1 = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 100,//注意修改标题的宽度
title: 'form1',
frame: true,
width: 700,
url: 'sender/data.aspx',
items: [{
layout: 'column',//正点的地方来了表示下一曾items都是按列"Column"排序
items: [{
columnWidth: .5,
layout: 'form',//第一列里面内容就是form排序了,从上到下
items: [txt2]
},
{
columnWidth: .5,
layout: 'form',//第二列里面内容就是form排序了,从上到下
items: [txt, tdate]
}]
}, htmlEdt]
});
frm1.render("frm");
});
**********************************************************************
Ext.layout.TableLayout对应面板布局layout配置项的名称为table。
这种比较允许你非常容易的渲染内容到HTML表格中,可以指定列数(columns),跨行(rowspan),跨列(colspan),可以创建出复杂的表格布局。
必须使用layoutConfig属性来指定属于此布局的配置,table布局仅有唯一的布局配置项columns,而包含在其中的子面板会具有rowspan和colspan两个配置项!
下面是表格布局的一个简单的示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
title:'Ext.layout.TableLayout布局示例',
layout : 'table',
layoutConfig : {
columns : 4 //设置表格布局默认列数为4列
},
frame:true,//渲染面板
height : 150,
applyTo :'panel',
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
frame : true,
height : 50
},
items: [
{
title:'子面板一',
colspan : 3 //设置跨列
},
{
title:'子面板二',
rowspan : 2, //设置跨行
height : 100
},
{title:'子面板三'},
{title:'子面板四'},
{title:'子面板五'}
]
})
});
</script>
*********************************************************************************
Ext.onReady(function(){
Ext.QuickTips.init();
//第一句的目的是为需要的元件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息了。
Ext.form.Field.prototype.msgTarget = 'under';
//第二句的目的就是设置控件的错误信息显示位置,主要可选的位置有:
var tdate = new Ext.form.DateField({
fieldLabel: '日期',
emptyText: '请选择日期',
format: 'Y-m-d',
disabledDays: [0, 7]
});
var txt = new Ext.form.TextField({
fieldLabel: '请输入姓名',
allowBlank: false,
emptyText: '空',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px',
anchor: '90%'//给错误提示留下10的空间,
});
var htmlEdt=new Ext.form.HtmlEditor({
fieldLabel:'在线编辑器',
enableAlignments:true,
enableColors:true,
enableFont:true,
enableFontSize:true,
enableFormat:true,
enableLinks:true,
enableLists:true,
enableSourceEdit:true
});
var txt2 = new Ext.form.TextField({
fieldLabel: '请输入姓名',
allowBlank: false,
emptyText: '空',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px',
anchor: '90%'
//给错误提示留下10的空间
});
var frm1 = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 100,//注意修改标题的宽度
title: 'form1',
frame: true,
width: 700,
url: 'sender/data.aspx',
items: [{
layout: 'column',//正点的地方来了表示下一曾items都是按列"Column"排序
items: [{
columnWidth: .5,
layout: 'form',//第一列里面内容就是form排序了,从上到下
items: [txt2]
},
{
columnWidth: .5,
layout: 'form',//第二列里面内容就是form排序了,从上到下
items: [txt, tdate]
}]
}, htmlEdt]
});
frm1.render("frm");
});
****************************************************************************
var simpleForm = new Ext.FormPanel({
labelAlign: 'left',
title: '表单例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
items: [{
layout:'column', //定义该元素为布局为列布局方式
border:false,
labelSeparator:':',
items:[{
columnWidth:.5, //该列占用的宽度,标识为50%
layout: 'form',
border:false,
items: [{ //这里可以为多个Item,表现出来是该列的多行
cls : 'key',
xtype:'textfield',
fieldLabel: '用户名',
name: 'name',
anchor:'90%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
cls : 'key',
xtype:'textfield',
inputType:'password',
fieldLabel: '口令',
name: 'passwd',
anchor:'90%'
}]
}]
}]
})