Ext JS - Hello World

時間 2019-11-21

原文原文鏈接

WELCOME TO EXT JS

這個嚮導提供了一個基本的Ext JS介紹。咱們將會以一個很是簡單的「hello world」例子來展開討論。咱們將以code是如何在Ext JS中組織的來開始。這個嚮導同時也包含了許多其餘有價值的資源，因此儘量多看幾回以保證你成功的入門Ext JS！ javascript

Hello World

開始使用Ext JS5是很是簡單的！像以下展現的同樣簡單地建立一個index.html 文件其中引用的JavaScript 和CSS文件都是從咱們的CDN引入的： css

<!DOCTYPE html>
<html>
    <head>
        <title>Editor Preview</title>
        <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/beta/ext-5.0.0.736/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
        <script type="text/javascript" src="http://cdn.sencha.com/ext/beta/ext-5.0.0.736/build/ext-all.js"></script>      
        <script type ="text/javascript" src="app.js"></script>
    </head>
    <body></body>
</html>

其餘如jQuery或者 AngularJS涉及描述性的HTML標記，Ext JS使用了不一樣的方法。你要寫特定的JavaScript和組織咱們的內部類型系統。你能夠參考咱們下面的代碼結構例子。 html

Ext.create('Ext.Panel', {
     renderTo     : Ext.getBody(),
     width        : 200,
     height       : 150,
     bodyPadding  : 5,
     title        : 'Hello World',
     html         : 'Hello <b>World</b>...'
 });

讓咱們合併上面的Panel對象到你包含到index.html文件頭中的空白app.js文件中。如今，若是你簡單的增長上面的代碼到script表單集中，它會失敗由於Extjs框架並無徹底加載。因此咱們必須使用Application Class’s launch() 函數。它會使框架就緒來使用。 java

咱們須要作的就是把上面的代碼放入到Ext.app launch() 函數中。編程

app.js文件最後將會看起來這樣： api

Ext.application({
    name   : 'MyApp',

    launch : function() {

       Ext.create('Ext.Panel', {
            renderTo     : Ext.getBody(),
            width        : 200,
            height       : 150,
            bodyPadding  : 5,
            title        : 'Hello World',
            html         : 'Hello <b>World</b>...'
        });

    }
});

當你刷新你的頁面的時候，你將會看到Panel顯示：

這個例子說明開始使用Ext JS5有多麼容易。這裏充滿了無限的可能！你能夠經過許多例子查看Ext JS5的能力。他們爲框架的工具盒能力提供了一個很是詳細的介紹。

ext-all.js

你得注意在index.html中引入的 ext-all.js 和 ext-theme-neptune.css包含了整個Ext JS框架。這在實驗環境是合適的，可是你將會須要編譯一個框架的子集來用於生產環境。這會建立一個更小更迷你的基本的Ext JS依賴文件僅僅包含了你須要的類。

你能夠查看開始嚮導來更完全的瞭解如何使用 Ext JS 5 和 Sencha Cmd 建立一個應用。

繼續閱讀更多關於Ext JS5的核心內容。

What is Ext JS?

Ext JS 5 是一個提供你所有工具來建立一個跨平臺應用的JavaScript應用框架。Ext JS5支持全部的如今瀏覽器，從IE8到最新的Chrome和全部其中間的版本。

Ext JS 5 是一個面向對象的，類型爲基礎的類庫，這意味着它容許你的應用適應從一我的到一整個公司團隊。讓咱們細分一些概念，萬一你不熟悉這些技術也能夠很容易的理解。

Object Oriented Programming

面向對象編程（OOP）是一個模塊化的，可重複使用的方式創建你的代碼的方法。它同時也使你的代碼比許多其餘的使用單文件編寫的 js類庫具備更好的可維護性。瀏覽器

相比於編寫一個巨大的程序，一個程序能夠被拆分紅許多可鏈接的部分，最終，使一切變的更容易來維護和伸縮。架構

閱讀更多關於basics of OOP. app

Classes and Objects

OOP的關鍵概念包含了類和對象。一個類是一個應用中元素的抽象定義。這是一個基本等級「物」的簡單的抽象。這個類也許接着會被實例化成一個對象。同時，這個對象包含了這個抽象類的全部信息，還有其餘拓展的部分。

讓咱們建立另外一個例子來演示Ext JS的類型系統。咱們將一樣以 index.html 和 app.js 文件開始。

