一、认识官方文档

文档传送门

官方文档首页

1.官方例子

从首页导航栏点击Examples 进入官网demo页面

• 进入Dashboard精美项目展示
• 进入组件demo展示

官方demo

Dashboard

组件demo

右侧源码，左侧组件展示

2.根据dashboard模板创建自己的项目

自己在搭建项目的时候可以根据Admin Dashboard 的源码创建新的工程模板
根据自己实际项目情况选用组件
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 给出的命令行细节是可以根据模板生成对应的项目的

//覆盖默认的App生成模板采用制定模板进行工程创建
sencha -sdk /path/to/ext7 generate app classic -s /path/to/ext7/templates/admin-dashboard MyApp /path/to/my-app

注意：当然这样生成的项目需要修改配置文件才行
修改项目根目录下的app.json文件 ,找到output配置项

    "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
        }
    },

进入项目根目录执行

sencha app watch 

打开本地访问路径：大功告成

3.Extjs核心内容

在官网Api导航栏树形图中找到核心内容节点
Core Concepts

类系统

1.类系统的目的：

• 代码相似度高，可识别度高
• 快速开发，易于调试且易于部署
• 有条理，可扩展和可维护

2.类系统的约定
ext想集成javascript的基于原型的灵活性，又想获取面向对象语言的封装、继承、标准编码约定

• 类名只能包含字母数字字符。 允许使用但不鼓励使用数字，除非它们属于技术术语。 请勿使用下划线，连字符或任何其他非字母数字字符。 例如：
  MyCompany.useful_util.Debug_Toolbar 不建议使用
  MyCompany.util.Base64 建议使用
• 最好使用包命名和驼峰命名法，类名应该大写

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

源文件

类的名称直接映射到存储它们的文件路径。 因此，每个文件只能有一个类

• 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

方法和变量

• 与类名类似，方法和变量名只能包含字母数字字符。 允许使用但不鼓励使用数字，除非它们属于技术术语。 请勿使用下划线，连字符或任何其他非字母数字字符。
• 方法和变量名应始终以驼峰形式出现。 适用于首字母缩写词。

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