一、認(rèn)識官方文檔

文檔傳送門

官方文檔首頁

1.官方例子

從首頁導(dǎo)航欄點(diǎn)擊Examples 進(jìn)入官網(wǎng)demo頁面

• 進(jìn)入Dashboard精美項(xiàng)目展示
• 進(jìn)入組件demo展示

官方demo

Dashboard

組件demo

右側(cè)源碼，左側(cè)組件展示

2.根據(jù)dashboard模板創(chuàng)建自己的項(xiàng)目

自己在搭建項(xiàng)目的時(shí)候可以根據(jù)Admin Dashboard 的源碼創(chuàng)建新的工程模板
根據(jù)自己實(shí)際項(xiàng)目情況選用組件
sencha cmd API傳送門

具體方法

sencha help generate app 

Options
  * --controller-name, -c - The name of the default Controller
  * --library, -l - the pre-built library to use (core or all). Default: core
  * --name, -n - The name of the application to generate
  * --path, -p - The path for the generated application
  * --refresh, -r - Set to false to skip the "app refresh" of the generated app
 ` * --starter, -s - Overrides the default Starter App template directory` //注意此處
  * --template, -te - The name of the template to use
  * --theme-name, -th - The name of the default Theme
  * --view-name, -v - The name of the default View

可以看到cmd 給出的命令行細(xì)節(jié)是可以根據(jù)模板生成對應(yīng)的項(xiàng)目的

//覆蓋默認(rèn)的App生成模板采用制定模板進(jìn)行工程創(chuàng)建
sencha -sdk /path/to/ext7 generate app classic -s /path/to/ext7/templates/admin-dashboard MyApp /path/to/my-app

注意：當(dāng)然這樣生成的項(xiàng)目需要修改配置文件才行
修改項(xiàng)目根目錄下的app.json文件 ,找到output配置項(xiàng)

    "output": {
        // "base": "${ext.dir}/build/examples/admin-dashboard/${build.id}",  注釋掉原來的輸出配置，改成如下配置
        "base": "${workspace.build.dir}/${build.environment}/${app.name}/${build.id}",
        "page": "../index.html",
        "manifest": "../${build.id}.json",
        "appCache": {
            "enable": false
        }
    },

進(jìn)入項(xiàng)目根目錄執(zhí)行

sencha app watch 

打開本地訪問路徑：大功告成

3.Extjs核心內(nèi)容

在官網(wǎng)Api導(dǎo)航欄樹形圖中找到核心內(nèi)容節(jié)點(diǎn)
Core Concepts

類系統(tǒng)

1.類系統(tǒng)的目的：

• 代碼相似度高，可識別度高
• 快速開發(fā)，易于調(diào)試且易于部署
• 有條理，可擴(kuò)展和可維護(hù)

2.類系統(tǒng)的約定
ext想集成javascript的基于原型的靈活性，又想獲取面向?qū)ο笳Z言的封裝、繼承、標(biāo)準(zhǔn)編碼約定

• 類名只能包含字母數(shù)字字符。 允許使用但不鼓勵(lì)使用數(shù)字，除非它們屬于技術(shù)術(shù)語。 請勿使用下劃線，連字符或任何其他非字母數(shù)字字符。 例如：
  MyCompany.useful_util.Debug_Toolbar 不建議使用
  MyCompany.util.Base64 建議使用
• 最好使用包命名和駝峰命名法，類名應(yīng)該大寫

MyCompany.data.CoolProxy
MyCompany.Application

Ext.data.JsonProxy instead of Ext.data.JSONProxy
MyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser
MyCompany.server.Http instead of MyCompany.server.HTTP

源文件

類的名稱直接映射到存儲它們的文件路徑。 因此，每個(gè)文件只能有一個(gè)類

• Ext.util.Observable 存儲在 path/to/src/Ext/util/Observable.js
• Ext.form.action.Submit 存儲在 path/to/src/Ext/form/action/Submit.js
• MyCompany.chart.axis.Numeric存儲path/to/src/MyCompany/chart/axis/Numeric.js

方法和變量

• 與類名類似，方法和變量名只能包含字母數(shù)字字符。 允許使用但不鼓勵(lì)使用數(shù)字，除非它們屬于技術(shù)術(shù)語。 請勿使用下劃線，連字符或任何其他非字母數(shù)字字符。
• 方法和變量名應(yīng)始終以駝峰形式出現(xiàn)。 適用于首字母縮寫詞。

