[第3讲]ExtJs基础UI设计进阶教程(1)

最新推荐文章于 2021-03-17 11:44:02 发布

Mr灬羽化

最新推荐文章于 2021-03-17 11:44:02 发布

阅读量1.2k

点赞数

分类专栏： [DOJOchina]EXTJS 文章标签： extjs ui stylesheet xhtml function html

本文链接：https://blog.csdn.net/yu624774720hua/article/details/6552190

版权

[DOJOchina]EXTJS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

了解Ext.Button

说明：该主键代替了传统的submit，reset，button,HTML控件
构造参数：--text：按钮上的名称
属性：-text：获得当前按钮上的名称 -minWindth：按钮的最小宽度
方法：-setText：设置按钮上的名称
事件：-click：当点击按钮是触发

button实例

Ext.Button产生的引申话题

属性： -renderTO：将当前对象所生成的HTML对象存放进指的的对象中

构造参数 -handler：指定一个函数句柄，在默认事件触发是调用，此时的默认事件为click

-listeners：这个是在对象初始化之前，就将1系列事件进行定义的手段，在进行组件化编程时，特别有用

click（handler）实例

listeners调用（推荐）：

传统调用方法（不推荐）

了解Ext.form.TextField

说明：该组件代替了传统的text组件
属性：-fieldLabel：文本框的标签名称
方法-getValue()：得到文本框的值

textfield实例

以上这个代码，无法实现textLabel的内容，原因是我们没有使用布局

由Ext.form.TextField产生的引申话题

Ext.layout.FormLayout:只有在此布局下才能正确显示文本框的标签名，布局的宿主对象必须是Ext.Container或者Ext.Container的子类
在应用FormLayout布局时只要在宿主对象的参数中指定layout:"form"即可
Ext.getCmp(String_id):的到id为_id的组件对象

布局后实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> <title>嵌套在具有FormLayout布局特性面板里的文本框</title> <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> </body> </html>

了解Ext.Panel

说明：从某种意义来讲，其彻底改变了网页界面是通过HTML Table进行布局的历史
属性：-title：面板的标签名 -width ：指定版面的宽度 -height：指定版面的高度 -frame 把4个脚变圆角，改变背景色
方法：-addButton（String/Object_config，Function_handler，Object_scope）添加一个按钮对象到面板中

panel基础实例

panel实例（2）

addButton实例：

panel居中（定位）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> <title>不顶边面板</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.contain{ width:100%; height:100%; top:0; left:0; } .center { position:absolute; top:30%; left:43%; text-align:left; }</style> <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> </body> </html>

2个textfield

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> <title>带两个文本框的面板</title> <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> </body> </html>

登陆界面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> <title>登陆程序</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.contain{ width:100%; height:100%; top:0; left:0; } .center { position:absolute; top:30%; left:43%; text-align:left; }</style> <mce:script type="text/javascript" src="../../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../../../../ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript" src="../../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> </body> </html>

以上全是Ext2.0以下版本的写法，写起来很麻烦

2.2版本的登陆界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" /> <title>登陆程序</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.contain{ width:100%; height:100%; top:0; left:0; } .center { position:absolute; top:30%; left:43%; text-align:left; }</style> <mce:script type="text/javascript" src="../../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../../../../ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript" src="../../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> </body> </html>

Mr灬羽化

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[第3讲]ExtJs基础UI设计进阶教程(1)

了解Ext.Button说明：该主键代替了传统的submit，reset，button,HTML控件构造参数：--text：按钮上的名称属性：-text：获得当前按钮上的名称 -minWindth：按钮的最小宽度方法：-setText：设置按钮上的名称事件：-click：当点击按钮是触发 button实例普通按钮<!--
复制链接

扫一扫

专栏目录