[Extjs modern]视图绘制顺序简单分析

来源：互联网发布：手机漏洞检测软件编辑：程序博客网时间：2024/06/09 17:16

源码

下面贴出部分工作代码供分析，可能会去除一些不必要的东西，仅供参考

Ext.define('Admin.view.base.KaoQinManage',{    extend:'Ext.Container',     xtype: 'kaoqinmanage',    requires:[        'Ext.chart.series.Pie',        'Ext.tip.ToolTip',        'Ext.chart.interactions.ItemHighlight'    ],    fullscreen: true,     layout: {        type: 'vbox'//,        //pack: 'center'    },    items:[        {            xtype: 'button',            text: '',            style: {                background: '#8470FF',                color:'white',                fontSize:'20px'            },            handler:function(){                console.log(this.up('navigationview'));                var navigationview = this.up('navigationview');                var store = Ext.create('Ext.data.Store', {                    fields: [],                    data: []                });                var gridpanel = Ext.create('Ext.Container', {                    fullscreen:true,                    items:[                        {                            xtype: 'grid',                            title: '',                            store: store,                            columns: [],                            height: Ext.Viewport.getWindowHeight()-100,                            layout: 'fit',                            listeners:{                                itemdoubletap:function( self, index, target, record, e, eOpts ){                                    console.log(record);                                }                            }                        },                        {                            xtype: 'button',                            text: '返回',                            style: {                                background: '#A8A8A8',                                color:'#F5F5F5',                                fontSize:'20px'                            },                            handler:function(){                                var navigationview = this.up('navigationview');                                navigationview.removeAll();                                navigationview.add({                                    xtype:'kaoqinmanage'                                });                            }                        }                    ]                    });                // gridpanel.show();                navigationview.removeAll();                navigationview.add(gridpanel);            },            listeners:{                painted:function(self,eOpts){                    console.log("button painted...");                }            }        },        {            xtype: 'panel',            html: '',            style:{                textAlign: 'center',                fontSize: '18px'            },            listeners:{                painted:function(self,eOpts){                    console.log("统计日期 panel painted...");                }            }        },        {            xtype:'panel',            height:400,            items:{                xtype: 'polar',                width: '100%',                height: '100%',                insetPadding: 20,                innerPadding: 15,                legend: {                    position: 'bottom'                },                colors:['#66CD00','#B3EE3A','#EE5C42'],                //theme: 'green',                interactions: ['rotate', 'itemhighlight'],                store:{                    fields: ['name', 'data'],                    data: []                },                series: {                    type: 'pie',                    highlight: true,                    angleField: 'data',                    label: {                        field: 'name',                        //display: 'rotate',                        calloutLine: {                            length: 20,                            width: 3                            // specifying 'color' is also possible here                        }                    },                    donut: 20/*,                    tooltip: {                        trackMouse: true,                        renderer: function (toolTip, record, ctx) {                          toolTip.setHtml(record.get('name') + ': ' + record.get('data') + ' views');                        }                    }*/                }            },            listeners:{                painted:function(self,eOpts){                    console.log("饼状图 panel painted...");                }            }        }    ],    listeners:{        painted:function(self,eOpts){            console.log("Container painted...");        }    }});

运行视图

这里写图片描述

控制台数据

这里写图片描述

结果分析

根据控制台输出的结果，结合上面的展示图可以看出：在一个container容器里有一些其他的组件时，首先绘制的是内部的组件，而组件的绘制顺序是按照items里添加顺序进行绘制的。在本例子当中是先绘制最上面的button，然后是下面的统计日期一行文字的panel，接着是下面的饼状图部分，最后才是最外层的容器container。
如果清楚组件的绘制顺序就可以在特殊的时间点做一些数据处理，则会达到事半功倍的效果！！！
欢迎指正，谢谢！

1 0