Extjs 隨筆備忘

標籤：

//Point1. 

Ext.define 是用來建立類的。可以用來建立一個自訂的類，在這個自訂類中，可以用extend來繼承Ext中的組件類。

舉例：

Ext.define('Ext.ux.LiveSearchGridPanel', {    extend: 'Ext.grid.Panel',    requires: [        'Ext.toolbar.TextItem',        'Ext.form.field.Checkbox',        'Ext.form.field.Text',        'Ext.ux.statusbar.StatusBar'    ],        /**     * @private     * search value initialization     */    searchValue: null,        /**     * @private     * The row indexes where matching strings are found. (used by previous and next buttons)     */    indexes: [],        /**     * @private     * The row index of the first search, it could change if next or previous buttons are used.     */    currentIndex: null,        /**     * @private     * The generated regular expression used for searching.     */    searchRegExp: null,        /**     * @private     * Case sensitive mode.     */    caseSensitive: false,        /**     * @private     * Regular expression mode.     */    regExpMode: false,        /**     * @cfg {String} matchCls     * The matched string css classe.     */    matchCls: 'x-livesearch-match',        defaultStatusText: 'Nothing Found',        // Component initialization override: adds the top and bottom toolbars and setup headers renderer.    initComponent: function() {        var me = this;        me.tbar = ['Search',{                 xtype: 'textfield',                 name: 'searchField',                 hideLabel: true,                 width: 200,                 listeners: {                     change: {                         fn: me.onTextFieldChange,                         scope: this,                         buffer: 100                     }                 }            }, {                xtype: 'button',                text: '<',                tooltip: 'Find Previous Row',                handler: me.onPreviousClick,                scope: me            },{                xtype: 'button',                text: '>',                tooltip: 'Find Next Row',                handler: me.onNextClick,                scope: me            }, '-', {                xtype: 'checkbox',                hideLabel: true,                margin: '0 0 0 4px',                handler: me.regExpToggle,                scope: me                            }, 'Regular expression', {                xtype: 'checkbox',                hideLabel: true,                margin: '0 0 0 4px',                handler: me.caseSensitiveToggle,                scope: me            }, 'Case sensitive'];        me.bbar = Ext.create('Ext.ux.StatusBar', {            defaultText: me.defaultStatusText,            name: 'searchStatusBar'        });                me.callParent(arguments);    },        // afterRender override: it adds textfield and statusbar reference and start monitoring keydown events in textfield input     afterRender: function() {        var me = this;        me.callParent(arguments);        me.textField = me.down('textfield[name=searchField]');        me.statusBar = me.down('statusbar[name=searchStatusBar]');    },    // detects html tag    tagsRe: /<[^>]*>/gm,        // DEL ASCII code    tagsProtect: '\x0f',        // detects regexp reserved word    regExpProtect: /\\|\/|\+|\\|\.|\[|\]|\{|\}|\?|\$|\*|\^|\|/gm,        /**     * In normal mode it returns the value with protected regexp characters.     * In regular expression mode it returns the raw value except if the regexp is invalid.     * @return {String} The value to process or null if the textfield value is blank or invalid.     * @private     */    getSearchValue: function() {        var me = this,            value = me.textField.getValue();                    if (value === '') {            return null;        }        if (!me.regExpMode) {            value = value.replace(me.regExpProtect, function(m) {                return '\\' + m;            });        } else {            try {                new RegExp(value);            } catch (error) {                me.statusBar.setStatus({                    text: error.message,                    iconCls: 'x-status-error'                });                return null;            }            // this is stupid            if (value === '^' || value === '$') {                return null;            }        }        return value;    },        /**     * Finds all strings that matches the searched value in each grid cells.     * @private     */     onTextFieldChange: function() {         var me = this,             count = 0;         me.view.refresh();         // reset the statusbar         me.statusBar.setStatus({             text: me.defaultStatusText,             iconCls: ''         });         me.searchValue = me.getSearchValue();         me.indexes = [];         me.currentIndex = null;         if (me.searchValue !== null) {             me.searchRegExp = new RegExp(me.searchValue, 'g' + (me.caseSensitive ? '' : 'i'));                                       me.store.each(function(record, idx) {                 var td = Ext.fly(me.view.getNode(idx)).down('td'),                     cell, matches, cellHTML;                 while(td) {                     cell = td.down('.x-grid-cell-inner');                     matches = cell.dom.innerHTML.match(me.tagsRe);                     cellHTML = cell.dom.innerHTML.replace(me.tagsRe, me.tagsProtect);                                          // populate indexes array, set currentIndex, and replace wrap matched string in a span                     cellHTML = cellHTML.replace(me.searchRegExp, function(m) {                        count += 1;                        if (Ext.Array.indexOf(me.indexes, idx) === -1) {                            me.indexes.push(idx);                        }                        if (me.currentIndex === null) {                            me.currentIndex = idx;                        }                        return '<span class="' + me.matchCls + '">' + m + '</span>';                     });                     // restore protected tags                     Ext.each(matches, function(match) {                        cellHTML = cellHTML.replace(me.tagsProtect, match);                      });                     // update cell html                     cell.dom.innerHTML = cellHTML;                     td = td.next();                 }             }, me);             // results found             if (me.currentIndex !== null) {                 me.getSelectionModel().select(me.currentIndex);                 me.statusBar.setStatus({                     text: count + ' matche(s) found.',                     iconCls: 'x-status-valid'                 });             }         }         // no results found         if (me.currentIndex === null) {             me.getSelectionModel().deselectAll();         }         // force textfield focus         me.textField.focus();     },        /**     * Selects the previous row containing a match.     * @private     */       onPreviousClick: function() {        var me = this,            idx;                    if ((idx = Ext.Array.indexOf(me.indexes, me.currentIndex)) !== -1) {            me.currentIndex = me.indexes[idx - 1] || me.indexes[me.indexes.length - 1];            me.getSelectionModel().select(me.currentIndex);         }    },        /**     * Selects the next row containing a match.     * @private     */        onNextClick: function() {         var me = this,             idx;                      if ((idx = Ext.Array.indexOf(me.indexes, me.currentIndex)) !== -1) {            me.currentIndex = me.indexes[idx + 1] || me.indexes[0];            me.getSelectionModel().select(me.currentIndex);         }    },        /**     * Switch to case sensitive mode.     * @private     */        caseSensitiveToggle: function(checkbox, checked) {        this.caseSensitive = checked;        this.onTextFieldChange();    },        /**     * Switch to regular expression mode     * @private     */    regExpToggle: function(checkbox, checked) {        this.regExpMode = checked;        this.onTextFieldChange();    }});

//point2.

Ext.create 是將類執行個體化為對象

舉例：

Ext.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', '../ux/');Ext.require([    'Ext.grid.*',    'Ext.data.*',    'Ext.util.*',    'Ext.tip.QuickTipManager',    'Ext.ux.LiveSearchGridPanel']);Ext.onReady(function() {        Ext.QuickTips.init();            // sample static data for the store    var myData = [        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],        ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],        ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],        ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],        ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],        ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],        ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],        ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],        ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],        ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],        ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],        ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],        ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],        ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],        ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],        ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],        ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],        ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],        ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],        ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],        ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],        ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],        ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],        ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']    ];    /**     * Custom function used for column renderer     * @param {Object} val     */    function change(val){        if(val > 0){            return '<span style="color:green;">' + val + '</span>';        }else if(val < 0){            return '<span style="color:red;">' + val + '</span>';        }        return val;    }    /**     * Custom function used for column renderer     * @param {Object} val     */    function pctChange(val){        if(val > 0){            return '<span style="color:green;">' + val + '%</span>';        }else if(val < 0){            return '<span style="color:red;">' + val + '%</span>';        }        return val;    }                    // create the data store    var store = Ext.create('Ext.data.ArrayStore', {        fields: [           {name: 'company'},           {name: 'price',      type: 'float'},           {name: 'change',     type: 'float'},           {name: 'pctChange',  type: 'float'},           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}        ],        data: myData    });        // create the Grid, see Ext.    Ext.create('Ext.ux.LiveSearchGridPanel', {        store: store,        columnLines: true,        columns: [            {                text     : 'Company',                flex     : 1,                sortable : false,                 dataIndex: 'company'            },            {                text     : 'Price',                 width    : 75,                 sortable : true,                 renderer : 'usMoney',                 dataIndex: 'price'            },            {                text     : 'Change',                 width    : 75,                 sortable : true,                 dataIndex: 'change',                renderer: change            },            {                text     : '% Change',                 width    : 75,                 sortable : true,                 dataIndex: 'pctChange',                renderer: pctChange            },            {                text     : 'Last Updated',                 width    : 85,                 sortable : true,                 dataIndex: 'lastChange'            }        ],        height: 350,        width: 600,        title: 'Live Search Grid',        renderTo: 'grid-example',        viewConfig: {            stripeRows: true        }    });});

//point3.

關於prototype，把它當作一個對象，而非類。

JS的處理機制：在處理“.”或者是"[key]"引用的對象的屬性或者方法時，現在本身的執行個體對象this中尋找，找到即返回；若沒找到，再從prototype執行個體對象中去尋找。

Ext.namespace("gb");Wg = gb;Wg.grid = function (config){}Ext.apply(Wg.grid.prototype, {             init:function(param1,param2,...){             var me = this;}});

Extjs 隨筆備忘