Extjs实用技巧

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 onclick="addAccessory();" src="${frontPath}/images/backmanageimg/add.png" style="cursor:pointer;">' + 
       '<img onclick="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.以弹出窗口的形式验证表单（提示错误）

实现：

    var err = [];
    var Tip_planName = Ext.getCmp('regulatoryName_Id').getValue();
    if(!Tip_planName){
        err.push({
            tip: '请输入计划名称!'

        });

    }
   
    if(err.length > 0){
        var text = '请完成以下信息的填写:';
        for(var i in err){
            text += "*" + err[i].tip;
            //err[i].target.bodyEl.addCls('LabelErr');
        }
        Ext.Msg.alert('提示', text);
    }