Ext学习
文章平均质量分 50
dengyulong
我是一个很真诚,踏实的人,也喜欢多交朋友.......................................................................................................................................................................
展开
-
Ext学习_FormPanel布局3
{ //行3 layout: "form", style: "text-align: left", items: [ { xtype: "textfield", fieldLabel: "奖励", width: 567 },{ xtype: "textfield", ...原创 2011-08-01 10:15:06 · 76 阅读 · 0 评论 -
Ext学习是9_面板3
/** * 在标题栏的右侧,还可以放置一些小图标,如果设置了collapsible属性,我们可以看到一个向上的箭头 * 事实上可以放置更多的按妞,这写按钮通常是一个小图标,没有文字,在Ext.Panel中通过tools来定义。 * tools中的按钮都已经定义,通过id来区别,比如id为refresh时,表示这是刷新按钮,但是没有定义单击事件 * ,具体的响应过程还需通过handl...原创 2011-07-11 11:36:51 · 88 阅读 · 0 评论 -
Ext学习是9_面板2
/** * 在buttons属性中,定义一个数组,数组中的元素是json对象,即json对象数组,通常情况下代表一个按钮,text是 * 按钮上的文字,handler是单击按钮时触发的函数,不过,除了按钮之外还可以是其它类型的元素, * 如:tbseparator(简写为"-"),tbspacer(简写为" ")、tbfill(简写为"->")、tbsplit(带菜单的按钮)等...原创 2011-07-11 11:36:07 · 64 阅读 · 0 评论 -
Ext学习是9_面板1
Ext.namespace("com.deng");/** * Ext.Panel * TreePanel、TabPanel、FormPanel、GridPanel、EditGridPanel等,都是Panel的子类 * 确切的说面板更应该是一个容器,在面板中放在任何组件和文字,而面板本身也可以放到其它面板中 * * 一个完整的Panel包括标题栏、顶部工具栏、底部工具栏...原创 2011-07-11 11:34:41 · 62 阅读 · 0 评论 -
Ext学习是8_ComboBox3和分2
后台代码: @RequestMapping(value="/queryComboPage") public void testComboPage(HttpServletRequest request, HttpServletResponse response) { response.setContentType("text/html;charset=utf-8");...原创 2011-07-08 11:05:47 · 62 阅读 · 0 评论 -
Ext学习之7_下拉列表框
Ext.namespace("com.deng");Ext.onReady(function(){ var cities = [ [1,"长沙市"],[2,"株洲市"],[3,"湘潭市"],[4,"邵阳市"] ]; var proxy = new Ext.data.MemoryProxy(cities); var cit...原创 2011-06-28 17:03:14 · 93 阅读 · 0 评论 -
Ext学习之6_组件5_Data3
* * Ext.data.Store类 * 这个类相对简单,不需要面对数据和结构,只是把DataProxy和DataReader整合在一起 * 数据有了,结构有了,其实就相当于一张表,列由Record定义,并被DataReader重新封装 * 数据由DataProxy定义,这样就构成了一张表Store * 典型的写法是这样: * var store = new...原创 2011-06-23 10:47:37 · 74 阅读 · 0 评论 -
Ext学习之6_组件5_Data2
Ext.namespace("com.deng");/** * Ext.data.DataReader类 * DataReader类从来不单独行动,总是看DataProxy行事,DataReader用来定义数据项(行)的逻辑结构,主要 * 信息有:列的逻辑名称(name),列的数据类型(type)、列与数据源的索引映射(mapping)等,另外,还包含一些 * 元数据,如分页信...原创 2011-06-23 10:46:57 · 74 阅读 · 0 评论 -
Ext学习之6_组件5_Data
Ext.namespace(com.deng);/** * Ext.data最主要的功能是获取和组织数据结构,并和特定的控件联系起来,于是 * Ext.data成了数据的来源,控件负责显示数据,在该命名空间中,需要理解; * DataProxy、DataReader和Store * DataProxy:获取想要的数据,通过他能得到来自不通地方的数据,如数值、远程服务器,并组织成...原创 2011-06-22 17:42:21 · 78 阅读 · 0 评论 -
Ext学习之6_组件_DatePicker
Ext.namespace("com.deng");/** * 日期选择器Ext.DatePicker */Ext.onReady(function(){ var dp = new Ext.DatePicker({ renderTo: Ext.getBody(), minDate: Date.parseDate("2009-01-01","Y-m-d"), ...原创 2011-06-22 16:25:30 · 170 阅读 · 0 评论 -
Ext学习之6_组件_Button
Ext.namespace("com.deng");/** * 按钮 * 按钮控件使用Ext.Button来表示,有三种类型:提交(submit)、重置(reset)和普通按钮(button) *//** * 按照OOP的习惯,我们会这样定义 *//**Ext.onReady(function(){ var btn = new Ext.Button();...原创 2011-06-22 15:56:23 · 102 阅读 · 0 评论 -
Ext学习之6_组件4
* 第三节段:销毁 * 1、触发beforedestory事件 * 这是一个可以取消的事件,如果需要,可能通过提供事件代理来阻止组件被销毁 * 2、调用beforeDestory方法 * 又一个模板方法,在子类中可以重新实现和调用父类的方法 * 3、移除事件监听者(代理) * 如果组件已被呈现,则移除它底层的HTML元素的事件监听列表,然后将元素从DOM中...原创 2011-06-22 12:09:14 · 77 阅读 · 0 评论 -
Ext学习之6_组件3
* 第二个阶段:呈现 * 1、触发beforerender事件 * 这是一个可取消的事件,如果需要给提供处理函数来阻止组件的继续呈现输出。 * 2、设置容器 * 如果没有父类容器被指定,默认它的父对象被指定为它的容器 * 3、调用onRender方法 * 这是为子类执行呈现工作的一个非常重要的方法,这是一个模板方法,在子类中可以根据需要重写它的实现逻辑...原创 2011-06-22 12:08:31 · 78 阅读 · 0 评论 -
Ext学习之6_组件2
/** * 组件的生命周期: * 第一个节段:初始化 * 1.应用选项配置 * 从Component继承下来的类并不需要提供一个独立的构造器,Component的构造器不仅应用从子类传过来的配置选项,同时它还做了一下工作 * 2、创建事件 * 任何组件都有enabled,disable,beforeshow,show,beforehide、hide、bdforere...原创 2011-06-22 12:06:55 · 95 阅读 · 0 评论 -
Ext学习_Window窗口1
Ext.namespace("com.deng");/** * Panel的子类-Window窗口 * Window是Panel的子类,Ext.Window = Ext.extend(Ext.Panel,{}),从源代码可以看出 * Window继承自Panel,意味着Window具体Panel的所有特征,并且具有自己的个性 * 从外观上来看Window对象更像Window操作...原创 2011-07-13 09:45:29 · 122 阅读 · 0 评论 -
Ext学习_Window窗口2
*//** * 3.使用items属性往Window中添加组件 */Ext.onReady(function(){ new Ext.Window({ title: "窗口3", width: 400, height: 300, bodyStyle: "padding: 5px", items:[ new Ext.Butt...原创 2011-07-13 09:46:12 · 95 阅读 · 0 评论 -
Ext学习_Window窗口3
Ext.namespace("com.deng");/** * 实现Window的最小化功能 * Window没有实现最小化功能,程序员可以根据客户和业务需求设计更加实用的最小化效果 * 实现: * 在工具栏上有一个固定不变的按钮,用来创建新窗口,新创建的窗口从该按钮飞出,窗口创建后 * 在工具栏上动态生成一个对应的按钮 */Ext.onReady(func...原创 2011-07-14 11:51:50 · 119 阅读 · 0 评论 -
Ext学习_FormPanel布局2
Ext.onReady(function(){ var form = new Ext.form.FormPanel({ title: "灵活布局的表单", width: 650, autoHeight: true, frame: true, renderTo: "a", layout: "form", //整个大的表单是form布局 labelWidt...原创 2011-08-01 10:14:35 · 87 阅读 · 0 评论 -
Ext学习_FormPanel布局1
Ext.namespace("com.deng");/** * FormPanel布局与初始化 * FormPanel有两种布局:form和column,form是纵向布局,column为横向布局。默认为后者 * 使用layout属性定义布局类型。对于一个负责的布局表单,最重要的是正确分隔,分隔结果 * 直接决定布局能否顺利实现。 * * 如果不再使用默认布局,那么我...原创 2011-08-01 10:12:01 · 84 阅读 · 0 评论 -
悬停提示与验证4
/** * vtype验证 * vtype验证是一种预先定义好的验证,可用于验证邮箱,网址,字符与下划线,字符数字与下划线 * vtype验证由Ext.form.Vtypes定义,其实也是对正则表达式的封装 * vtype定义在Ext.form.TextField类中,如果组件不是Ext.form.TextField的子类,则不接受vtype验证 *//** * 邮...原创 2011-07-27 15:47:00 · 109 阅读 · 0 评论 -
悬停提示与验证3
/** * 三 表单组件验证 * 表单组件自身有验证功能,一旦出错就会给出提示,并且表单被阻止提交,如果自带的验证功能无法满足您的要求 * ,还支持正则表达式 * Ext.form.Field定义了几个属性用于配置是否启用验证功能:validationEvent指定什么事件触发时进行验证,默认 * 为keyup,如果将该属性设为false,即使有键盘输入也不再验证,valida...原创 2011-07-27 15:46:17 · 83 阅读 · 0 评论 -
悬停提示与验证2
/** * 有时候,悬停提示信息过长,我们愿意换行显示,对于qtip类型来说,在提示信息中使用 * <br>标签可以做到,如果是title类型,使用\r\n即可 * qtip的提示是用div来实现的,我们可以修改它所生成的样式来实现想要的结果 *//** * HTML标记 * 如果要为HTML标记定义悬停提示,有更多的方式可以选择。但是和Extjs组件相...原创 2011-07-27 15:45:02 · 115 阅读 · 0 评论 -
悬停提示与验证1
Ext.namespace("com.deng");/** * 悬停提示与验证 * 表单数据一般都会先通过客户端验证,如果数据无效,可以防止提交,这样能减少客户端与服务器的交互,降低 * 宽带流量,增强用户体验.Extjs默认采用悬停提示来告知用户。 * Extjs支持五种悬停提示,分别为qtip、side、under、title和around,其中qtip是默认的支持方式...原创 2011-07-27 15:42:55 · 93 阅读 · 0 评论 -
Ext学习_表单组件6
var f = new Ext.form.FormPanel({ url: "../../../service/deng/test/testFormPanel", method: "post", renderTo: "b", title: "新增员工",/**间距*/ style: "padding: 10px", frame: tr...原创 2011-07-19 12:03:52 · 86 阅读 · 0 评论 -
Ext学习_表单组件5
//最高学历 //准备数据 var data = [ [1,"博士"], [2,"硕士"], [3,"研究生"], [4,"本科"], [5,"专科"], [6,"高中"], [7,"文盲"] ]; var proxy = new Ext.data.MemoryProx原创 2011-07-19 12:03:04 · 81 阅读 · 0 评论 -
Ext学习_表单组件4
Ext.namespace("com.deng");/** * 表单组件的综合例子 * 演示添加员工 */Ext.onReady(function(){ var txtName = new Ext.form.TextField({ name: "txtName", fieldLabel: "姓名", width: 200 }); ...原创 2011-07-19 12:01:44 · 90 阅读 · 0 评论 -
Ext学习_表单组件3
/** * 文本区 */var areaAddress = new Ext.form.TextArea({ name: "areaAddress", fieldLabel: "家庭住址", width: 500, height: 50});/** * 时间点选择器 * Ext.form.TimeField是一个特殊的ComboBox,方便用户选择某个...原创 2011-07-18 15:47:36 · 89 阅读 · 0 评论 -
Ext学习_表单组件2
/** * 和文本框不同,选择框有两个值:实际值和显示值,显示值通过boxLabel指定,而实际值由inputValue指定,inputValue * 的值将传至服务器,默认选择设至checked为true * RadioGroup将Radio分组,RadioGroup仅仅将单选按钮从逻辑上绑定到一起,并且提供一个提示信息,另外,该类的 * width选项很有用,可以适当调整所占的...原创 2011-07-18 15:47:06 · 75 阅读 · 0 评论 -
Ext学习_表单组件1
Ext.namespace("com.deng");/** * 表单组件 * Ext.form.TextField不只是用于输入文本,还能接受密码以及文件域,由inputType选项来决定,该选项有三个值; * text、password和file,默认是text * 下面列出了Extjs所有的表单组件 * xtype class ...原创 2011-07-18 15:45:57 · 96 阅读 · 0 评论 -
Ext学习_FormPanel1
Ext.namespace("com.deng");/** * Ext.form.FormPanel继承自Ext.Panel,具备面板的特征,但在布局上有他自己的优势。 * 总体来说,FormPanel为表单提供了一个完整的界面,但不包含表单的操作,如提交,重置等 * 这些操作由Ext.form.BasicForm类来完成 * Ext.form.FormPanel和Ext.fo...原创 2011-07-18 10:49:55 · 62 阅读 · 0 评论 -
Ext学习之6_组件
Ext.namespace("com.deng");/** * 组件分类: * 大体来讲,组件有三种类型:基本组件,工具栏组件,表单组件 * 具体见Ext帮助文档Component类 * * 基本组件 * xtype 类 Class 说明------------- ---------------...原创 2011-06-22 09:57:54 · 79 阅读 · 0 评论 -
Ext学习之5_XTemplate2
Ext.namespace("com.deng");/** * XTemplate用于定义一个模板,并将值提供给{}占位符,XTemplate也能和Ext.util.Format配合,将填充 * 的值进行格式化,得到用户想要的任何效果 * 基本格式:{index|name:method(params)} * index: 索引 * name: json对象的属性名 * ...原创 2011-06-21 16:02:04 · 75 阅读 · 0 评论 -
ext_GridPanel2_4
/** * grid.getView().getRows().length 可以获取总行数,和Ext.grid.RowSelectionModel的getCount()方法不同,后者返回的是选择的总行数,而前者 * 是表格中的所有行。 * * 我们常常希望在每一行添加复选框,通过复选框来选择行,这样就不需要按ctrl或shift键实现多选了,使用鼠标 * 就能直接操作。项目中...原创 2011-08-26 16:27:50 · 148 阅读 · 0 评论 -
ext_GridPanel2_3
//Proxy var proxy = new Ext.data.MemoryProxy(data); //Record 定义记录结果 var Human = Ext.data.Record.create([ {name: "Name", type: "string", mapping: "name"}, {name: "Sex", type: "strin...原创 2011-08-26 16:25:16 · 80 阅读 · 0 评论 -
ext_GridPanel2_2
* selectRows(rows, keepExisting): 选择数组rows中指定的行(索引),参数keepExisting为true保留原先选择的行,为false则清除原来选择的行 * selectRange(startRow, endRow, keepExisting): 选择从startRow开始到endRow结束的行,参数keepExisting为true保留原先选择的行...原创 2011-08-26 16:21:05 · 60 阅读 · 0 评论 -
ext_GridPanel2_1
Ext.namespace("com.deng");/** * 行模型与Grid视图 * * 行选择模型 * 行选择模型提供对数据行的选择操作,默认情况下,GridPanel使用Ext.grid.RowSelectionModel做为行选择模型, * 该选择模型在不经任何设置的情况下即支持多项。对于选择的行,我们可以通过与其他兄弟的配合访问、操作甚至修改数据...原创 2011-08-26 16:18:21 · 74 阅读 · 0 评论 -
ext_GridPanel1_4
//Record 定义记录结果 var Human = Ext.data.Record.create([ {name: "Name", type: "string", mapping: "name"}, {name: "Sex", type: "string", mapping: "sex"}, {name: "Birthday",原创 2011-08-25 18:01:08 · 69 阅读 · 0 评论 -
ext_GridPanel1_3
Ext.onReady(function(){ //列模型 var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {header: "姓名", width: 80, dataIndex: "Name", tooltip: "这是您的姓名"}, { header: "性别", ...原创 2011-08-25 17:59:40 · 93 阅读 · 0 评论 -
ext_GridPanel1_2
//列模型 var cm = new Ext.grid.ColumnModel([ {header: "姓名", width: 80, dataIndex: "Name", tooltip: "这是您的姓名"}, {header: "性别", width: 40, dataIndex: "Sex", align: "center"}, {header: &q原创 2011-08-25 17:57:14 · 83 阅读 · 0 评论 -
ext_GridPanel1_1
Ext.namespace("com.deng");/** * 表格相关的组件很多,大多定义在Ext.grid命名空间中,GridPanel就是其中一个,当然在该命名空间中 * 还有许多周边的组件和类,而且采取分层结构构建,各层职责非常清晰,GridPanel可以说是众星捧月,为了 * 让他更好的工作,很多人在背后默默的付出,下面的类都是他的支持者: * Ext.grid.Co...原创 2011-08-25 11:08:14 · 78 阅读 · 0 评论