【ExtJS】简单布局应用
前几天学习了ExtJS的各种布局后,以下就是各种实践,从简单做起。
实现目的:
一个提交表单页,一个显示信息页,表单为个人基本资料输入,显示页为基本信息展示。
内容:
总体布局为border布局,展示页为west,提交表单为center。展示页可折叠,默认为折叠状态。
1、展示页用一个panel展示。可折叠,默认为折叠状态。点击提交后展示,点击关闭后关闭。
var show = Ext.create('Ext.panel.Panel',{
region: 'west',
title: 'Show',
width: 150,
margin: '5 2 5 5',
collapsible: true,
collapsed: true,
});
collapsed默认为折叠状态。
2、表单页。内容有:姓名输入、性别选择、出生日期、职务、备注。分别用到5种组件。
(1) 姓名输入:组件选择Textfield。
var form_name = Ext.create('Ext.form.TextField',{
id: 'form_name',
name: 'name',
fieldLabel: 'Name',
labelWidth: 60
});
(2) 性别选择:组件选择RadioGroup.
var form_sex = Ext.create('Ext.form.RadioGroup',{
name: 'sex',
fieldLabel: 'Sex',
columns: 2,
vertical: true,
labelWidth: 60,
items: [
{boxLabel: 'Man', id: 'man', name: 'sex', inputValue: '1'},
{boxLabel: 'Woman', id: 'woman', name: 'sex', inputValue: '2'}
]
});
(3) 出生日期:组件选择Date.
var form_dateTime = Ext.create('Ext.form.Date',{
id: 'form_date',
name: 'dateTime',
fieldLabel: 'DateTime',
labelWidth: 60,
editable: false,
maxValue: new Date()
});
(4) 职务:组件选择ComboBox.
var form_work = Ext.create('Ext.form.ComboBox',{
id: 'form_work',
name: 'work',
fieldLabel: 'Work',
labelWidth: 60,
editable: false,
store: new Ext.data.Store({
fields: ['position','value'],
data: [
{'position': 'Engineer', 'value': '1'},
{'position': 'Boss', 'value': '2'},
{'position': 'director', 'value': '3'}
]
}),
queryMode: 'local',
displayField: 'position',
valueField: 'value'
});
(5) 备注:组件选择TextArea.
var form_remark = Ext.create('Ext.form.TextArea',{
id: 'form_remark',
name: 'remark',
fieldLabel: 'Remark',
labelWidth: 60,
flex: 1
});
Form其子组件布局选择为vbox,vbox配置控件宽度与父组件宽度一样。
下面加2个按钮,按钮位置可以设置buttonAlign来定位,这里默认设置靠右。
关于控件值的获取,通过各自id来获取控件,然后通过getValue()获取值,其中RadioGroup控件通过各自id获取控件,获取的值为true和false,采用三目运算符进行转换输出。最后comboBox组件获取值为getRawValue().
除了最后备注控件,其他控件高度为默认高度,将textArea加个属性flex: 1,表示剩余高度由textArea填满。
信息的展示使用update( String/Object htmlOrData, [Boolean loadScripts], [Function callback] )方法更新。
var form = Ext.create('Ext.form.Panel',{
title: 'Form',
region: 'center',
border: true,
id: 'formId',
margin: '5 2 5 5',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [form_name,form_sex,form_dateTime,form_work,form_remark],
buttons: [{
text: 'Save',
handler: function(){
var name = Ext.getCmp('form_name').getValue();
var sex = Ext.getCmp('man').getValue() ? 'man' : 'woman';
var dateTime = Ext.getCmp('form_date').getValue();
var work = Ext.getCmp('form_work').getRawValue();
var remark = Ext.getCmp('form_remark').getValue(); show.update('<p1>name: </p1>' + name + '<br />' + 'Sex: ' + sex + '<br />' + 'DateTime: ' + Ext.Date.format(dateTime, 'Y-m-d') + '<br />' + 'Work: ' + work + '<br />' + 'remark: ' + remark);
}
},{
text: 'Cancel',
handler: function(){
show.update();
}
}]
});
最后将两个结合起来:
var message = Ext.create('Ext.panel.Panel',{
title: 'Message Layout',
titleAlign: 'center',
layout: 'border',
width: 500,
height: 400,
border: true,
renderTo: Ext.getBody(),
items: [show,form]
});
效果:
【ExtJS】简单布局应用的更多相关文章
- ExtJs常用布局--layout详解(含实例)
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
- WPF简单布局 浅尝辄止
WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素. 注意:造成这一限制的原因是window类继承自 ...
- table 和 div 简单布局
table 简单布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 【JQuery Easy UI】后台管理系统的简单布局分享
重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...
- Masonry 布局 cell 高度适应的一种方案(实现类似朋友圈简单布局)
来源:伯乐在线 - 夏天然后 链接:http://ios.jobbole.com/89298/ 点击 → 申请加入伯乐在线专栏作者 前言: 我模仿的是微博的布局所以也就没有 评论动态刷新cell. 1 ...
- extjs 简单入门
中文网站:http://extjs.org.cn/ 英文网站:http://www.sencha.com/products/extjs/ 1.简介 extJS是一种主要用于创建前端用户界面,是一个基本 ...
- 利用CSS简单布局的不同组合类型
关于CSS布局页面的简单组合方式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- CSS学习之首页简单布局
作为一个PHPer,在前端方面javascript.jquery这些的日常工作还搞的定.可对于div+css这些东西可就头疼了,所以现在开始学习CSS 跟着燕十八的教程开始从最基础学起,首先练习一个简 ...
- Extjs Column布局常见问题及解决方法
原文地址:http://blog.csdn.net/weoln/article/details/4339533 第一次用Extjs的column布局时遇见了很多问题,记录下来,供大家参考.column ...
随机推荐
- 第二章第一个项目——关于mime
一句话就能解释清楚. MIME标注HTTP响应类型. 而后缀名标注文件类型. ---------分割线-------- http响应实质上只有数据,没有文件名. 举个例子吧. HTTP/1.1 200 ...
- js链式调用
我们都很熟悉jQuery了,只能jQuery中一种非常牛逼的写法叫链式操作 * $('#div').css('background','#ccc').removeClass('box').stop() ...
- Linq聚合操作之Aggregate,Count,Sum,Distinct源码分析
Linq聚合操作之Aggregate,Count,Sum,Distinct源码分析 一:Linq的聚合运算 1. 常见的聚合运算:Aggregate,Count, Sum, Distinct,Max, ...
- 使用扩展方法重写.NET底层架构
我们在开发B/S架构的项目时,用到的都是.NET底层各种命名空间提供的操作类,利用扩展类可以重新写出一套真正属于你自己的框架. PS:扫描下方二维码或点击链接,加入QQ群
- python3 的zip()函数
重点 https://blog.csdn.net/qq826364410/article/details/78259796 为啥会出现几个两个空列表????
- OCP最新题库收集,新版052考题及答案整理-19
19.Which is true about invalid PL/SQL objects? A) They are automatically recompiled against the new ...
- [arc076F]Exhausted? 贪心+堆
Description 有m个椅子,第i个在位置i,每个椅子只能坐一个人. 有n个人,第i个人能坐的椅子的位置j需满足j≤Li或j≥Ri. 现在你可以添加若干个椅子,可以放在任意实数位置.问最 ...
- CVE-2012-2122-Mysql身份认证漏洞及利用
一.漏洞简介 当连接MariaDB/MySQL时,输入的密码会与期望的正确密码比较,由于不正确的处理,会导致即便是memcmp()返回一个非零值,也会使MySQL认为两个密码是相同的.按照公告说法大约 ...
- js中apply详解
学习http://www.cnblogs.com/delin/archive/2010/06/17/1759695.html 1.对象的继承,一般的做法是复制:Object.extend protot ...
- [Swift]复数的表示和四则运算
我们把形如z=a+bi(a,b均为实数)的数称为复数,其中a称为实部,b称为虚部,i称为虚数单位. 当虚部等于零时,这个复数可以视为实数:当z的虚部不等于零时,实部等于零时,常称z为纯虚数. 复数域是 ...