1.通过dom元素查找Ext组件
情景:
xtype : 'panel',
layout : 'hbox',
margin : '5 0 5 0',
items : [{
xtype : 'textfield',
maxWidth : 400,
fieldLabel : ' 附件'
},{
xtype : 'label',
margin : '5 0 0 10',
html : '<img οnclick="addAccessory();" src="${frontPath}/images/backmanageimg/add.png" style="cursor:pointer;">' +
'<img οnclick="delAccessory(this);" src="${frontPath}/images/backmanageimg/delete.png" style="cursor:pointer;margin-left:5px;">'
}]
需求:通过delAccessory(this)中的this查找第一行的xtype : 'panel'的Ext panel。
实现:
var panelId = $(_this).parent().parent().attr('id');
//去掉"-targetEl"得到Ext组件Id(关键)
panelId = panelId.replace("-targetEl","");
//通过Id获得Ext panel(其他组件亦然)
Ext.getCmp(panelId);
2.checkbox tree实现父子节点相互级联
实现:加一个监听事件即可。
listeners : {
checkchange: function(node, checked, options){
node.cascadeBy(function(n){
n.set('checked', checked);
});
if(checked){
node.bubble(function(n){n.set('checked', checked);} );
}
}
}
3.grid record上移下移(修改数据库)
需求:
实现:
//上移按钮处理
handler : function(){var record = grid.getSelectionModel().getSelection();
var index = store.indexOf(record[0]);
if (index > 0) {
changeCourseBannerOrder(record[0].data.courseId,record[0],index,true);
}
}
//下移按钮处理
handler : function(){
var record = grid.getSelectionModel().getSelection();
var index = store.indexOf(record[0]);
if (index < store.getCount() - 1) {
changeCourseBannerOrder(record[0].data.courseId,record[0],index,false);
}
}
//操作数据库
function changeCourseBannerOrder(courseId,record,index,isMoveUp){
$.ajax({
async: true,
url: url,
type: "POST",
data: {
courseId : courseId,
isMoveUp : isMoveUp
},
dataType: "json"
}).done(function (data) {
if(isMoveUp){
store.removeAt(index);
store.insert(index - 1, record);
grid.getView().refresh();
grid.getSelectionModel().select(index - 1);
}else{
store.removeAt(index);
store.insert(index + 1, record);
grid.getView().refresh();
grid.getSelectionModel().select(index + 1);
}
}).fail(function () {
}).always(function () {
});
}
4.actioncolumn动态显示icon
效果:
实现:
5.grid添加序号列
实现:new Ext.grid.RowNumberer(),删除一条记录导致顺序不对的解决方法:store.refresh()。
6.监听饼图的每一块区域
实现:series中的listeners里监听itemclick事件。
7.以弹出窗口的形式验证表单(提示错误)
实现: