extjs 技巧 笔记（转）

extjs 技巧 笔记（转）
http://yourgame.iteye.com/blog/464691


Js代码
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 
            }]);  
        }  
    }  
} 

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
            }]);
        }
    }
}



Java代码
//在分页组件前面添加组件  
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()  
}); 

//在分页组件前面添加组件
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()
});

效果如图如下


Js代码
//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为服务器返回的所有记录  
        }  
    }  
}); 

//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为服务器返回的所有记录
        }
    }
});

Js代码
//变换元素大小以及动画的特效  
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  
    });  
} 

//变换元素大小以及动画的特效
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
    });
}

Js代码
 
//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-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却不一定正确


Js代码
// 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(  
    '<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-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(
    '<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来表示类型


Js代码
//表单里面显示图片 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' 
        }]  
    }  
} 

//表单里面显示图片 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'
        }]
    }
}


Js代码
//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  
} 

//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
}

Js代码
//树节点(TreeNode)图标动态修改 2009-11-22 15:36:52  
var ui = node.getUI();  
ui.removeClass('x-tree-node-leaf'); //去掉之前的根节点样式  
ui.addClass('x-tree-node-expanded'); //设定已展开文件夹样式