Ext学习笔记 1

最新推荐文章于 2011-10-18 10:32:54 发布

seng3018

最新推荐文章于 2011-10-18 10:32:54 发布

阅读量1.2k

点赞数

分类专栏： ExtJS 文章标签： ext object function date autocomplete callback

本文链接：https://blog.csdn.net/seng3018/article/details/5896814

版权

ExtJS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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( 
    '
  
  
   
   for="
   
   .">', 
    '
   
   {[xindex % 2 === 0 ? "green" : "red"]}">{data:this.parseSender()}: {data:this.parseDate} ', 
    '
   
   padding:1 1 10 5">{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: '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( 
    'Name: {name}', 
    'Title: {title}', 
    'Company: {company}', 
    'Kids: ', 
    '
   
   
    
    for="
    
    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');//设定合并的文件夹样式 
{ 
    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 
        }]) 
    } 
} 

  
  
   
   class="
   
   x-form-field-wrap x-form-field-trigger-wrap " id="
   
   ext-gen134" 
style="
   
   width: 162px;"> 
    
   
   hidden" id="
   
   materials.stuffid" 
   
   name="
   
   materials.stuffid" value="
   
   1">
   
    
    
   
   text" id="
   
   materials.stuffName" autocomplete="
   
   off" size="
   
   24" 
    
   
   class="
   
    x-form-text x-form-field " style="
   
   width: 145px;" title="
   
   ">
   
    
    
   
   
   
   class="
   
   x-form-trigger x-form-arrow-trigger" src="
   
   ../resources/images/default/s.gif" 
    id="
   
   ext-gen135">

seng3018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext学习笔记 1

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'); //给组件上遮罩 c
复制链接

扫一扫

专栏目录