extjs
lang20150928
stay hungry stay foolish
展开
-
Ext4.2学习之实用工具类Template
<!DOCTYPE html><html><head> <title>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/&原创 2021-03-24 10:53:35 · 52 阅读 · 0 评论 -
Ext4.2学习之实用工具类
通过Ext.each函数遍历数组通过DomHelper动态生成HTML,比如append、insertBefore、insertAfter、overwrite等<!DOCTYPE html><html><head> <title>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>原创 2021-03-23 21:08:56 · 90 阅读 · 0 评论 -
Ext4.2学习之Ajax请求中的scope和bind
在使用Ext时,最常碰到的问题就是使用Ajax回调函数时出现的问题。比如有如下的代码<input type="text" name="text" id="text"><input type="button" name="button" id="button" value="button">现在的html页面中有一个text输入框和一个按钮,我们希望在按下这个按钮之后,通过Ajax去后台读取数据,然后把后台响应的数据放到text中。实现的过程代码如下所示function do原创 2021-03-23 15:57:38 · 165 阅读 · 0 评论 -
Ext4.2学习之Store数据存储
<!DOCTYPE html><html><head> <title>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/&原创 2021-03-23 15:05:34 · 155 阅读 · 0 评论 -
Ext4.2学习之状态栏
状态条的实现比较简单 先创建一个Panel 然后将状态栏放到对应的bbar位置状态栏比工具条多了几个参数:text、iconCls参数:分别为工具条初始化后显示的文字和图标defaultText、defaultIconCls:工具条在第一次页面渲染时,首先显示的是text、iconCls。在用setStatus函数修改了状态栏的状态信息一段时间后,会自动清空状态信息,这时显示的就是defaultText、defaultIconCls。在上面的状态栏当中我们加入了三个按钮点击ok按钮的时候会修原创 2021-03-23 10:58:04 · 100 阅读 · 0 评论 -
Ext4.2学习之布局
首先看一下结果图首先一个完整的布局一般都是以Ext.Viewport对象包裹的,因为这个图像可以自动适应不同浏览器大小。在这里使用了layout: 'border'布局方式,所以分为了东南西北中四个板块。也就是所谓的上下左右和中间,在这里上面是一个标题栏。而下面就是一个状态栏。而左侧放的是一个TreePanel,通过读取文本中的数据构造了一棵树(需要指定叶子节点)[ {text:'01',children:[ {text:'01-01',leaf:true},原创 2021-03-22 21:09:39 · 118 阅读 · 0 评论 -
Ext4.2学习之工具条和菜单
工具类在ext中通过Ext.Toolbar创建。在没有特别指定的情况下,工具条的元素类型为按钮,比如如下的代码会往工具条上添加几个按钮。如果是添加文本,就直接在add函数中传递字符串即可,最后调用doLayout显示出来。如下图所示,这里通过一个->将文本部分右对齐了如果是要往工具条中添加下拉菜单,则必须包含有text和menu元素,其中menu对应为Ext.menu.Menu类型的对象,比如创建一个menu对象将menu绑定到工具条上面结果如下图所示添加一个日期选择框添原创 2021-03-22 20:55:39 · 139 阅读 · 0 评论 -
Ext4.2学习之表格和树形的结合
在ext中可以通过扩展使用treecolumn插件的方式实现表格与树形结合的效果。加载的11-01.txt数据如下[{ task:'EXT程序开发', duration:'12个月', user:'', cls:'master-task', iconCls:'task-folder', children:[{ task:'第一章介绍EXT', duration:'1个月', user:'Lingo',原创 2021-03-20 18:52:23 · 182 阅读 · 0 评论 -
Ext4.2学习之树的事件和右键菜单
通过Ext.tree.TreePanel创建一棵Ext的树,并渲染到id为tree的div上面在这里读取了txt文件中的数据,内容如下所示[ {text:'not leaf'}, {text:'is leaf',leaf:true}]可以为这棵树绑定节点展开、节点折叠以及单击事件除此之外,还可以为这棵树绑定一个右键菜单效果如下所示完整源码如下<!DOCTYPE html><html><head> &原创 2021-03-20 15:53:06 · 105 阅读 · 0 评论 -
Ext4.2学习之表格布局
fieldSet布局column平行分列布局默认的平铺布局对应源码<!DOCTYPE html><html><head> <title>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link type="text/css" rel="styleshee原创 2021-03-20 12:42:03 · 144 阅读 · 0 评论 -
Ext4.2学习之Slider滑动条表单控件
顾名思义,滑动条表单控件就是可以将滑动条作为一个表单控件放在表单面板中进行布局,实现表单数据的修改、读取与提交功能。如果在一个滑动条上指定多个滑块,使用values属性即可最后通过getValues函数获取滑动条的数值,返回的结果是一个字符串,如果是多个滑块,那么返回的数值以逗号进行分割。对应源码如下<!DOCTYPE html><html><head> <title>Hello World</title>原创 2021-03-20 12:01:45 · 355 阅读 · 0 评论 -
Ext4.2学习之复选框与单选按钮复杂控件
通过CheckboxGroup和RadioGroup控件可以实现复选框和单选框复杂的排列方式了。比如默认的横向排列方式xtype: 'checkboxgroup',fieldLabel: '自动布局',items: [ {boxLabel: 'Item 1', name: 'cb-auto-1'}, {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true}, {boxLabel: 'Item 3', name: 'cb-au原创 2021-03-20 11:42:10 · 156 阅读 · 0 评论 -
Ext4.2学习之复选框与单选按钮
要在表单里加入复选框,就需要用到Ext.form.CheckBox。注意需要使用inputValue来指定这三个CheckBox的值。另外还可以通过checked: true指定是否在一开始就处于选定状态。结果如下至于单选按钮是继承复选框的,只需要一个改动即可,就是将items中的name设置为一致就可以了。因为名称是一样的,所以inputValue就显得尤为重要了。否则我们无法判断用户选择了哪个单选按钮。除了Checkbox所拥有的功能之外,Radio还有一个自己独特的函数getGroupV原创 2021-03-20 11:19:00 · 403 阅读 · 0 评论 -
Ext4.2学习之GridPanel行编辑功能
首先定义一个Ext.grid.plugin.RowEditing类型的编辑器然后在表格的plugins属性当中添加即可。结果如下所示对应源代码<!DOCTYPE html><html><head> <title>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <原创 2021-03-19 14:16:46 · 304 阅读 · 0 评论 -
Ext4.2学习之TreeGrid树形表格
树形表格(TreeGrid)同时具备树形的分级结构和表格的丰富内容。通过创建一个TreeGrid对象就可以了。但是需要注意在数据当中包含两个重要的属性:children和expanded,前者实现上下级关系,而后者指定默认是否展开。结果如下完整源码<!DOCTYPE html><html><head> <title>Hello World</title> <meta http-equiv="Content-Ty原创 2021-03-19 13:41:14 · 447 阅读 · 0 评论 -
Ext4.2学习之GridPanel(分组表格视图)
在store当中添加groupField: 'sex'指定针对sex进行分组,单纯上面的配置并不能起作用,还必须在GridPanel中设置features: [{ftype:'grouping'}].另外可以通过grid.view.features[0]获取分组表格feature的实例,然后调用其功能函数expandAll或collapseAll进行展开和折叠操作。效果如下完整源码示例<!DOCTYPE html><html><head> <原创 2021-03-19 11:13:58 · 243 阅读 · 0 评论 -
Ext4.2学习之GridPanel
<!DOCTYPE html><html><head> <title>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/&原创 2021-03-18 15:14:33 · 94 阅读 · 0 评论