ExtJs 常用小技巧备忘录

1. ExtJs 给fieldLabel与fieldInput添加样式{给Input标签加入图标}http://www.w3school.com.cn/cssref/pr_background.asp 设置元素背景

            Ext.create("Ext.form.TextField", {
                renderTo: Ext.getBody(),
                fieldLabel: '用户名',
                labelStyle: 'color:green;',
                fieldStyle: 'background: url(user.png)left center no-repeat;padding-left:20px;'
            });

2. Ext.XTemplate在模板中编写自定义函数并且可以取得计算结果,自定义的代码放在{% ... %}块当中

getInnerTpl: function() {
                return '{%var value = this.field.getRawValue().replace(/([.?*+^$[\\]\\\\(){}|-])/g, "\\\\$1");%}' +
                    '{[values.title.replace(new RegExp(value, "i"), function(m) {return "<b>" + m + "</b>";})]}';
            }

3. Ext.form.field.Text使用正则表达式控制键盘输入与数据验证

Ext.create('Ext.form.Panel', {
    width: 300,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        maskRe: /[\d\-]/,  控制键盘输入
        regex: /^\d{3}-\d{3}-\d{4}$/, 数据验证
        regexText: 'Must be in the format xxx-xxx-xxxx' 提示信息
    }]
});

4. Ext.util.Format工具类

Ext.util.Format.ellipsis(stringValue, 15) //截取字符串 添加省略号...
Ext.util.Format.fileSize(filesize)//将数字转换成文件大小
Ext.util.Format.date(date, "Y-m-d")//格式化日期

5. 将Ext组件渲染到XTemplate当中

Ext.define('MyComponent', {
    extend: 'Ext.container.Container',

    initComponent: function() {
        var me = this,
            // just create a textfield and do not add it to any component
            text = Ext.create('Ext.form.field.Text');

        var mainTpl = new Ext.XTemplate("<div>{[this.renderUserInfo()]}</div>", {
            renderUserInfo: function() {
                return '<ul>' +
                       '<li class="custom-text-field"></li>' +
                       '</ul>';
                }
            }
        );
        me.html = mainTpl.apply();

        // postpone text field rendering
        me.on('render', function() {
            // render text field to the <li class=".custom-text-field"></li>
            text.render(me.getEl().down('.custom-text-field'));
        });
        this.callParent();
    }
});

Ext.getBody().setHTML('');
Ext.create('MyComponent', {
    renderTo: Ext.getBody()
});

6. XTemplate当中给HTML元素定义事件

new Ext.XTemplate(
　　'<p><b>标题:</b> {biaoti}</p>',
   '<p><b>附件:</b> <a id={[this.getLinkId(values)]} href="">{fujianname}</a></p><br>',
   '<p><b>补签原因:</b><span style="color:green"> {yuanyin}</span></p>', 
　　{
   　　 getLinkId: function(values) {
            var result = Ext.id();
            Ext.defer(function() {
            　　Ext.get(result).on('click', function(e, target){
                　　e.stopEvent();
                    //自定义逻辑
                })
            },1000);
         return result;
　　　　}
    }
)；

7、tabpanel 标题双击事件

Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    items: [{
        title: 'Normal'
    }, {
        title: 'Double-Click',
        tabConfig: {
            listeners: {
                element  : 'el',
                dblclick : function() {
                    console.log(this);
                }
            }
        }
    }]
});

8：单元格文字事件

renderer: function(value) {
return Ext.String.format('<a class="user" href="javascript:void(0)">{0}</a>', 'html');
}

cellclick : 'cellclickHandler'

cellclickHandler : function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
		if (e.getTarget('.user')) {
			var win = Ext.create({
				xtype: 'HtmlWin_FormWin'
			});
			win.show();
		}
	}