ExtJS 5.0版本問題+Sencha cmd

標籤：style   blog   http   color   使用   os   檔案   io   

　　ExtJS 5.0版本官方網站給的圖表例子，以散佈圖作說明：

Ext.create(‘Ext.Container‘, {    //renderTo: Ext.getBody(),    width: 600,    height: 400,    layout: ‘fit‘,    items: {        xtype: ‘cartesian‘,        store: {          fields: [‘name‘, ‘data1‘, ‘data2‘, ‘data3‘, ‘data4‘, ‘data5‘],          data: [              {‘name‘:‘metric one‘, ‘data1‘:10, ‘data2‘:12, ‘data3‘:14, ‘data4‘:8, ‘data5‘:13},              {‘name‘:‘metric two‘, ‘data1‘:7, ‘data2‘:8, ‘data3‘:16, ‘data4‘:10, ‘data5‘:3},              {‘name‘:‘metric three‘, ‘data1‘:5, ‘data2‘:2, ‘data3‘:14, ‘data4‘:12, ‘data5‘:7},              {‘name‘:‘metric four‘, ‘data1‘:2, ‘data2‘:14, ‘data3‘:6, ‘data4‘:1, ‘data5‘:23},              {‘name‘:‘metric five‘, ‘data1‘:27, ‘data2‘:38, ‘data3‘:36, ‘data4‘:13, ‘data5‘:33}          ]        },        axes: [{            type: ‘numeric‘,            position: ‘left‘,            fields: [‘data1‘],            title: {                text: ‘Sample Values‘,                fontSize: 15            },            grid: true,            minimum: 0        }, {            type: ‘category‘,            position: ‘bottom‘,            fields: [‘name‘],            title: {                text: ‘Sample Values‘,                fontSize: 15            }        }],        series: {            type: ‘scatter‘,            highlight: {                size: 7,                radius: 7            },            fill: true,            xField: ‘name‘,            yField: ‘data3‘,            marker: {                type: ‘circle‘,                fillStyle: ‘blue‘,                radius: 10,                lineWidth: 0            }        }    }});

　　不同於以往的例子，新的例子中均出現了xtype:‘cartesian‘，如果你僅僅在html檔案中引入ext-charts.js檔案，是會報錯的，報錯情況如下：

[Ext.Loader] Synchronously loading ‘widget.cartesian‘; consider adding Ext.require(‘widget.cartesian‘) above Ext.onReadyGET http://localhost:8088/ExtTest/widget/cartesian.js?_dc=1406205106470 404 (Not Found)Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.cartesian 

　　提示找不到widget.cartesian，搜尋ExtJS的安裝目錄，你怎麼也找不到widget這個檔案夾以及cartesian這個js檔案，於是顯示百度，毫無資料，再Google，有一點點資料，大致是說ExtJS5.0不同於以往的版本，新版本中用ext-charts.js對以往版本的例子有效，新版本必須使用的是packages檔案夾下的sencha-charts，我去裡面找，也沒看見sencha-charts.js可以供引用，我就想，我了個槽，沒有js檔案，讓我直接用檔案夾不成。依靠著自己的一些程式員的經驗，猜想這可能是源碼，需要build產生個js？於是各種找啊找，廢話不多說，摸索出瞭解決方法。就是用sencha自己的工具sencha cmd來build這個sencha charts。

1.首先下載安裝sencha cmd最新版本。

2.開啟系統的cmd，輸入sencha，有一串資訊出來說明安裝成功。

3.然後cd到檔案夾sencha-charts下，運行命令：

　　sencha package build

  注意，這個package不是sencha cmd內建的啥命令，是因為sencha-charts這個工程的原來的名字叫package，如果原名叫hello，你就得改成sencha hello build。你問我原名我是怎麼知道的？是看sencha-charts/.sencha檔案夾知道的，.sencha檔案夾下有個檔案夾包含build-impl.xml，那麼這個包含build-impl.xml檔案的檔案夾就是這個工程的原有名字。

　　上述3步之後，好的，大功告成，會在sencha-charts多出一個build檔案夾，裡面有我需要的sencha-charts.js。