日期:2014-05-16  浏览次数:20418 次

ExtJS 技巧笔记
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',