周总结2016.12-18

1、如何封装一个extjs类
Ext.create(类名,{
}) js加载到这里是，就会展示这个类里的东西
2、布局很重要：
layout: {
type: ‘table’,
columns:1,
align: ‘left’
},
没有这个就会显示不全，如下边代码

3、
var store = Ext.data.StoreManager.lookup(‘chartStoreInner’);//获取WindowPanel下的store
store.load({ params: {‘fusername’:rd.fusername,’startDate’:startDate,’endDate’:endDate} });//load前传参数
StoreManager可以跨类拿到store，这个在封装好后调用很重要

Ext.define('ModulePoolPanel', {    extend: 'Ext.panel.Panel',    id : 'ModulePoolPanel',    border:null,    initComponent : function() {        this.store = Ext.create('Ext.data.Store', {            storeId:'mainStore',            fields:['fusername','frname', 'frolename','visitCount'],            pageSize:10,            proxy: {                type: 'ajax',                actionMethods: 'POST',                url: getRootPath()+'/monitor/getModuleListMonitorAction.action',                        reader: {                    type: 'json',                    root: 'result',                    totalProperty: 'totalCounts'                            },                pageParam:'pageNo'            }        });        this.pagintoolbar = new Ext.PagingToolbar({            store: this.store,            displayInfo: true,            dock: 'bottom',            displayMsg:'第{0}条到{1}条,一共{2}条',              emptyMsg:'没有记录'         });        this.grid = Ext.create('Ext.grid.Panel', {            store: this.store,            title:"查询结果",            columns: [                { text: '用户名', dataIndex: 'fusername',align:'center',menuDisabled:true ,width:'25%' },                { text: '真实姓名', dataIndex: 'frname',align:'center',menuDisabled:true ,width:'25%' },                { text: '访问模块次数', dataIndex: 'visitCount',align:'center',menuDisabled:true ,width:'25%'},                {                     header : '详情',                     align :'center',                     width    : '25%',                     renderer:function (value,cellmeta,record,rowIndex,columnIndex,store){                         var rd = Ext.encode(record.data);//                       debugger                                var content="<a style='margin-left:10px;' href='javascript:void(0)' onclick='ModulePoolPanel.SeeDetail("+rd+")'>查看图表统计</a>"                                 return content;                     }                }            ],            dockedItems: [this.pagintoolbar]        });        this.items = [this.grid];        var queryButton = Ext.create('Ext.button.Button',{            text: '查询',            margin: '10 50 0 0',//(top, right, bottom, left)            scope:this,            handler: function() {                this.pagintoolbar.moveFirst();                this.store.load();            }        });        var startDateField = new Ext.form.DateField({            name:'startDate',            value:'2012-01-01',            format : 'Y-m-d',            editable:true,            fieldLabel : '时间',            listeners:{                scope: this,                'select': function(){                 Ext.apply(this.store.proxy.extraParams,{'startDate':startDateField.getValue()});                }           }        });        this.startDate= startDateField.getValue();        var endDateField = new Ext.form.DateField({            name:'endDate',            value:Ext.util.Format.date(Ext.Date.add(new Date(),Ext.Date.MONTH,0),"Y-m-d"),            format : 'Y-m-d',            editable:true,            fieldLabel : '至',            listeners:{                 scope: this,                'select': function(){                     Ext.apply(this.store.proxy.extraParams,{'endDate':endDateField.getValue()});                }           }        });        this.endDate= endDateField.getValue();        //获取前台用户所选 用户类型,传到后台        var userRoleCombo = Ext.create('Ext.form.ComboBox', {            fieldLabel: '用户类型',            labelAlign:'left',            editable:false,            store: Ext.create('Ext.data.Store', {                fields: ['frolename'],                proxy: {                    actionMethods: 'post',                    type: 'ajax',                    url: getRootPath()+"/monitor/getUserTypeMonitorAction.action",                    simpleSortMode: true,                    pageParam:'pageNo'                }            }),            margin: '10 50 0 0',//(top, right, bottom, left)            displayField: 'frolename',            value:'全部' ,            valueField: 'frolename',//            debugger            //监听用户所选的审核类型            listeners:{                scope: this,                'select': function(){                 Ext.apply(this.store.proxy.extraParams,{'frolename': userRoleCombo.getValue()});                }           }        });        Ext.apply(this.store.proxy.extraParams,{'frolename': userRoleCombo.getValue()});        Ext.apply(this.store.proxy.extraParams,{'startDate':startDateField.getValue()});        Ext.apply(this.store.proxy.extraParams,{'endDate':endDateField.getValue()});        this.store.load();        this.tbar = Ext.create('Ext.toolbar.Toolbar',{            layout: {                type: 'table',                columns:2,                align: 'left'            },            items:[startDateField,endDateField,userRoleCombo,queryButton]        });        //create方法实例化类        this.win = Ext.create('WindowPanel',{        });        this.callParent(arguments)        }    });ModulePoolPanel.SeeDetail = function(rd) {    var panel = Ext.getCmp('ModulePoolPanel');//根据id获取ModulePoolPanel类，调用类里边的this.属性。 load传参数使用    panel.win.show();//window组件show（）才可以展示    var startDate = panel.startDate;    var endDate = panel.endDate;    var store = Ext.data.StoreManager.lookup('chartStoreInner');//获取WindowPanel下的store    store.load({ params: {'fusername':rd.fusername,'startDate':startDate,'endDate':endDate} });//load前传参数    var windowPanel = Ext.getCmp('WindowPanel');//通过id获取组件，可以调用panel下的this属性    windowPanel.fusername = rd.fusername;//给WindowPanel里的全局变量fusername赋值}

Ext.define('WindowPanel',{    extend: 'Ext.window.Window',    id: 'WindowPanel',    height: 400,    width: 800,    layout: 'fit',    closeAction: 'hide',    layout: {        type: 'table',        columns:1,        align: 'left'    },    border:null,    initComponent: function(){        //图表Store        var chartStoreInner = Ext.create('Ext.data.Store', {            storeId:'chartStoreInner',            fields:['COUNT(\u0027F_MODULENAME\u0027)','F_MODULENAME','F_USERNAME'],        proxy: {             type: 'ajax',             url: getRootPath()+"/monitor/getModuleCountsMonitorAction.action",             reader: {                 type: 'json'             },             pageParam:'pageNo'         }       });        //column图表        var chart = Ext.create('Ext.chart.Chart', {            width: 800,            height: 300,            animate: true,            store:chartStoreInner,                           axes: [                {                    //控制数据轴                    type: 'Numeric',                    position: 'left',                    fields: ['COUNT(\u0027F_MODULENAME\u0027)'],                    label: {                        renderer: Ext.util.Format.numberRenderer('0,0')                    },                    title: '访问次数',                    grid: true,                    minimum: 0,                    //数据轴分10段显示                    majorTickSteps:10                },                {                    //类型轴                    type: 'Category',                    position: 'bottom',                    fields: ['F_MODULENAME'],                    title: '模块名称'                }            ],            //图表序列，控制图表            series: [                {                    type: 'column',                    axis: 'left',                    highlight: true,                    tips: {                      trackMouse: true,                      width: 140,                      height: 28,                      renderer: function(storeItem, item) {                        this.setTitle(storeItem.get('F_MODULENAME') + ': ' + storeItem.get('COUNT(\u0027F_MODULENAME\u0027)') + '次');                      }                    },                    label: {                      display: 'insideEnd',                      'text-anchor': 'middle',                        field: 'data',                             renderer: Ext.util.Format.numberRenderer('0'),                        orientation: 'vertical',                        color: '#333'                    },                    xField: 'F_MODULENAME',//横轴绑定数据                    yField: 'COUNT(\u0027F_MODULENAME\u0027)'              }            ]        });        var startDateChart=  new Ext.form.DateField({            labelWidth: 50,            margin: '0 10 0 0',            name:'startDate',            value:'2012-01-01',            format : 'Y-m-d',            editable:true,            fieldLabel : '时间',            listeners:{                    scope: this,                   'select': function(){                         Ext.apply(chartStoreInner.proxy.extraParams,{'startDate':startDateChart.getValue()});                }            }        });        var endDateChart=new Ext.form.DateField({            labelWidth: 50,             margin: '0 50',            name:'endDate',            value:Ext.util.Format.date(Ext.Date.add(new Date(),Ext.Date.MONTH,0),"Y-m-d"),            format : 'Y-m-d',            editable:true,            fieldLabel : '至',            listeners:{                 scope: this,                'select': function(){                     Ext.apply(chartStoreInner.proxy.extraParams,{'endDate':endDateChart.getValue()});                }           }        });        this.fusername = "";        var queryButton=Ext.create('Ext.button.Button',{            text: '查询',            margin: '10 50 0 0',//(top, right, bottom, left)            scope:this,            handler: function() {                Ext.apply(chartStoreInner.proxy.extraParams,{'startDate':startDateChart.getValue()});                Ext.apply(chartStoreInner.proxy.extraParams,{'endDate':endDateChart.getValue()});                Ext.apply(chartStoreInner.proxy.extraParams,{'fusername':this.fusername});                chartStoreInner.load();            }        });        var tbar=Ext.create('Ext.toolbar.Toolbar',{            border:null,            layout: {                    type: 'table',                    columns:3,                    align: 'left'            },            items: [                    startDateChart,                    endDateChart,                    queryButton            ]        });        this.items=[tbar,chart];        this.callParent(arguments) //  解决 me.dockedItems is undefined    }   })