咱們會定義一個類來代替建立一個對象。

咱們像下面同樣自定義一個面板：

Ext.define('MyApp.MyPanel', {
            extend : 'Ext.Panel',
            title  : 'Hello World',
            html   : 'Hello <b>World</b>...'
        });

正如你看到的，咱們定義了一些東西叫作‘My Panel’，它拓展了Ext JS的Panel 類，Ext.Panel。如今咱們可使用這個來當作模板來建立一個新的MyApp.MyPanel實例。

也許咱們須要兩個面板，它們之間惟一的差異只有裏面的文本內容。咱們能夠建立兩個My Panel的實例和分別配置不一樣的文本內同和html配置。你在app.js中的代碼看起來會是這樣的:

Ext.define('MyApp.MyPanel', {
            extend      : 'Ext.Panel',
            width       : 200,
            height      : 150,
            bodyPadding : 5
        });

        Ext.application({
            name   : 'MyApp',

            launch : function() {

                Ext.create('MyApp.MyPanel', {
                    renderTo :Ext.getBody(),
                    title    : 'My First Panel',
                    html     : 'My First Panel'
                });

                Ext.create('MyApp.MyPanel', {
                    renderTo : Ext.getBody(),
                    title    : 'My Second Panel',
                    html     : 'My Second Panel'
                });
            }
        });

像咱們看到的那樣，這個功能讓你重用的基本的代碼可是仍然能夠建立你須要的改變。這只是一個簡單的例子，拓展Ext JS 類是一個幫助你建立乾淨和可維護的代碼的很是強大的機制。框架

你能夠閱讀更多關於咱們的內部類型系統。

注意：這裏的單文件組織代碼的方式只是爲了舉個例子。若是你想要寫一個真正的應用，你必須把你的視圖層放在不一樣的MyApp.view.MyPanel文件中，你的建立動做要放置在controller或者launch()方法中。

閱讀更多關於應用架構 here.

Beyond Hello World

你已經看到在Ext JS中建立一個簡單的「hello world」例子所須要的代碼。若是你是個新手，可能須要你稍微的瞭解下它的語法來建立這樣簡單的東西。就是說，讓咱們看看Ext JS中的grid，你能夠看到最真實的狀況下，利用少許的語法來建立真正使人印象深入的輸出。

在這裏例子，咱們將產生一個Ext.grid.Panel，其中包含了行內編輯和一組數據。爲了看到這個例子，用下面的代碼簡單的替換app.js文件中的代碼：

Ext.application({
    name   : 'MyApp',

    launch : function() {

        Ext.widget({
            renderTo : Ext.getBody(),
            xtype    : 'grid',
            title    : 'Grid',
            width    : 650,
            height   : 300,
            plugins  : 'rowediting',
            store    : {
                fields : [ 'name', 'age', 'votes', 'credits' ],
                data   : [
                    [ 'Bill', 35, 10, 427 ],
                    [ 'Fred', 22, 4, 42 ]
                ]
            },
            columns: {
                defaults: {
                    editor : 'numberfield',
                    width  : 120
                },
                items: [
                    { text: 'Name', dataIndex: 'name', flex: 1, editor: 'textfield' },
                    { text: 'Age', dataIndex: 'age' },
                    { text: 'Votes', dataIndex: 'votes' },
                    { text: 'Credits', dataIndex: 'credits' }
                ]
            }
        })
    }
});

而後咱們刷新瀏覽器，將會看到：

你這裏看到的是一個全功能的Ext JS grid。這個grid有可排序的，可拖拽的，可移動的列。這些列能夠經過grid頭上的下拉菜單的列選項來顯示和隱藏。這個grid同時也包含了一個能夠經過雙擊任何列來激活的列編輯器。這些列包含帶幫助和友好的用戶交互的可編輯的數字和文件行。

真正使人激動的事事你用大約30行的代碼就得到了這些。大多數這些功能都是grid默認提供的，意味着更少的時間來得到更多的功能。惟一添加到這個例子的就是行編輯器，而這也只須要一行配置而已。

這應該能說明一旦你熟悉了語法Ext JS能節約你多少時間。最後，你節約了時間而且用戶在你的應用裏得到了豐富的體驗。

注意：在一個真實世界的例子中，你將使用分離的store和model來填充你的grid數據。

閱讀更多關於 Ext.data.Store 和 Ext.data.Model 在咱們的應用嚮導中.