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