收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > extjs > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

ExtJs中简单的登录界面制作方法

一 首先请看图片
查看图片
二 登陆界面Ext代码


/// <reference path="http://http://www.gimoo.net/Resources/ExtJs/vswd-ext_2.0.2.js" />
//加载提示框
Ext.QuickTips.init();
//创建命名空间
Ext.namespace('XQH.ExtJs.Frame');
//主应用程序
XQH.ExtJs.Frame.app = function() {
}
Ext.extend(XQH.ExtJs.Frame.app, Ext.util.Observable, {
LoginLogo:new Ext.Panel({
id: 'loginLogo',
height: 35,
frame:true,
bodyStyle:'padding-top:4px',
html:'<h3><center>后台Ext框架</center></h3>'
}),
//登陆表单
LoginForm: new Ext.form.FormPanel({
id: 'loginForm',
defaultType: 'textfield',
labelAlign: 'right',
labelWidth: 60,
frame: true,
defaults:
{
allowBlank: false
},
items:
[
{
name:'LoginName',
fieldLabel: '登陆账号',
blankText: '账号不能为空',
emptyText:'必填',
anchor: '98%'
},
{
name:'LoginPsd',
inputType: 'password',
fieldLabel: '登陆密码',
blankText: '密码不能为空',
maxLength:10,
anchor: '98%'
}
]
}),
//登陆窗口
LoginWin: new Ext.Window({
id: 'loginWin',
Title: '登陆',
width: 250,
height: 150,
closable: false,
collapsible: false,
resizable:false,
defaults: {
border: false
},
buttonAlign: 'center',
buttons: [
{ text: '关于' },
{ text: '登陆' }
],
layout: 'column',
items:
[
{
columnWidth:1,
items: Ext.getCmp("loginLogo")
},
{
columnWidth: 1,
items: Ext.getCmp("loginForm")
}
]
}),
//初始化
init: function() {
this.LoginWin.show();
}
});
//程序入口
Ext.onReady(function() {
var loginFrame = new XQH.ExtJs.Frame.app();
loginFrame.init();
});

三 使用心得  
  1./// <reference path="http://www.gimoo.net/Resources/ExtJs/vswd-ext_2.0.2.js" />这句为ext自动提示功能源文件
  2.关于ext界面布局常用的有border,column,fit这几种,详细用法以后再作介绍
  3.关于ext使用,其实大部分就是window,panel里面镶嵌自己需要的内容,如formpanel(表单)。
  4.要理解{object config},其实大部分ext配置项都是基于这种形式的,{名称:值},如按钮{text:'l登陆'}
  5.书写ext代码最好规范化,这样可以减少出错率。
    大概形式:

      {
        id:'',(最好写上)
        配置信息,
        (如果是最外层的别忘了写layout,布局模式)
      }

  PS:欢迎大家补充,提意思。

ExtJs 表单提交登陆实现代码
1在子类中添加单击提交事件//登陆按钮单击事件loginFun:function(){varf=Ext.getCmp("loginForm");//表单验证if(f.form.isValid){f.form.submit({waitTitle:"请稍候",waitMsg:'正在

ExtJs GridPanel简单的增删改实现代码
1.首先看下效果图:2.ext代码///referencepath="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js"/Ext.namespace('XQH.ExtJs.Frame');XQH.ExtJs.Frame.RoleManage=function(){this.init();};Ex

extjs grid设置某列背景颜色和字体颜色的方法
css代码:.x-grid-back-red{background:#FF0000;}js代码:{header:'分成类型',dataIndex:'divideType',renderer:function(v,m){m.css='x-grid-back-red';returnv;},width:60}或者直接这样写也可

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号