- 浏览: 352719 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
hc1031473635:
非常感谢楼主哈,调试了一些bug,正常运行了,初入java 学 ...
ExtJS 2.2,图书管理系统 共享全部源码下载 -
f43310:
不错,向大神学习了
ExtJS 核心的抽奖程序(共享源代码) -
jinbily:
下载 中文文件名的文件会出错啊。。。
ExtJS 2.2 开源网络硬盘系统(吐血奉献) -
ylc2010:
楼主问你个问题,饼状图的标题你设置在setting的label ...
amCharts导出图片JAVA实现 -
kfcman:
.大牛。多谢分享。
ExtJS 2.2,图书管理系统 共享全部源码下载
Ext.fly(grid.getView().getRow(0)).slideIn('t'); //选择第一条有从上往下的插入效果 Ext.fly(grid.getView().getRow(0)).frame('#cadaf9',3);//选择一条记录带蓝色光晕效果 enableKeyEvents:true //激活键盘事件 ,TextField 的键盘事件默认是关闭的 cmp.el.mask('正在发送...', 'x-mask-loading'); //给组件上遮罩 cmp.el.unmask(); //隐藏遮罩 this.previousSibling();//当前组件的前一个组件(同一个容器) this.nextSibling(); //当前组件的后一个组件(同一个容器) //给组件增加快捷键(CTRL + 回车) { xtype: 'textarea', listeners: { 'render': function (input) { new Ext.KeyMap(input.getEl(), [{ key: 13, ctrl: true, fn: function () {}, scope: this }]); } } }
//在分页组件前面添加组件 var page = new Ext.PagingToolbar({ store: store, displayInfo: true, pageSize: 10 }); page.insert(0, '-'); page.insert(0, { //添加一个日期组件 xtype: 'datefield', name: 'chatdate', format: 'Y-m-d', value: new Date() });
效果如图如下
//XTemplate的使用示例(读取store加载的数据来渲染) {"root":[{"date":"2009-09-07T15:52:45","sender":"廖瀚卿","text":"你好asdf"},{"date":"2009-09-07T15:52:51","sender":"asdf","text":"你好廖瀚卿"},{"date":"2009-09-07T15:52:59","sender":"asdf","text":"我这个是测试的,你那里能看到吗?"},{"date":"2009-09-07T15:53:09","sender":"廖瀚卿","text":"能看到,很不错哦:)"},{"date":"2009-09-07T15:53:23","sender":"asdf","text":"鸭版斑斑啦"},{"date":"2009-09-07T15:53:31","sender":"廖瀚卿","text":"呵呵,你真搞笑"},{"date":"2009-09-07T15:53:45","sender":"廖瀚卿","text":"对了。你好吗?\n"},{"date":"2009-09-07T15:53:52","sender":"asdf","text":"我很好,真的:)"},{"date":"2009-09-07T15:54:00","sender":"asdf","text":"你好不好,告诉我啊"},{"date":"2009-09-07T15:54:06","sender":"廖瀚卿","text":"我也很好:0"}],"success":true,"totalProperty":10} //以上是store加载时火狐检测的json字符串,我们可以监听store的load事件来做XTemplate的渲染 var tpl = new Ext.XTemplate( '<tpl for=".">', '<font color="{[xindex % 2 === 0 ? "green" : "red"]}"><p>{data:this.parseSender()}: {data:this.parseDate} </p></font>', '<p style="padding:1 1 10 5">{data:this.parseText}</p>', '</tpl></p>', { compiled: true, parseSender: function (json) { return json.sender; }, parseDate: function (json) { return Ext.util.Format.date(json.date, 'Y-m-d H:i:s'); }, parseText: function (json) { return json.text } } ); var store = new Ext.data.Store({ url: 'findChatHistory.action', reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, ['mid', 'id', 'sender', 'text', { name: 'date', dateFormat: "Y-m-dTH:i:s", //struts2的json-plugin处理日期默认格式化为这种方式,要想在extjs中正确处理日期格式,这里很重 type: 'date' }]), listeners: { 'load': function (sd, records, options) { /*console.log(records);//其实records是一个对象数组,输出内容和格式如下,从格式可以得知真正的数据在data=Object里面 [Object phantom=true id=ext-record-26 data=Object, Object phantom=true id=ext-record-27 data=Object, Object phantom=true id=ext-record-28 data=Object, Object phantom=true id=ext-record-29 data=Object, Object phantom=true id=ext-record-30 data=Object, Object phantom=true id=ext-record-31 data=Object, Object phantom=true id=ext-record-32 data=Object, Object phantom=true id=ext-record-33 data=Object, Object phantom=true id=ext-record-34 data=Object, Object phantom=true id=ext-record-35 data=Object]*/ tpl.overwrite(Ext.fly('history'), records); //records为服务器返回的所有记录 } } });
//变换元素大小以及动画的特效 function scaleElement(id) { var el = Ext.get(id); el.scale(el.getWidth() /1.2,el.getHeight() /1.2,{ easing: 'backBoth',//膨胀效果(先变大,再变得小于目标尺寸,最后恢复目标尺寸) // easing: 'backIn',//膨胀效果(先变得大于目标尺寸,最后恢复目标尺寸) // easing: 'backOut',//膨胀效果(先变得小于目标尺寸,最后恢复目标尺寸) // easing: 'bounceBoth',//来回大小振动后恢复目标尺寸 // easing: 'bounceIn',//来回大小振动后恢复目标尺寸(变大动作幅度大一点) // easing: 'bounceOut',//来回大小振动后恢复目标尺寸(变小动作幅度大一点) // easing: 'easeBoth',//就是尺寸变了.没感觉出来特别的 // easing: 'easeIn',//就是尺寸变了.没感觉出来特别的 // easing: 'easeInStrong',//就是尺寸变了.没感觉出来特别的 // easing: 'easeOut',//就是尺寸变了.没感觉出来特别的 // easing: 'easeBothStrong',//就是尺寸变了.没感觉出来特别的 // easing: 'easeNone',//轻轻的就缩小了 // easing: 'elasticBoth',//感觉很有动力 // easing: 'elasticIn',//感觉很有动力 // easing: 'elasticOut',//感觉很有动力 duration: .35 }); }
//2009-10-9 23:57:18 //对象属性写法记忆,下面是分页组件里面的一个私有方法 // private doLoad : function(start){ var o = {}, pn = this.getParams(); o[pn.start] = start; o[pn.limit] = this.pageSize; if(this.fireEvent('beforechange', this, o) !== false){ this.store.load({params:o}); } } //其中 o[pn.start] 等同于 o.start,也就是说o[pn.start]等同于o['start'] //o['page.params.manager'] 这种写法是有效的,而o.page.params.manager却不一定正确
// 2009-10-17 0:10:20 //回调函数应用 //extjs给我们提供的方法都很人性化,有很多方法都有回调函数,但是有些方法却没有,我们可以自己定义我们的回调函数 var data = { name: 'Jack Slocum', title: 'Lead Developer', company: 'Ext JS, LLC', email: 'jack@extjs.com', address: '4 Red Bulls Drive', city: 'Cleveland', state: 'Ohio', zip: '44102', drinks: ['Red Bull', 'Coffee', 'Water'], kids: [{ name: 'Sara Grace', age:3 },{ name: 'Zachary', age:2 },{ name: 'John James', age:0 }] }; var tpl = new Ext.XTemplate( '<p>Name: {name}</p>', '<p>Title: {title}</p>', '<p>Company: {company}</p>', '<p>Kids: ', '<tpl for="kids">', '<p>{name}</p>', '</tpl></p>' ); tpl.overwrite(panel.body, data); // overwrite方法没有给我们提供回调函数 //自定义处理方法 function myFunction(tpl,el,data,callback){ tpl.overwrite(el,data); callback(); //调用回调函数 } //执行我们自定义的方法 myFunction(tpl,panel.body,functioin(){ alert('哈哈我执行完了,我是回调函数'); }); //延迟执行自定义回调函数 myFunction(tpl,panel.body,(function(){ alert('哈哈我延迟2秒后执行的回调函数'); }).defer(2000); ); //ibatis笔记 #remark:VARCHAR# remark必须是数据库中的字段才能用:VARCHAR来表示类型
//表单里面显示图片 2009-11-10 11:01:04 { xtype: 'box', anchor: '', isFormField: true, fieldLabel: 'Image', autoEl: { tag: 'div', children: [{ tag: 'img', qtip: 'You can also have a tooltip on the image', src: 'http://extjs.com/deploy/dev/examples/shared/screens/desktop.gif' }, { tag: 'div', style: 'margin:0 0 4px 0', html: 'Image Caption' }] } }
//GridPanel 行编辑器(combo)显示问题 2009-11-10 13:13:33 //GridPanel/EditorGridPanel中下拉框显示的问题,从后台取值或者前台选择下拉值以后不显示我们制定的DisplayField的value而现实了ValueField的value,做如下处理即可解决 var index = store.indexOf(grid.getSelectionModel().getSelected()); var columns = grid.getColumnModel().getColumnsBy(function(c){ return c.dataIndex == 'vbid'; //ValueField 获得下拉框的列 }); var _editor = columns[0].getCellEditor(index); //获得下拉框 var valueFieldValue = _editor.field.getValue(); //获得id值 var displayFieldValue = _editor.field.getRawValue(); //获得显示值 //这样我们就可以在编辑行或者添加行的时候向后台同事传递两个value //而解决前天总显示id的问题只要写个renderer就可以了 renderer:function(value, cellmeta, record){ return record.data.brandName;//在有下拉选择框的地方显示DisplayField的value }
//树节点(TreeNode)图标动态修改 2009-11-22 15:36:52 var ui = node.getUI(); ui.removeClass('x-tree-node-leaf'); //去掉之前的根节点样式 ui.addClass('x-tree-node-expanded'); //设定已展开文件夹样式 //ui.addClass('x-tree-node-collapsed');//设定合并的文件夹样式
2010年6月27日22:25:06
又爱又恨的 Ext.form.ComboBox 之 id,hiddenId,name,hiddenName正确用法.
{ fieldLabel: '材质', //标签名 xtype: 'combo', valueField: 'stuffid', //对应store中的field displayField: 'stuffName', //对应store中的field,就是说下拉列表中显示store中这个字段的值 queryParam: 'stuff.stuffName', //自动完成功能传到后台的查询条件名字 typeAhead: true, triggerAction: 'all', minChars: 1, //自动完成功能一个字符就开始出发查询动作 listWidth: 250, //下拉列表的宽度 allowBlank: false, //不能为空 selectOnFocus: true, //获得焦点就下拉 pageSize: 10, //下拉列表分页 id: 'materials.stuffName', //当前下拉框的id name: 'materials.stuffName', //当前下拉框的name hiddenId: 'materials.stuffid', //隐藏域的id hiddenName: 'materials.stuffid', //隐藏域的name submitValue:true, //当前下拉框中显示的文本是否提交 value: materials.stuffName, /当前表单存储的是名字 hiddenValue:materials.stuffid,//隐藏域存储的是id ref: '../../../../comboStuff', //方便他父容器引用 store: { xtype: 'store', url: 'findStuffList.action', paramNames: { start: 'page.start', limit: 'page.limit' }, baseParams: { 'page.start': 0, 'page.limit': 10 }, reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }, [{ name: 'stuffid' //对应valueField }, { name: 'stuffName' //对应displayField }]) } }
以上代码会在表单中生成如下html代码
<div class="x-form-field-wrap x-form-field-trigger-wrap " id="ext-gen134" style="width: 162px;"> <input type="hidden" id="materials.stuffid" name="materials.stuffid" value="1"><!-- 对应hiddenId,hiddenName存储valueField的值--> <input type="text" id="materials.stuffName" autocomplete="off" size="24" class=" x-form-text x-form-field " style="width: 145px;" title=""><!-- 对应ni,name存储displayField的值 --> <img class="x-form-trigger x-form-arrow-trigger" src="../resources/images/default/s.gif" id="ext-gen135"> </div>
发表评论
-
ExtJS 3.2 聊天室程序(类Q_Q群)
2010-06-02 02:45 8016模仿QQ实现的群聊功能,基本类似聊天室.聊天记录每5条保存到数 ... -
EXTJS 3.0 网狗盘之上传组件[开源]
2009-12-16 00:57 19226自从EXTJS3.0发布后,很多同学后网友都要求我共享基于EX ... -
EXTJS3.0 火狐小字体补丁css文件
2009-12-03 20:29 3752很多朋友觉得extjs的字体在ie浏览器中显示要好看些,认为在 ... -
TreeLoader扩展,支持josn-plugin返回的json对象中包含的数组值
2009-09-26 10:25 3618Struts2的josn插件 josn-plugin 对我们开 ... -
ExtJS 3.0 图片浏览程序[开源]
2009-09-25 23:03 7463好久没有写点东西了. 最近有个好玩的, 我用extjs实现了一 ... -
ExtJS 2.2 开源网络硬盘系统(吐血奉献)
2009-03-23 02:12 36394这个是我的一个开源项目: 技术架构:Struts2(json- ... -
解决ExtJS在火狐浏览器中汉字显示为小字体的样式补丁
2009-03-09 00:01 5475在火狐浏览器中运行ExtJS程序时,中文字体比在IE下运行要小 ... -
ExtJS 核心的抽奖程序(共享源代码)
2009-02-11 20:21 10155最近公司举行15周年司庆晚会,公司首改以往丑旧的抽奖模式。领导 ... -
从国外网站上抠出来的 三款 ExtJS主题(红色,橙色,红间灰)
2008-12-25 20:51 14879最近在国外ExtJS网站上看到有三款ExtJS主题,挖下来收藏 ... -
ExtJS 2.2,图书管理系统 共享全部源码下载
2008-10-14 20:32 50836系统架构:struts2(json-plugin) + spr ... -
EXT EditorGridPanel 中用复选框表示真假值,扩展官方示例
2008-09-22 20:42 10794在学习中Ext.grid.EditorGridPanel ... -
官方布局实例主页面的js源代码 学习(简单翻译)
2008-09-14 00:27 5736最近在学习EXTJS的布局, ... -
EXT Grid 导出Excel的另类实现,可以只导出Grid中显示的列
2008-08-17 01:22 12958w_e_ibo: http://t.cn/zjqEaRh ...
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
Extjs 5 学习笔记,在网上下载整理好的。
学习ExtJS时看书的笔记,记录了ExtJS事件机制的原理
适合ExtJs开发人员extjs技术上手以及深入
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4...
extjs4.0 笔记大全,按照这个笔记来,相信你一定能很快学会的
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
非常适合新手学习extjs的笔记,让你少走弯路
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...
根据word做的pdf版本的ExtJs学习笔记,根据原版进行了删减,欢迎大家下载啊,哈哈。
extJs学习笔记,让新手能够快速理解extJS的原理,深人浅出的了解extjs的精髓。
语言程序设计资料:ExtJs学习笔记-2积分.doc
ExtJS4.0开发笔记