Sencha touch 开发系列:容器组件:panel formpanel
panel是一个非常有用的容器，它是由container派生出来的，它的功能基本和container一样。唯一区别是它可以做为一个弹出层（浮动在其他组件之上），其实container也可以，只是ST并未提供对应的样式效果。给大家一个小例子对比一下：
//创建一个按钮
var button = Ext.create('Ext.Button', {
text: '一个普通按钮',
id: 'rightButton',
handler:function()
{
//使用panel做为弹出提示
Ext.create('Ext.Panel', {
html: '弹出层',
left: 0,
padding: 10
}).showBy(button);
}
});
//创建一个全屏容器
Ext.create('Ext.Container', {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
button
]
}
]
});
效果：
当你点击按钮的时候，会弹出小提示，我们使用的是panel弹出。
这时我们改为container,看看啥效果
//创建一个按钮
var button = Ext.create('Ext.Button', {
text: '一个普通按钮',
id: 'rightButton',
handler:function()
{
//使用container做为弹出提示
Ext.create('Ext.Container', {
html: '弹出层',
left: 0,
padding: 10
}).showBy(button);
}
});
//创建一个全屏容器
Ext.create('Ext.Container', {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
button
]
}
]
});
效果：
看到没，看不出啥弹出效果了。只是显示出来了。
所以在做一些弹出层的时候，你可能更应该考虑panel，当然你也可以使用container去自定义一样式处理。
再看一个panel弹出层的应用实例，我们不调用showBy,而调用他的show方法，showBy字义可理解为显示在某某组件的身边。
而show则简单为显示。
代码：
//创建一个按钮
var button = Ext.create('Ext.Button', {
text: '一个普通按钮',
id: 'rightButton',
handler:function()
{
//创建一个弹出层,在屏幕中间显示
var p=Ext.create("Ext.Panel",{
modal:true,
width:'80%',
height:100,
hideOnMaskTap:true,
centered:true,
items:[{xtype:'titlebar',title:'息信选项',docked:'top'}],
html:'我在测试呢！'
});
Ext.Viewport.add(p);
p.show();
}
});
//创建一个全屏容器
Ext.create('Ext.Container', {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
button
]
}
]
});
效果：
和showBy不一样了吧。
看大家的需求是怎样的了。可以去练练，玩玩。
下面说下formpanel
从子面就可以看出，它肯定是由panel派生而来的了，没错，确实是这样。它是一种表单型的容器
它有一些表单的特性，如submit提交,在ST中，这个表单还有更多的功能：你可以为他指定一个数据模型，也可以获取型，你还可以很方便的获取表单所有组件的键值和设置。
下面我们来看个实例，用实例说话：
//创建一个全屏表单
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
},
{
xtype: 'button',
name: 'btnSubmit',
text:'提交',
handler:function()
{
//指定提交到的url
form.setUrl("login.ashx");
//输出表单值到控制台
console.log(form.getValues());
//提交表单
form.submit();
}
}
]
});
注意看代码备注哈：
效果：
看到没？这时如果我们l输入一些值，然后我们看是表单是否有提交还是我们通过表单的getValues是否有获取到值
大家可以看到，在chrome f12 network我们可以看到，发出一个一post请求，在请求的handlers中我们看到，带过去的表单数据，正是我们输入的。
再看看控制台
也有正确输出我们的值
OK这就是ST中form的魅力。
再来个综合点的实例了:
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
docked: 'top',
xtype: 'titlebar',
title: "我给大家的一个综合实例",
ui:'light'
},{
xtype: 'fieldset',
title: "用户登录",
defaults:{
required : true,
labelAlign: 'left',
labelWidth: '40%'},
items: [{
id:'txtUserName',
xtype: 'textfield',
name : 'name',
label: "用户名"},
{
id:'txtPassword',
xtype: 'passwordfield',
name : 'password',
label: "密码"}],
},
{
xtype:'panel',
layout:'hbox',
height:40,
items:
[{
xtype: 'button',
text: "登录",
ui: 'action',
flex:1
},
{
xtype: 'button',
text: "重置",
ui: 'action',
flex:1,
style:'margin-left:3px;'
}
]
},
{
xtype: 'fieldset',
id:'fieldSetForget',
height:20,
cls:"margin-bottom:2px;margin-top:10px;",
instructions: '<p style="width:102px;text-align:left;color: gray;font-size:.8em;margin-top:-10px;margin-left:-5px;cursor:pointer;" id="btnForgetPassword">忘记密码?</p>',
},{
xtype: 'fieldset',
instructions: "版权所有：刘江"
}, ]
});
效果：
有同学会问，他和panel有啥区别？
区别很简单在html中form和div有啥区别，呵呵。确实是这样的，我们的formpanel生成的html源码就是一个from而panel是一个div。
只是我们ST中对这个form和panel做了一些包装变成了我们的formpanel和panel。
收工，有空的同学多多在code editor中练习下，熟悉一些重要组件。
有问题的同学可以加入我们的社区或群：13453484在线提问，我尽速解答。
作者：Louja
出处：http://html5mob.cnblogs.com 同步在：http://html5mob.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。
