第一个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　

整理以上，记录学习，也希望为后面的学习者提供一些有用的资料　

转载于:https://www.cnblogs.com/GuliGugaLiz/p/7127215.html

第一个ExtJS练习（添加用户面板）相关推荐

linux创建数据库并设置密码,CentOS 8安装MySQL教程并创建数据库并添加用户
本文的CentOS系统版本:CentOS 8.0 1905 MySQL版本:mysql-8.0.18 准备首先,防火墙配置 CentOS使用防火墙作为7.x的默认防火墙,这里将其更改为iptable ...
详解Linux系统的用户管理——添加用户、删除用户、查询用户信息、切换用户、用户组
Linux系统的用户管理用户管理的规则添加用户基本语法实际案例细节说明给用户指定或者修改密码基本语法应用案例删除用户基本语法应用案例删除用户注意事项查询用户信息基本语法应 ...
如何在mysql中添加用户_如何给mysql数据库添加一个用户
首先以root身份登录到MySQL服务器中. $ mysql -u root -p 当验证提示出现的时候,输入MySQL的root帐号的密码. 创建一个MySQL用户使用如下命令创建一个用户名和密码 ...
编写Java程序，在屏幕上显示带标题的窗口，并添加一个按钮。当用户单击按钮时，结束程序。
编写Java程序,在屏幕上显示带标题的窗口,并添加一个按钮.当用户单击按钮时,结束程序. package p3;import java.awt.event.ActionEvent; import ja ...
编写一个批量添加用户脚本
5案例5:编写一个批量添加用户脚本 5.1问题本例要求在虚拟机server0上创建/root/batchusers脚本,任务目标如下: 此脚本要求提供用户名列表文件作为参数如果没有提供参数,此脚本 ...
mysql useradd_一天一个linux基础命令之添加用户useradd
添加用户 useradd 1.命令格式useradd [options] USERNAME 2.命令功能 useradd命令用于Linux中创建的新的系统用户.useradd可用来建立用户帐号.帐号建 ...
java 添加用户数据库,跟屌丝学DB2 第二课建立数据库以及添加用户
在安装DB2 之后,就可以在 DB2 环境中创建自己的数据库.首先考虑数据库应该使用哪个实例.实例(instance) 提供一个由数据库管理配置(DBM CFG)文件控制的逻辑层,可以在这里将多个数据 ...
虚拟服务器添加用户白名单,apache配置黑名单和白名单及账户权限控制
apache配置黑名单和白名单的两个方法为项目需要,部署之后客户需要实现白名单功能.以前一般使用iis服务器或者是网上的DZ或CP面板,而且也仅仅操作过黑名单.百度搜索,基本都是黑名单的操作方法,本 ...
QGC地面站手把手教你改——如何添加跟随面板显示关键参数
如何添加跟随面板显示关键参数一. 要实现的目标二. 代码分析与修改 1. 飞行地图文件的分析与修改 2. 代理文件中数据源 3. 代理文件中显示形式所有的热爱都要不遗余力,真正喜欢它便给它更高的 ...

第一个ExtJS练习（添加用户面板）

第一个ExtJS练习（添加用户面板）相关推荐

最新文章

热门文章