- 浏览: 1616529 次
- 性别:
- 来自: 长春
文章分类
- 全部博客 (309)
- ext (19)
- web (13)
- PHP (19)
- 互联网新闻 (3)
- oracle (3)
- Mootools (1)
- FLEX (3)
- 人在职场 (2)
- hibernate (24)
- spring2 (1)
- J2SE (24)
- WEB_UI (14)
- 其它 (11)
- Log4J (1)
- iText (10)
- SQL (11)
- 设计模式 (3)
- lucene (6)
- 开源项目 (2)
- javascript (20)
- 软件&破解补丁 (48)
- Quartz (2)
- 解决方案 (1)
- 工作存档 (2)
- JAVA对文件操作 (2)
- C&C#&VC (1)
- struts2 (3)
- 版本控制 (2)
- 软考基础 (23)
- JBPM (2)
- velocity (4)
- javamail (3)
- HttpClient (9)
- 虚拟化技术 (2)
- 报表 (3)
- ibatis (5)
- Spring (4)
- 信用卡 (0)
- 芒果钱包 (0)
- 养卡 (0)
最新评论
-
a601962168:
...
通过JAVA与串口(RS232)通信实例 -
olive009:
...
Adobe Acrobat 9 Pro & Pro Extended 中文版/英文版 下载及破解补丁 -
overshit:
api更新了,一加filter就Callback filter ...
深入浅出CGlib-打造无入侵的类代理 -
u010778233:
写得很不错,已经用起来了,谢谢
将jdbc结果集转换成对象列表 -
924060929:
我想找就是要这个功能!!!!!!!!
velocity基础教程--2自定义ResourceLoader实现字符模板
我们还是以alert为例
首先我们如果想创建一个alert 可以先去文档中查看
Ext.MessageBox包下
文档中我们可以看到一些demo
和属性 方法 事件的介绍。
这里只存在属性和方法
这就是alert方法的介绍 很详细
下面我们想要一个有警告框的alert
我们在方法中发现了一个show方法 接受的参数是配置选项(属性)
直接用样例代码
可以在属性介绍中看到描述是"The CSS class that provides the INFO icon image",来替换icon的样式 即图标样式
对于按钮的样式也可以改变"Button config that displays a single OK button "具体使用同上
对于组件来说主要有三大类:基本组件、工具栏组件、表单及元素组件
Component是顶级组件 及 其它组件是由他进行定义的 每一个组件都有一个xtype属性值,该值可以知道一个组件类型或者说是定义一个该类型的组件
我们可以看到每一个xtype代表一个组件,可以清楚的看到三大类的分割
我们来建一个panel
这里我们通过render方法进行渲染得到的。
我们也可以通过renderTo属性直接进行渲染
xtype是指定组件类型
下面我们以tabpanel为例
activeItem:0表示第几个items是活动状态
items:Mixed (数组类型)
还有一点需要注意的是items可以放数组,如果只有一个也可以直接使用对象方式 如{}或new
看到最后一个treepanel了吗 我们是采用xtype来告诉panel当前组件的类型,由于第一第二各tab是标准panel所以不用显示指明(tp items下默认如此),第三第四个则需要显示指明
如果第四个不加xtype 将按panel进行解析 由于没有html所以显示为空
为什么会是这样的呢 可以看一下Container(容器组件,所有容器组件的父类 如panel)其父类是BoxComponent(包含长宽高)
首先我们如果想创建一个alert 可以先去文档中查看
Ext.MessageBox包下
文档中我们可以看到一些demo
和属性 方法 事件的介绍。
这里只存在属性和方法
alert( String title, String msg, [Function fn], [Object scope] ) : Ext.MessageBox Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). If a c... Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). If a callback function is passed it will be called after the user clicks the button, and the id of the button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button). Parameters: title : String The title bar text msg : String The message box body text fn : Function (optional) The callback function invoked after the message box is closed scope : Object (optional) The scope of the callback function Returns: Ext.MessageBox this
这就是alert方法的介绍 很详细
下面我们想要一个有警告框的alert
我们在方法中发现了一个show方法 接受的参数是配置选项(属性)
直接用样例代码
Ext.onReady(function() { // Ext.Msg.alert("hello"); Ext.Msg.show({ title : 'Save Changes?', msg : 'You are closing a tab that has unsaved changes. Would you like to save your changes?', buttons : Ext.Msg.YESNOCANCEL, // fn: processResult, animEl : 'elId', //警告图标 icon : Ext.MessageBox.WARNING }) });
可以在属性介绍中看到描述是"The CSS class that provides the INFO icon image",来替换icon的样式 即图标样式
对于按钮的样式也可以改变"Button config that displays a single OK button "具体使用同上
对于组件来说主要有三大类:基本组件、工具栏组件、表单及元素组件
Component是顶级组件 及 其它组件是由他进行定义的 每一个组件都有一个xtype属性值,该值可以知道一个组件类型或者说是定义一个该类型的组件
xtype Class ------------- ------------------ box Ext.BoxComponent button Ext.Button colorpalette Ext.ColorPalette component Ext.Component container Ext.Container cycle Ext.CycleButton dataview Ext.DataView datepicker Ext.DatePicker editor Ext.Editor editorgrid Ext.grid.EditorGridPanel grid Ext.grid.GridPanel paging Ext.PagingToolbar panel Ext.Panel progress Ext.ProgressBar propertygrid Ext.grid.PropertyGrid slider Ext.Slider splitbutton Ext.SplitButton statusbar Ext.StatusBar tabpanel Ext.TabPanel treepanel Ext.tree.TreePanel viewport Ext.Viewport window Ext.Window Toolbar components --------------------------------------- toolbar Ext.Toolbar tbbutton Ext.Toolbar.Button tbfill Ext.Toolbar.Fill tbitem Ext.Toolbar.Item tbseparator Ext.Toolbar.Separator tbspacer Ext.Toolbar.Spacer tbsplit Ext.Toolbar.SplitButton tbtext Ext.Toolbar.TextItem Form components --------------------------------------- form Ext.FormPanel checkbox Ext.form.Checkbox combo Ext.form.ComboBox datefield Ext.form.DateField field Ext.form.Field fieldset Ext.form.FieldSet hidden Ext.form.Hidden htmleditor Ext.form.HtmlEditor label Ext.form.Label numberfield Ext.form.NumberField radio Ext.form.Radio textarea Ext.form.TextArea textfield Ext.form.TextField timefield Ext.form.TimeField trigger Ext.form.TriggerField
我们可以看到每一个xtype代表一个组件,可以清楚的看到三大类的分割
我们来建一个panel
Ext.onReady(function() { var panel = new Ext.Panel({ title:"this panel", width:200, height:300, html:"hello world" }); panel.render("hello"); });
这里我们通过render方法进行渲染得到的。
Ext.onReady(function() { var panel = new Ext.Panel({ renderTo:"hello", title:"this panel", width:200, height:300, html:"hello world" }); //panel.render("hello"); });
我们也可以通过renderTo属性直接进行渲染
xtype是指定组件类型
下面我们以tabpanel为例
var tp = new Ext.TabPanel({ renderTo:"hello", width:300, height:300, activeItem:0, items:[{ title:"this panel1", html:"hello world1" },{ title:"this panel2", html:"hello world2" },new Ext.tree.TreePanel({ title:"tree panel", loader:new Ext.tree.TreeLoader(), root:new Ext.tree.AsyncTreeNode({ text:"根节点", children:[{ text:"叶子1", leaf:true },{ text:"叶子2", leaf:true }] }) }),{ title:"tree panel2", loader:new Ext.tree.TreeLoader(), root:new Ext.tree.AsyncTreeNode({ text:"根节点", children:[{ text:"叶子1", leaf:true },{ text:"叶子2", leaf:true }] }), xtype:"treepanel" }] })
activeItem:0表示第几个items是活动状态
items:Mixed (数组类型)
还有一点需要注意的是items可以放数组,如果只有一个也可以直接使用对象方式 如{}或new
看到最后一个treepanel了吗 我们是采用xtype来告诉panel当前组件的类型,由于第一第二各tab是标准panel所以不用显示指明(tp items下默认如此),第三第四个则需要显示指明
如果第四个不加xtype 将按panel进行解析 由于没有html所以显示为空
为什么会是这样的呢 可以看一下Container(容器组件,所有容器组件的父类 如panel)其父类是BoxComponent(包含长宽高)
- ext-2.1.zip (6.2 MB)
- 下载次数: 69
发表评论
-
ExtJS 2 系列教程
2009-02-08 18:23 3260如果大家对JEE的深入研究有兴趣 可以加入Q群:4617650 ... -
[ExtJS2.1教程-7]Tree(树控件)
2009-02-08 18:10 8063树控件: 树是由根节点、叶子节点、非叶子节点(目录节点)组成的 ... -
[ExtJS2.1教程-6]Tip(提示框)
2009-02-08 09:32 8189信息提示框是指当我们把鼠标移动并停留到页面上的某一个元素上时, ... -
[ExtJS2.1教程-5]ToolBar(工具栏)
2009-02-07 09:25 9703面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具 ... -
[ExtJS2.1教程-4]Menu(菜单)
2009-02-04 21:20 9886menu.html <html> < ... -
[ExtJs 2.02]Grid默认选择首行并允许键盘操作
2009-01-23 14:39 4193grid默认选中第一行问题解决了 grid.getSelect ... -
[电子书]LearningExtJS(完整版2.01 en)
2009-01-22 11:11 2312What you will learn from this ... -
[ExtJs 2.02]ajax文件上传
2009-01-21 15:32 7183例子是网上找的,不过是php的 给转成jsp 吧中间遇到的问题 ... -
[ExtJs 2.02]Combobox的使用
2009-01-21 10:51 28211.简单使用: <!DOCTYPE HTML PUB ... -
grid设置某列背景颜色
2009-01-16 10:47 1827css .x-grid-back-red { back ... -
grid设置某行字体颜色
2009-01-16 10:34 3537css代码 .x-grid-record-red ... -
Ext2.0.2用于netbeans的JavaScript的库
2009-01-05 14:39 1675Ext2.0.2用于netbeans的JavaScript的库 ... -
Ext2.1API中文文档
2009-01-04 08:58 2519Ext2.1API中文文档 基本上Ext2系列都实用 需要Ad ... -
[ExtJS2.1教程-3]事件机制
2009-01-02 23:26 3408javascript的事件我们用的最多的就是用于表单验证 现在 ... -
[ExtJS2.1教程-1]HelloWorld
2009-01-02 14:16 2657ExtJS:一个很强大的ui库 创建一个漂亮的alert &q ... -
Ext Tree控件的使用
2008-12-21 19:35 19684树是一个我们日常用的组件,Ext给我们提供了一个非常好用的树控 ... -
ext的一些组件中常用的参数整理
2008-04-15 05:33 2516grid 中的render里的参数: value:当前单元格 ... -
Ext Docs(2.0) 本地化处理,已生成CHM文件了
2008-01-15 16:27 4296ext2 的chm文档 ajaxjs论坛上发现的 不敢独享~~ ...
相关推荐
24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77
ExtJS 2.1~3.x 调用 swfupload 制作的多附件上传组件,带进度条,列表为gridpanel
一、基础篇 1、Ext JS下载及配置 2、基本功能 2.1、Ext.MessageBox消息框 2.2、Ext.window.MessageBox 3、工具栏和菜单栏 3.1、Ext.toolbar.Toolbar工具栏 3.2、Ext.menu.Menu菜单栏 4、表单
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...
2.1 认识ExtJS的开发包 2.2 也从Helloworld开始 2.3 ExtJS中的基本概念 2.4 非常有用的开发工具 2.4.1 开发插件spket 2.4.2 FullSource 2.4.3 MicrosoftScriptDebugger 2.5 ExtJS对原有JavaScript对象的扩展 ...
……..8 2.2 ExtJS的组件………………………………………………………………………………………………………...9 2.3 组件的使用………………………………………………………………………………………………...
通过拖拽组件来创建富用户界面并连接到后端的数据源。 支持通过Sencha Touch 2来构建移动Web应用以及通过Ext JS 4来构建桌面Web应用。 其提供的代码编辑功能可以在Sencha Architect中创建整个应用。 支持模型——...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
2、ExtJs进阶篇:主要介绍ExtJs里的常用组件,容器及布局 3、ExtJs数据篇:主要介绍和数据库交互的相关组件及CRUD功能 4、项目实战篇: Extjs3.2+ASP.NET七层架构+设计模式+ log4j+WebSerice等技术国讯教育通用...
Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...