Extjs學習（1）：類，佈局，容器和組件的概念

1. 命名規範

//Classes
MyCompany.form.action.AutoLoad
MyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser

//Source Files
Ext.form.action.Submit is stored in path/to/src/Ext/form/action/Submit.js

//Acceptable method names
getJsonResponse() instead of getJSONResponse()

//Acceptable variable names
var base64Encoder
var isGoodName

//Properties
Ext.MessageBox.YES = "Yes"
MyCompany.alien.Math.PI = "4.13"

2. 聲明

Ext.define(className, members, onClassCreated);

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");

3. 配置

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
   }
});

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

4. 靜態聲明：

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"

5. 錯誤處理和調試

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

    使用瀏覽器調試

    

6. 佈局和容器

    1）容器Container

    

Ext.create('Ext.panel.Panel', {        //Panel是最經常使用的容器
    renderTo: Ext.getBody(),
    width: 400,
    height: 300,
    title: 'Container Panel',
    items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            width: '75%'
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            width: '75%'
        }
    ]
});

    2）佈局：

    爲容器指定佈局（管理組件）

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Container Panel',
    layout: 'column',
    items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            columnWidth: 0.5
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            columnWidth: 0.5
        }
    ]
});

    防止自動佈局，手動觸發佈局：suspendLayout

    計算全部的容器組件正確的大小和位置，並更新DOM：updateLayout

var containerPanel = Ext.create('Ext.panel.Panel', {        //容器佈局
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Container Panel',
    layout: 'column',
    suspendLayout: true // Suspend automatic layouts while we do several different things that could trigger a layout on their own
});

// Add a couple of child items.  We could add these both at the same time by passing an array to add(),
// but lets pretend we needed to add them separately for some reason.

containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 1',
    height: 100,
    columnWidth: 0.5
});

containerPanel.add({
    xtype: 'panel',
    title: 'Child Panel 2',
    height: 100,
    columnWidth: 0.5
});

// Turn the suspendLayout flag off.
containerPanel.suspendLayout = false;
// Trigger a layout.
containerPanel.updateLayout();

    爲組件指定佈局：componentLayout  （通常不用，組件都是默認自動佈局）

7. 組件

    

    給容器添加子組件使用容器的：items

    下面實例化兩個Panels經過使用：Ext.create()

var childPanel1 = Ext.create('Ext.panel.Panel', {        //實例化每次都要var一下，很麻煩
    title: 'Child Panel 1',
    html: 'A Panel'
});

var childPanel2 = Ext.create('Ext.panel.Panel', {
    title: 'Child Panel 2',
    html: 'Another Panel'
});

Ext.create('Ext.container.Viewport', {
    items: [ childPanel1, childPanel2 ]
});

    1）使用xtype懶實例化

    每一個組件都會有一個標識：xtype （經過他能夠簡單lazy實例化）

Ext.create('Ext.tab.Panel', {
        renderTo: Ext.getBody(),
        height: 100,
        width: 200,
        items: [
            {
                // Explicitly define the xtype of this Component configuration.
                // This tells the Container (the tab panel in this case)
                // to instantiate a Ext.panel.Panel when it deems necessary
                xtype: 'panel',
                title: 'Tab One',
                html: 'The first tab',
                listeners: {
                    render: function() {
                        Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');
                    }
                }
            },
            {
                // xtype for all Component configurations in a Container
                title: 'Tab Two',
                html: 'The second tab',
                listeners: {
                    render: function() {
                        Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');
                    }
                }
            }
        ]
    });

    2）組件的顯示和隱藏

var panel = Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Test',
        html: 'Test Panel',
        hideMode: 'visibility' // use the CSS visibility property to show and hide this
component
    });

    panel.hide(); // hide the component

    panel.show(); // show the component

    3）浮動的組件

    使用外面的CSS等佈局，不參與容器的佈局：floating

var panel = Ext.create('Ext.panel.Panel', {
    width: 200,
    height: 100,
    floating: true, // make this panel an absolutely-positioned floating component
    title: 'Test',
    html: 'Test Panel'
});

    無需表達他，不用使用：renderTo

    也不用做爲一個子組件添加到容器裏

    全自動

panel.show(); // render and show the floating panel

    其餘配置和方法：draggable，shadow，alignTo()，center()

    4）建立自定義組件

    全部Extjs類的基礎：Ext.Base

    建立一個Ext.Component的子類

Ext.define('My.custom.Component', {
    extend: 'Ext.Component',

    newMethod : function() {
       //...
    }
});

    

    子類實現onRender方法

Ext.define('My.custom.Component', {
    extend: 'Ext.Component',
    onRender: function() {
        this.callParent(arguments); // call the superclass onRender method

        // perform additional rendering tasks here.
    }
});

    這些是能夠實現的template methods：initComponent，beforeShow，onShow，afterShow，onShowComplete，


    onHide，afterHide，onRender，afterRender，onEnable，onDisable，onAdded，onRemoved，onResize，onPosition，

    onDestroy，beforeDestroy，afterSetPosition，afterComponentLayout，beforeComponentLayout。

    ①通常的趨勢是繼承：Ext.panel.Panel


• Border

• Header

• Header tools

• Footer

• Footer buttons

• Top toolbar

• Bottom toolbar

• Containing and managing child Components

    ②若是UI組件不包含其餘組件，若是隻是封裝一個HTML表單，能夠繼承：Ext.Component

Ext.define('Ext.ux.Image', {
    extend: 'Ext.Component', // subclass Ext.Component
    alias: 'widget.managedimage', // this component will have an xtype of 'managedimage'

    autoEl: {
        tag: 'img',
        src: Ext.BLANK_IMAGE_URL,
        cls: 'my-managed-image'
    },

    // Add custom processing to the onRender phase.
    // Add a 'load' listener to the element.
    onRender: function() {
        this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
        this.callParent(arguments);
        this.el.on('load', this.onLoad, this);
    },

    onLoad: function() {
        this.fireEvent('load', this);
    },

    setSrc: function(src) {
        if (this.rendered) {
            this.el.dom.src = src;
        } else {
            this.src = src;
        }
    },

    getSrc: function(src) {
        return this.el.dom.src || this.src;
    }
});

    使用：

var image = Ext.create('Ext.ux.Image');

Ext.create('Ext.panel.Panel', {
    title: 'Image Panel',
    height: 200,
    renderTo: Ext.getBody(),
    items: [ image ]
});

image.on('load', function() {
    console.log('image loaded: ', image.getSrc());
});

image.setSrc('http://www.sencha.com/img/sencha-large.png');

    ③若是UI組件包含其餘組件，但不使用之前說起的Panel附加功能，能夠繼承：Ext.container.Container    

    ，Ext.layout.container.Container

    附加template methods：onBeforeAdd，onAdd，onRemove，beforeLayout，afterLayout

    ④若是UI組件必須須要header, footer, 或 toolbars，能夠繼承：Ext.panel.Panel

    附加的template methods：afterCollapse，afterExpand，onDockedAdd，onDockedRemove