extjs自定义组件类

概述在使用extjs开发应用系统时，难免会出现一个js文件内包含数百行甚至上千行代码的情况，例如程序主界面或者复杂一点的界面，下面介绍如何通过自定义组件减少单个extjs javascript代码行数的方法。下图中的主界面显示了两个统计图：最初的时候统计图的js代码是写死在tagpanel里面的，通过e

在使用extJs开发利用系统时，难免会出现1个Js文件内包括数百行乃至上千行代码的情况，例如程序主界面或复杂1点的界面，下面介绍如何通过自定义组件减少单个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); }});

上面的代码中定义了1个叫做“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 统计图组件类，两个图对应同1个store，所以在写完xtype去援用自定义组件后又提供了chart_store这个extJs自定义类属性。

总结

以上是内存溢出为你收集整理的extjs自定义组件类全部内容，希望文章能够帮你解决extjs自定义组件类所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。