ExtJS Essays Memo

Point1.

Ext.define is used to create a class. Can be used to create a custom class that, in this custom class, can inherit the component class from Ext with extend.

Example:

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 ',/** * @pr  Ivate * Search Value initialization */searchvalue:null,/** * @private * The row indexes where Matching strings is found. (used by previous and Next buttons) */indexes: [],/** * @private * The row index of the first sear     CH, it could change if Next or Previous buttons is 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:m                 E.ontextfieldchange, Scope:this, buffer:100} }}, {xtype: ' button ', Text: ' < ', tooltip: ' Find Pre Vious Row ', Handler:me.onPreviousClick, Scope:me},{xtype: ' But                Ton ', Text: ' > ', tooltip: ' Find Next Row ', Handler:me.onNextClick,          Scope:me}, '-', {      Xtype: ' checkbox ', hidelabel:true, margin: ' 0 0 0 4px ', handler:me.re Gexptoggle, 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 Textfi        Eld 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:/<[^>] *&GT;/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, iconc      LS: ' X-status-error '          });            return null;            }//This is stupid if (value = = = ' ^ ' | | value = = = ' $ ') {return null;    }} return value;     },/** * Finds all strings this 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 = cell                        Html.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-val             ID '}); }}//No results found if (me.currentindex = = = null) {Me.getselectionmodel (). Deselec         TAll ();     }//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] | | m            E.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 is to instantiate a class as an object

Example:

Ext.Loader.setConfig ({enabled:true}); Ext.Loader.setPath (' Ext.ux ', ' ... /ux/'); Ext.require ([' ext.grid.* ', ' ext.data.* ', ' ext.util.* ', ' Ext.tip.QuickTipManager ', ' Ext.ux.LiveSearchGridPa ' Nel ']);            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&am P T Inc. ', 31.61, -0.48, -1.54, ' 9/1 12:00am ', [' Boeing Co. ', 75. (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 Corpo  Ration ', 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 Corpor   Ation ', 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.[' 9/1 12:00am '], [' Merck & Co., Inc. ', 40.96, 0.41, 1.01, ' 9/1 12:00am '], [' MICR Osoft Corporation ', 25.84, 0.14, 0.54, ' 9/1 12:00am '], [' Pfizer Inc ', 27.9        6, 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 ', [' Technologies Corporation ', 63.26, 0.55, 0.88, ' 9/1 12:0 0AM '], [' 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 ', D                 Ataindex: ' Price '}, {text: ' Change ', width:75,                Sortable:true, Dataindex: ' Change ', renderer:change}, { Text: '% change ', width:75, Sortable:true, Dataind                 Ex: ' Pctchange ', Renderer:pctchange}, {text: ' Last Updated ',        Width:85, Sortable:true, dataindex: ' Lastchange '} ], height:350,       width:600, title: ' Live Search Grid ', Renderto: ' Grid-example ', Viewconfig: {stri (Perows:true});});

Point3.

As for prototype, consider it an object, not a class.

JS processing mechanism: In the processing of "." Either the property or method of the object referenced by "[key]" is now found in its own instance object, which is returned if it is not found, and is then searched from the prototype instance object.

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

ExtJS Essays Memo