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