ExtJS 技巧笔记

http://d.download.csdn.net/down/1169034/city2046

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(
　　 '',
　　 '{data:this.parseSender()}: {data:this.parseDate}

',
　　 '
{data:this.parseText}

', '
',
　　 {
　　 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: '[e-mail]',
　　 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(
　　 '
Name: {name}

',
　　 '
Title: {title}

',
　　 '
Company: {company}

',
　　 '
Kids: ',
　　 '',
　　 '

{name}

',
　　 '
'
　　);
　　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');//设定合并的文件夹样式
　　
　　
　　又爱又恨的 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代码
　　
　　　　style="width: 162px;">
　　
　　 　　 class=" x-form-text x-form-field " style="width: 145px;" title="">
　　 　　 id="ext-gen135">