第一个ExtJS练习（添加用户面板）
1.【准备】
我是在visual studio里面建立了一个asp.net MVC项目，然后导入ExtJS必要的包，然后写的。
ExtJS5.1版本下载：https://pan.baidu.com/s/1i3xKGhZ
建立项目详细可参考：http://www.docin.com/p-485498314.html
如何建立一个ExtJS页面：http://www.qeefee.com/article/000403
打开你的visual studio，新建一个web项目，选择建立一个MVC项目
然后选择MVC
然后就生成一个MVC项目啦，然后你根据我的目录结构，导入和命名一些文件夹【重点在（Script文件夹里面导入ExtJS部分）】
2.【效果图】
3.【代码】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/Extjs/ext-all.js"></script>
<script src="Scripts/Extjs/packages/ext-locale/build/ext-locale-zh_CN.js"></script>
<script src="Scripts/Extjs/ux/app.js"></script>
<link href="Scripts/Extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
<!--<script type="text/javascript">
测试上面js,css文件是否连接进来用的
Ext.onReady(function () {
Ext.Msg.alert("hh", "welcome");
var win = new Ext.Window({ title: "hello", width: 200, height: 300, html: '<h1>ok....just a test....</h1>' });
win.show();
});
</script>--> <script type="text/javascript">
Ext.onReady(function () {
var addUserPanel = Ext.create('Ext.panel.Panel', { bodyStyle: 'padding:15px 15px 15px 0px',
style: { 'text-align': 'right' },//文字右靠
width: 430,
title: '添加用户',
tools: [{
type:'close',
}],
items: [ {
xtype: 'textfield',
fieldLabel: '账号',
width:'100%',
beforeLabelTextTpl: [
'<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
], }, {
xtype:'panel',
layout: 'column',
border: false, isFormField: true,
style:{'padding-bottom':'5px'},
items:[{ xtype: 'checkboxfield',
boxLabel: '账号有效期设置', // reference:'acc_validity',
columnWidth: .55,
style:{'padding-left':'105px','text-align':'left'}, }, {
xtype: 'datefield',
fieldLabel: '有效期:',
name:'a_validity',
format:'Y-m-d',
columnWidth: .45,
layout: 'form',
style: { 'float': 'left' },
labelWidth: 60,
disabled:true,//无效禁用效果 }
]}, {
xtype: 'textfield',
fieldLabel: '密码',
inputType: 'password',
width: '100%',
beforeLabelTextTpl: [
'<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
], }, {
xtype: 'textfield',
fieldLabel: '确认密码',
width: '100%',
inputType: 'password',
beforeLabelTextTpl: [
'<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
], }, {
xtype:'panel',
layout: 'column',//列布局
border:false,
isFormField: true,
style: { 'padding-bottom': '5px' },
items:[{
xtype: 'checkboxfield',
boxLabel: '密码有效期设置',
columnWidth: 0.55,//分到的列宽
layout: 'form',
style: { 'padding-left': '105px','text-align':'left' },
// width:150
}, {
xtype: 'spinnerfield',
fieldLabel: '有效期（天）',
minValue:'0',
maxValue:' 30',
value: '30',
columnWidth: 0.45,//分到的列宽
layout: 'form',
disabled: true,
//width: 200, }]
}, {
xtype: 'textfield',
fieldLabel: '工作单位',
width: '100%',
}, {
xtype: 'textfield',
fieldLabel: '邮箱',
vtype: 'email',//邮箱格式验证
width: '100%',
}, {
fieldLabel: '电话',
xtype: 'textfield',
width: '100%', }, {
xtype:'panel',
layout: 'column',
border:false,
isFormField: true, items:[{
fieldLabel: '姓',
xtype: 'textfield',
columnWidth: 0.55, labelWidth: 40, style: { 'padding-left': '60px','padding-bottom':'5px' }, }, {
fieldLabel: '名',
xtype: 'textfield',
columnWidth: 0.45, labelWidth: 40, }] }, {
fieldLabel: '用户角色',
xtype: 'combo',
width: '100%',
layout:'form',
beforeLabelTextTpl: [
'<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
],//左边出现“*” allowBlank: false,//不允许为空
blankText: '不能为空',//为空则提示
msgTarget: 'side',//警告在右边出现“！”
//设置为选项的text的字段
displayField: "Name",
//设置为选项的value的字段
valueField: "Id",
//选项数据
store: new Ext.data.SimpleStore({
fields: ['Id', 'Name'],
data: [[1, '男'], [0, '女']]
}) }, {
layout: "form",
border: false,
style: { 'padding-left': '100px', 'text-align': 'left' },
items:[{xtype: 'checkboxfield',
boxLabel: 'App权限', }, {
xtype: 'checkboxfield',
boxLabel: '启用',
checked: true, }] }, {
xtype: 'textarea',
fieldLabel: '备注',
width: '100%',
}
],
buttons: [{
text:'保存' }, {
text:'关闭',
}, ], renderTo: 'div' });
//主要是用于当数据不能为空时，显示“！”警告
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
}); </script>
</head>
<body>
<div id="div"></div>
</body>
</html>
4.【资料】
无废话ExtJS系列教程：http://www.cnblogs.com/iamlilinfeng/category/910426.html
form跟column布局：http://hn2002.iteye.com/blog/520325
ExtJS一些控件属性：http://www.cnblogs.com/exmyth/archive/2013/04/12/3015827.html
ExtJS5学习笔记系列（这篇主要讲怎么添加重点符号*）：http://blog.csdn.net/sushengmiyan/article/details/39395753
ExtJS4.0入门（对panel做了很详细的例子）：http://www.doc88.com/p-788443516093.html
整理以上，记录学习，也希望为后面的学习者提供一些有用的资料
第一个ExtJS练习（添加用户面板）的更多相关文章
- 使用mybatis开发Dao的原始方法，实现根据用户id查询一个用户信息 、根据用户名称模糊查询用户信息列表 、添加用户信息等功能
1.需求 将下边的功能实现Dao: 根据用户id查询一个用户信息 根据用户名称模糊查询用户信息列表 添加用户信息 2. 原始Dao开发方法需要程序员编写Dao接口和Dao实现类 3.User.xml映 ...
- linux下添加用户并将文件夹授权给某一个用户
### linux下添加用户并将文件夹授权给某一个用户 背景:在做一个项目时,需要外包的前端人员调试测试环境的页面,但是又不能给他服务器的账号信息,就在服务器上新添加一个子账户,再给这个账户项目文件的 ...
- 工程师技术(五)：Shell脚本的编写及测试、重定向输出的应用、使用特殊变量、编写一个判断脚本、编写一个批量添加用户脚本
一.Shell脚本的编写及测 目标: 本例要求两个简单的Shell脚本程序,任务目标如下: 1> 编写一个面世问候 /root/helloworld.sh 脚本,执行后显示出一段话“Hello ...
- shell编写一个批量添加用户脚本
shell编写一个批量添加用户脚本 5.1问题 本例要求在虚拟机server0上创建/roo ...
- windows db2 添加用户权限
http://www.csharpwin.com/csharpspace/12086r9069.shtml 在windows上DB2数据库安装的时候会创建一个系统管理员 的账户,默认为DB2ADMIN ...
- IdentityServer4 使用OpenID Connect添加用户身份验证
使用IdentityServer4 实现OpenID Connect服务端,添加用户身份验证.客户端调用,实现授权. IdentityServer4 目前已更新至1.0 版,在之前的文章中有所介绍.I ...
- [CentOs7]搭建ftp服务器(2)——添加用户
摘要 上篇文章完成了ftp服务器的安装与匿名访问的内容,当然出于安全的考虑是不允许匿名访问服务器的,所以就有了本篇的内容 ,为ftp服务器添加用户,用改用户进行访问. vsftpd添加用户 FTP用户 ...
- sh3.useradd 添加用户脚本
1.写一个脚本: 添加10个用户user1到user10,密码同用户名,但要求只有用户不存在的情况下才能添加 #/bin/bash # ..};do if id user$i &> /d ...
- MySQL添加用户、删除用户与授权
MySql中添加用户,新建数据库,用户授权,删除用户,修改密码(注意每行后边都跟个;表示一个命令语句结束): 1.新建用户 1.1 登录MYSQL: @>mysql -u root -p @&g ...
随机推荐
- Jmeter常用功能详解
嘻嘻,忙碌的一周,马上就到周四了~明天就是周五了,可以去嗨了! 这几天正式成立了一个微信订阅号,旨在免费帮助需要入门软件测试的小白! 各位走过路过的亲,欢迎订阅哦:扫描二维码即可订阅
- python+selenium自动化软件测试（第3章）：unittest
3.1 unittest简介 前言(python基础比较弱的,建议大家多花点时间把基础语法学好,这里有套视频,可以照着练习下:http://pan.baidu.com/s/1i44jZdb 密码:92 ...
- 如何使用 Weave 网络？- 每天5分钟玩转 Docker 容器技术（63）
weave 是 Weaveworks 开发的容器网络解决方案.weave 创建的虚拟网络可以将部署在多个主机上的容器连接起来.对容器来说,weave 就像一个巨大的以太网交换机,所有容器都被接入这个交 ...
- 关于wamp服务器文件的配置
有的前端朋友想在手机端看PC端开发的html5页面,这时候会在本地PC下载一个wamp,这时候在PC端输入电脑的IP地址或者是直接输入localhost,可以访问www目录下的文件(开发项目必须放置在 ...
- jmeter系列-------脚本编写格式
1.通常会将用户和服务器的一次交互(页面访问或者提交)请求放在一个简单控制器或者事务控制器,例如微课首页里面包含4个接口都放到简单控制器里 或者一个提交可能,会触发3个接口,那么这3个接口放到一个简单 ...
- 迁移学习-Transfer Learning
迁移学习两种类型: ConvNet as fixed feature extractor:利用在大数据集(如ImageNet)上预训练过的ConvNet(如AlexNet,VGGNet),移除最后几层 ...
- MySQL的JOIN（三）：JOIN优化实践之内循环的次数
这篇博文讲述如何优化内循环的次数.内循环的次数受驱动表的记录数所影响,驱动表记录数越多,内循环就越多,连接效率就越低下,所以尽量用小表驱动大表.先插入测试数据. CREATE TABLE t1 ( i ...
- 微软为啥让免费升Win10？
今天终于赶在截止日期之前把我的联想PC升到win10.微软这次对中国开放的持续一年的免费升级活动主要有两个原因.首先当然是"感恩Windows用户长久支持的回馈".微 ...
- Ubuntu 14.02 cmake升级 失败解决
错误的提示: CMake Error: Could not find CMAKE_ROOT !!! CMake has most likely not been installed correctly ...
- 团队作业8——第二次项目冲刺（Beta阶段）5.18
1.当天站立式会议照片 会议内容: 本次会议为第一次会议 本次会议在陆大楼2楼召开,本次会议内容: ①:部署第二次敏捷冲刺的计划 ②:做第一天任务的详细分工 ③:规定完成时间是在第二天之前 ④:遇到困 ...