谈谈我对Ext的认识，元芳，你怎么看
实用Ext第一步当然是引用jar包啦。 下载地址
在页面上加上div用于显示这也是必须的
<div id='loginpanel' ></div>在js中我们肯定需要将Ext进行初始化，我们的Ext初始化仅需两步
Ext.QuickTips.init();
Ext.state.Manager.setProvider(newExt.state.CookieProvider());初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载
象如果窗口中有用可拖动面板的话，你在拖动后如果启动了Ext.state.Manager.setProvider(new Ext.state.CookieProvider()),就算刷新后面板仍然会在你拖动后的位置。如果不启用的话是不是就会按照默认的排列方式排列
Ext的特点就是不需要jsp，我们所有的空间都在js中借助Ext来创建。现在我们来创建几个空间来看看效果吧
var loginNames = new Ext.form.TextField({
name : 'userName',
width:140,
allowBlank : false,
maxLength : 16,
fieldLabel : Label_Login.loginName,
listeners : {
'specialkey' : function(f, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
loginForm.form.findField('password').focus(
true, false);
}
}
},
blankText : Label_Login.loginNameBlank // '用户名不能为空'
// regex:/^[0-9a-zA-Z]{2,20}$/,
// regexText:'只能为两到二十位的大小写字母。',
});
【脚注】
上面代码详解点这里1
var loginPasswords = new Ext.form.TextField({
name : 'password',
allowBlank : false,
width:140,
maxLength : 16,
inputType : 'password',
fieldLabel : Label_Login.loginPassword,
listeners : {
'specialkey' : function(f, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
loginFunc();
}
}
},
blankText : Label_Login.loginPasswordBlank // 密码不能为空
// regex:/^.{1,}$/,
// regexText:'长度不能少于1位'
});
// '登陆',
var loginBtn = new Ext.Button({
name : 'loginBtn',
anchor : '100%',
style : 'margin-left:25px;',
text : Label_Button.login,
handler : function(){
loginFunc();
}
});
// '取消'
var resetButton = new Ext.Button({
style : 'margin-left:25px;',
anchor : '100%',
text : Label_Button.reset,
handler : function(){
//loginForm.getForm().reset();
loginForm.form.findField('userName').setValue('请输入用户名');
loginForm.form.findField('password').setValue('请输入密码');
}
});
// 定义loginForm panel
var loginForm = new Ext.FormPanel( {
//defaultType : 'textfield',
id : 'login',
labelWidth : 70,
style : 'background:#ffffff;padding:25px 35px 30px 16px;',
region : "center",
defaults : {
border : false,
allowBlank : false,
msgTarget : 'side'
//blankText : '该字段不允许为空'
},
waitMsgTarget : true,
items : [loginNames,loginPasswords,{
layout :'column',
border : false,
width : '100%',
items : [ {
columnWidth : 0.73,
border : false,
layout : 'form',
items : [ remPwdCheckBox ]
}, {
columnWidth : 0.27,
border : false,
layout : 'form',
style : 'margin-top:3px;',
html : '<a href=\"javascript:void(0);return false;\" onclick=\"getForgetPassword();\" style=\"font-size:11px;\">忘记密码？</a>'
}
]
},{
layout :'column',
border : false,
width : '100%',
items : [ {
columnWidth : 0.5,
border : false,
layout : 'form',
items : [ loginBtn ]
}, {
columnWidth : 0.5,
border : false,
layout : 'form',
items : [ resetButton ]
}
]
}]
});
// cookie中有值,设置记住密码选中状态
// 并赋值给用户名与密码
if ((uName != null && uName!='')
&& (uPwd!=null && uPwd!='')) {
remPwdCheckBox.checked = true;
isRememberPwd = true;
loginForm.form.findField('userName').setValue(uName);
loginForm.form.findField('password').setValue(uPwd);
}
var loginFunc = function() {
if(loginForm.form.isValid()){
loginForm.getForm().submit( {
url : path + '/SysLogin/login.json?isRememberPwd='+isRememberPwd,
success : function(form, action) {
var result = action.result;
if (result.success) {
document.location=path+action.result.url;
} else {
Ext.Msg.alert(message.info,action.result.msg);
loginForm.getForm().reset();
}
},
failure : function(form, action) {
if (action.failureType == 'server') {
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert( message.loginFailure, obj.msg);
} else {
Ext.Msg.alert( message.warning, message.loginError);//'认证服务器无法连接 '
}
loginForm.getForm().reset();
},
waitMsg : Label_Login.waitMsg //'正在登录，请稍候...'
});
}
};
// 展示到登陆页面body中的面板
var panel = new Ext.Panel( {
renderTo : 'loginpanel',
layout : "border",
width : 525,
height : 290,
defaults : {
border : false
},
items : [ {
region : "north",
height : 56,
html : '<img src="'+path+'/resources/common/images/head.gif"/>'
}, {
region : "south",
height : 56,
html : '<img src="'+path+'/resources/common/images/foot.gif"/>'
}, {
region : "west",
width : 253,
html : '<img src="'+path+'/resources/common/images/left.gif"/>'
}, loginForm]
});
Ext.get('loginpanel').setStyle('position', 'absolute').center(Ext.getBody());
loginForm.form.findField('userName').focus(true,false);
};Ext.onReady(login);function getForgetPassword(){
var userName = Ext.getCmp('login').form.findField("userName").getValue();
if(userName != null && userName != "" && userName != "请输入用户名" ){
Ext.Ajax.request({
url:path + '/SysLogin/getForgetPassword.json',
params:{userName:userName},
success:function(response){
var responseArray = Ext.util.JSON.decode(response.responseText);
Ext.Msg.alert('警示',"请你联系"+responseArray.Affiliation+"下的管理员找回密码！");
},
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});
}else{
Ext.Msg.alert('错误','请确认账户是否存在！');
}
}效果图
创建store
var tab2store = new Ext.data.Store( {
url : path + '/SysKhyz/getKHyzInstallList.json?id=' + id,
reader : new Ext.data.JsonReader( {
fields : [ 'ID', 'NAME', 'MODEL', 'TONS', 'NUM', 'PLACE',
'LINE_STATUS' ],
root : 'rows',
totalProperty : 'total'
})
// autoLoad : true
});
tab2store.load( {
params : {
start : 0,
limit : pagesize
}
});
加载grid
var tab2_grid = new Ext.grid.GridPanel( {
id : 'KhyzInstall',
// title :'站线信息',
height : 500,
trackMouseOver : true,
region : "center",
layout : 'fit',
anchor : '100%',
frame : false,
stripeRows : true,
loadMask : {
msg : '正在加载数据，请稍后.....'
},
ds : tab2store,
sm : new Ext.grid.CheckboxSelectionModel( {
singleSelect : false
}),
viewConfig : {
forceFit : true
},
columns : [ new Ext.grid.CheckboxSelectionModel(),
new Ext.grid.RowNumberer(), {
header : '设备名称',
sortable : true,
width : 220,
dataIndex : 'NAME'
}, {
header : '设备型号',
sortable : true,
width : 220,
dataIndex : 'MODEL'
}, {
header : '吨位（t）',
width : 220,
sortable : true,
dataIndex : 'TONS'
}, {
header : '数量',
width : 220,
sortable : true,
dataIndex : 'NUM'
}, {
header : '配置地点',
width : 220,
sortable : true,
dataIndex : 'PLACE'
}, {
header : '状态',
width : 220,
sortable : true,
dataIndex : '',
renderer : function(v, p, r, i) {
var s = r.get('LINE_STATUS');
if (s == '0' || s == 0) {
return '待提交';
} else if (s == '1' || s == 1) {
return '审批中';
} else if (s == '2' || s == 2) {
return '已通过';
} else if (s == '3' || s == 3) {
return '已驳回';
} else {
return '';
} }
} ],
bbar : new Ext.PagingToolbar( {
pageSize : pagesize,
store : tab2store,
displayInfo : true,
displayMsg : '显示第{0}条到{1}条记录，一共{2}条',
emptyMsg : '没有发现记录'
})
});
按钮事件
var addWin = new Ext.Window(
{
layout : 'fit',
width : 1000,
height : 400,
plain : true,
border : false,
maximizable : true,
title : '新增',
items : [ add_formpanel ],
modal : true,
shadow : true,
resizable : false,
closeAction : 'hide',
maximizable : true,
buttons : [
{
id : 'SaveBtn5',
text : '保存',
iconCls : 'save',
disabled : false,
handler : function() {
Ext.getCmp('SaveBtn5').setDisabled(true);
if (add_formpanel.form.isValid()) { add_formpanel
.getForm()
.submit(
{
url : path
+ '/SysKhyz/savaKHyzInstall.json?TKHYZ_BASE_ID='
+ id
+ '&LINE_STATUS=0',
method : 'POST',
success : function(
form, action) {
Ext.MessageBox
.alert(
"提示信息",
"信息保存成功！");
tab2store
.load( {
params : {
start : 0,
limit : pagesize
}
});
addWin.hide();
Ext
.getCmp(
'SaveBtn5')
.setDisabled(
false);
},
failure : function(
form, action) {
Ext.MessageBox
.alert(
"提示信息",
"服务器错误,请重试！");
Ext
.getCmp(
'SaveBtn5')
.setDisabled(
false);
}
});
} else {
Ext.getCmp('SaveBtn5').setDisabled(false);
} }
},
{
text : '提报',
iconCls : 'taskSend',
handler : function() { if (add_formpanel.form.isValid()) { add_formpanel
.getForm()
.submit(
{
url : path
+ '/SysKhyz/savaKHyzInstall.json?TKHYZ_BASE_ID='
+ id
+ '&LINE_STATUS=1',
method : 'POST',
success : function(
form, action) {
if (action.result.flag) {
Ext.MessageBox
.alert(
"提示信息",
"信息提报成功！"); } else {
Ext.MessageBox
.alert(
"提示信息",
"提报流程出错,数据已保存！");
} tab2store
.load( {
params : {
start : 0,
limit : pagesize
}
});
addWin.hide();
},
failure : function(
form, action) {
Ext.MessageBox
.alert(
"提示信息",
"服务器错误,请重试！");
}
});
} } }, {
text : '关闭',
iconCls : 'clear',
handler : function() {
addWin.hide(); } } ]
});
每天进步一点
Label_Login.loginName系统字段，读者可以改成自己的文字
listeners注册的监听，按下键盘回车就把屏幕焦点放到密码框
blankText是右边错误提示信息
谈谈我对Ext的认识，元芳，你怎么看的更多相关文章
- 【Ext.Net学习笔记】03：Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...
- Ext.QuickTips.init();
在Extjs的组件需要提示框时往往需要此语句. 首先,Ext.QuickTips是什么? 在Ext JS 4.2.0 的API中可以查到,注意在其他的Extjs版本以下查不到,这是因为在其他版本Ext ...
- Ext.Net学习笔记06：Ext.Net DirectEvents用方补充
在ASP.NET控件上面使用DirectEvents 我们在ASP.NET中实现无刷新的页面请求的时候,通常会用到UpdatePanel,现在Ext.Net为我们提供了另外一种渠道:通过DirectE ...
- [Ext JS 4] 实战之Grid, Tree Gird编辑Cell
前言 本篇这里以稍微复杂一点的Tree Grid 来介绍. 在写编辑grid 之, 先来看一下 grid 的 selType 的配置. 先给一个简单的Tree grid 的例子: Ext.onRead ...
- Ext JS 5初探（三）
在上文提到了本地化文件的问题,然后在Ext JS 5的包里找了找,居然还没包含本地化包.我估计目前还不到考虑本地化的时候.在Sencha Touch中,是没有本地化包的,但是要让Ext JS也不包含本 ...
- 【翻译】在Ext JS应用程序中使用自定义图标
原文:Using Custom Icons in Your Ext JS App 作者:Lee BoonstraLee is a technical trainer at Sencha. She's ...
- 安装和使用pyltp
什么是pyltp: pyltp 是LTP的 Python 封装,提供了分词,词性标注,命名实体识别,依存句法分析,语义角色标注的功能. 安装 pyltp 测试环境:系统win10 64位, pytho ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- 解读sencha touch移动框架的核心架构(一)
sencha的前身就是Extjs了,sencha 框架是世界上第一个基于HTML5的Mobile App框架 那么何谓框架,传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构 ...
随机推荐
- 聚类时的轮廓系数评价和inertia_
在进行聚类分析时,机器学习库中提供了kmeans++算法帮助训练,然而,根据不同的问题,需要寻找不同的超参数,即寻找最佳的K值 最近使用机器学习包里两个内部评价聚类效果的方法:clf=KMeans(n ...
- java中动态代理的使用
代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常会存在关联关系,一个代 ...
- springboot自动装配（1）---@SpringBootApplication注解怎么自动装配各种组件
1.对于springboot个人认为它就是整合了各种组件,然后提供对应的自动装配和启动器(starter) 2.@SpringBootApplication注解其实就是组合注解,通过它找到自动装配的注 ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
- Java开发面试题汇总 -- 精选版（附答案）
最近事情太多,没太时间写公众号.今天抽空再整理整理面试中的那点事吧,帮助那些正在找工作或想跳槽找工作的兄弟姐妹们. 前面我己写过多篇推文,相信关注此公众号的伙伴们已经了解掌握了不少.从目前流行的开发技 ...
- [原创]实现MongoDB数据库审计SQL语句的脚本
功能:实现具体显示mongodb数据库表操作语句的状态和情况,使用awk和shell实现抓取和分析处理.脚本内容如下: #!/bin/bash if [ $# == 0 ];then echo &qu ...
- 精美的在线icon
super-tiny-icons(0.2.1)列表 序号 名称 图标 地址 是否使用 1 acast.svg https://cdn.jsdelivr.net/npm/super-tiny-icons ...
- windows RDP远程代码执行_CVE-2019-0708漏洞复现
windows RDP远程代码执行_CVE-2019-0708漏洞复现 一.漏洞概述 2019年5月14日微软官方发布安全补丁,修复了windows远程桌面服务的远程代码执行漏洞,该漏洞影响了某些旧版 ...
- 用tcp协议实现一个并发的socketserver 进行密文登录
先在客户端进行摘要,客户端把用户名作为盐. 然后在服务端进行二次摘要,用固定的盐(不能让别人知道你的盐是什么),然后存到文件中,密文存储.或者和文件中的密文对比. 这样即使在网络上用户信息被截获,和存 ...
- Java编程基础阶段笔记 day01 Java语言概述
目录内容 DOS命令 电脑配置 Java语言的特性 Java两种核心机制 Java语言环境搭建 第一个Java程序 注释 Java语句说明 编程风格 作业 常用的DOS命令 dir : 列出当 ...