Examples

• 建議使用的方法名:

  • encodeUsingMd5()
  • getHtml() 替代 getHTML()
  • getJsonResponse() 替代 getJSONResponse()
  • parseXmlContent() 替代 parseXMLContent()

• 建議使用的變量名:

  • var isGoodName
  • var base64Encoder
  • var xmlReader
  • var httpServer

Properties

• Class property names follow the exact same convention except when they are static constants.

• Static class properties that are constants should be all upper-cased. For example:

  • Ext.MessageBox.YES = "Yes"
  • Ext.MessageBox.NO = "No"
  • MyCompany.alien.Math.PI = "4.13"

Declaration

You may use a single method for class creation: Ext.define. Its basic syntax is as follows:

Ext.define(className, members, onClassCreated);

• className: The class name
• members is an object that represents a collection of class members in key-value pairs
• onClassCreated is an optional function callback that is invoked when all dependencies of the defined class are ready and the class itself is fully created. Due to the asynchronous nature of class creation, this callback can be useful in many situations. These will be discussed further in Section IV

Example:

Ext.define('My.sample.Person', {
    name: 'Unknown',

    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },

    eat: function(foodType) {
        alert(this.name + " is eating: " + foodType);
    }
});

var bob = Ext.create('My.sample.Person', 'Bob');

bob.eat("Salad"); // alert("Bob is eating: Salad");

Note: We created a new instance of My.sample.Person using the Ext.create() method. We could have used the new keyword (new My.sample.Person()). However it is recommended to get in the habit of always using Ext.create since it allows you to take advantage of dynamic loading. For more info on dynamic loading see the Getting Started guide

Configuration

There is also a dedicated config property that gets processed by the powerful Ext.Class pre-processors before the class is created. Features include:

• Configurations are completely encapsulated from other class members
• Getter and setter methods for every config property are automatically generated into the class prototype during class creation if methods are not already defined.
• The auto-generated setter method calls the apply method (if defined on the class) internally before setting the value. You may override the apply method for a config property if you need to run custom logic before setting the value. If your apply method does not return a value, the setter will not set the value. The update method (if defined) will also be called when a different value is set. Both the apply and update methods are passed the new value and the old value as params.

For Ext classes that use the configs, you don't need to call initConfig() manually. However, for your own classes that extend Ext.Base, initConfig() still needs to be called.

You can see configuration examples below.

Ext.define('My.own.Window', {
   extend: 'Ext.Component',
   /** @readonly */
   isWindow: true,

   config: {
       title: 'Title Here',

       bottomBar: {
           height: 50,
           resizable: false
       }
   },

   applyTitle: function(title) {
       if (!Ext.isString(title) || title.length === 0) {
           alert('Error: Title must be a valid non-empty string');
       }
       else {
           return title;
       }
   },

   applyBottomBar: function(bottomBar) {
       if (bottomBar) {
           if (!this.bottomBar) {
               return Ext.create('My.own.WindowBottomBar', bottomBar);
           }
           else {
               this.bottomBar.setConfig(bottomBar);
           }
       }
   }
});

/** A child component to complete the example. */
Ext.define('My.own.WindowBottomBar', {
   config: {
       height: undefined,
       resizable: true
   }
});

And here's an example of how it can be used:

var myWindow = Ext.create('My.own.Window', {
    title: 'Hello World',
    bottomBar: {
        height: 60
    }
});

alert(myWindow.getTitle()); // alerts "Hello World"

myWindow.setTitle('Something New');

alert(myWindow.getTitle()); // alerts "Something New"

myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"

myWindow.setBottomBar({ height: 100 });

alert(myWindow.getBottomBar().getHeight()); // alerts 100

Statics

Static members can be defined using the statics config

Ext.define('Computer', {
    statics: {
        instanceCount: 0,
        factory: function(brand) {
            // 'this' in static methods refer to the class itself
            return new this({brand: brand});
        }
    },

    config: {
        brand: null
    }
});

var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');

alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"

Errors Handling & Debugging

Ext JS includes some useful features that will help you with debugging and error handling.

• You can use Ext.getDisplayName() to get the display name of any method. This is especially useful for throwing errors that have the class name and method name in their description:

    throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');
  
  

• When an error is thrown in any method of any class defined using Ext.define(), you should see the method and class names in the call stack if you are using a WebKit based browser (Chrome or Safari). For example, here is what it would look like in Chrome:

  image