extjs自訂群組件類

標籤：style   blog   http   io   ar   color   os   使用   sp   

在使用extjs開發應用系統時，難免會出現一個js檔案內包含數百行甚至上千行代碼的情況，例如程式主介面或者複雜一點的介面，下面介紹如何通過自訂群組件減少單個extjs javascript程式碼數的方法。

中的主介面顯示了兩個統計圖：

最初的時候統計圖的js代碼是寫死在tagpanel裡面的，通過extjs 自訂群組件的方法拆分成單獨的類檔案以後的代碼：

 Ext.define('app.view.main.Main_Pie_Chart', {extend: 'Ext.panel.Panel',alias : 'widget.main_pie_chart',chart_store:null,layout: {type: 'fit'},initComponent: function() {var me = this;Ext.applyIf(me, {title:'庫存商品成本分布餅圖',items:[{xtype:'chart',//region: 'center',animate: true,width:450,height:400,store:me.chart_store,shadow: true,legend: {position: 'right'},insetPadding: 60,theme: 'Base:gradients',series: [{type: 'pie',field: 'data1',showInLegend: true,donut: 35,tips: {trackMouse: true,width: 140,height: 28,renderer: function(storeItem, item) {//var total = 0;//storeItem.each(function(rec) {//    total += rec.get('data1');//});//this.setTitle(storeItem.get('product_name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');this.setTitle(storeItem.get('product_name') + ': ' +storeItem.get('data1')+'元庫存成本');}},highlight: {segment: {margin: 20}},label: {field: 'product_name',display: 'rotate',contrast: true,font: '18px Arial'}}]}]});me.callParent(arguments);}});

上面的代碼中定義了一個叫做“app.view.main.Main_Pie_Chart”的類，在tabpanel裡面需要引用時需要藉助requires匯入，見下面的代碼：

Ext.define(‘app.view.Viewport‘, {    renderTo: Ext.getBody(),    extend: ‘Ext.container.Viewport‘,    alias: ‘widget.main_viewport‘,    requires: [        ‘Ext.tab.Panel‘,        ‘Ext.layout.container.Border‘,        ‘app.store.StockChartPieStore‘,        ‘app.view.main.Main_Top_Panel‘,        ‘app.view.main.Main_Pie_Chart‘,        ‘app.view.main.Main_Column_Chart‘    ],    layout: {        type: ‘border‘    },

具體在主介面的tabpanel使用的代碼就可以簡化為：

 {    xtype: ‘tabpanel‘,    region: "center",    id: ‘content_tabpanel‘,    margins: ‘2 5 5 0‘,    activeTab: 0,    border: false,    items: [{        id: ‘start-panel‘,        title: ‘歡迎使用‘,        layout: ‘hbox‘,        bodyStyle: ‘padding:25px; background-image: url(./img/bg.jpg); background-repeat: no-repeat;  background-attachment: fixed;  background-position: 100% 100%‘,        items: [            {                xtype: ‘main_pie_chart‘,                chart_store: chart_data_store            }            ,            {                xtype: ‘main_column_chart‘,                chart_store: chart_data_store            }        ]    }

注意這裡面其實是引用了兩個自訂的extjs 統計圖組件類，兩個圖對應同一個store，所以在寫完xtype去引用自訂群組件後又提供了chart_store這個extjs自訂類屬性。

extjs自訂群組件類