Ext4之杂七杂八

直接上代码，看注释吧

// Control里负责所有逻辑上的操作，显示图表的定义(define)全放到View里
Ext.define('App.controller.com.XXXCtrl', {
    extend        : 'Ext.app.Controller',
    views         : ['com.XXXView'], // view层
    stores        : ['com.XXXStore'], // model层
    init          : function() {
        
        this.control({
　　　　　　　// XXXView是视图的别名，找到它下面直接的grid（如果grid嵌套在好几层的items里，就不是直接的grid了）
            'XXXView > grid' : {
                afterrender : this.onRender // 在这个grid渲染后，调用这个方法（即到后台请求数据）
            },
            'XXXView > grid tableview' : {
                expandbody : this.displayInnerChart, // 展开grid的某一行时，触发这个方法
                collapsebody : this.destroyInnerChart
            },
            'XXXView button#search' : { // 找到button的itemId是search的按钮，添加一个点击事件
                click : this.onBtnSchClick
            }
        });
        
    },
    
    onRender : function(_this, eOpts){
        var startTime = new Date(); // 获取今天时间
        startTime.setDate(startTime.getDate() - 7); // 系统会自动转换为7天前的时间
        var endTime = new Date();
        endTime.setDate(endTime.getDate() - 1);
　　　　 // 当前对象是grid，通过它向上找到Panel
        var formPanel = _this.up('XXXView');
        // 页面第一次加载，默认查询条件赋值
        formPanel.getForm().setValues({
            a: 3,
            b: startTime,
            c: endTime
        });
        this.queryData(formPanel);
    },
    
    onBtnSchClick : function(_this, e, eOpts){
        try{
            var formPanel = _this.up('XXXView');
            this.queryData(formPanel);
        }catch(e){
            alert(e);
        }
    },
    
    queryData : function(formPanel){
　　　　 // 最顶层的formPanel向下找到gird，拿到store，调用它的load方法
        formPanel.down('grid').getStore().load({
            params : formPanel.getForm().getValues(),
            limit : 15
        });
    },
    
    //显示图表
    displayInnerChart : function( rowNode, record, expandRow, eOpts ){
　　　　　　  // 先构造出来图表
　　　　　　  var chart = Ext.create('App.view.com.XXXChart', {
　　　　　　　　　// 大括号里可以传属性，会覆盖掉定义好的
                renderTo : record.get('flag') // 渲染到哪，即它出现的位置，可以在div里
            });
            // 这是必杀技，不知道该怎么找组件了就用它，会返回一个数组！
            var form = Ext.ComponentQuery.query('XXXView')[0];
            var params = form.getForm().getValues();
//            Ext.apply(params, record.getData()); //这个方法也必须会，是快捷的复制方法，会把record里的所有参数复制进params，但这里用不到，主要因为Action中的参数名和页面不一致。
            params.paramName = record.get('param');
            chart.getStore().load({
                params : params
            });
    },
    
    //销毁图表
    destroyInnerChart : function( rowNode, record, expandRow, eOpts ){
        var parent = document.getElementById(record.get('flag'));
        var child = parent.firstChild;
    
        while (child) {
            child.parentNode.removeChild(child);
            child = child.nextSibling;
        }
    }
});