Docstoc

extjs_overview

Document Sample
extjs_overview Powered By Docstoc
					                                Extjs Overview




All Materials Copyright Magenta Corporation Ltd.   Page 1
      Why we use Extjs?



             We have several projects in
             Magenta which have already
           used or plan to use Extjs. Why we
                      chose extjs?




All Materials Copyright Magenta Corporation Ltd.   Page 2
      Why we use Extjs?
           The chart below shows statistics of distribution 10 most popular JS Libraries




All Materials Copyright Magenta Corporation Ltd.                                           Page 3
      Why we use Extjs?
           The chart below shows statistics of distribution 10 most popular JS Libraries




           Where is Extjs on this chart?

All Materials Copyright Magenta Corporation Ltd.                                           Page 4
      Why we use Extjs?

                JQuery29.92%
                                                   SuperFish0.73%               ie7-js0.14%
                SWFObject13.12%
                                                   cufón0.59%                   CSS Browser Selector0.14%
                Adobe Active Content6.74%
                                                   JCarousel Lite0.55%          IE Update0.14%
                Prototype5.5%
                                                   JSON0.54%                    SoThink HTML Menu0.14%
                Facebook Connect5.19%
                                                   Flash Detect0.48%            Lytebox0.13%
                Yahoo User Interface4.72%
                                                   Dojo Toolkit0.46%            Highslide0.11%
                script.aculo.us4.01%
                                                   JQuery ScrollTo0.44%         JQuery Preload0.1%
                jQuery UI3.39%
                                                   Shadowbox0.38%               Firebug Lite0.1%
                PNG Fix3.11%
                                                   Javascript Tooltips0.37%     Direct Web Remoting0.1%
                MooTools2.67%
                                                   SWF Address0.36%             Bit.ly Javascript API0.1%
                Google JS Api1.76%
                                                   Adobe Spry0.34%              Extjs 0.09%
                JCarousel1.41%
                                                   Milonic0.32%
                AC_OETags1.3%                                                   HTML 5 Shiv0.09%
                                                   overLIB0.28%
                Flash Object1.03%                                               Prototip0.09%
                                                   BBC Glow0.27%
                JQuery Easing0.93%                                              Hier Menus0.08%
                                                   MM Menu0.27%
                JQuery UI Tabs0.83%
                                                   Style Switcher0.21%
                JQuery Validate0.81%
                                                   Nifty Corners0.2%
                JQuery Dimensions0.77%
                                                   Google Friend Connect0.15%




All Materials Copyright Magenta Corporation Ltd.                                                            Page 5
      Why we use Extjs?

                JQuery29.92%
                                                   SuperFish0.73%               ie7-js0.14%
                SWFObject13.12%
                                                   cufón0.59%                   CSS Browser Selector0.14%
                Adobe Active Content6.74%
                                                   JCarousel Lite0.55%          IE Update0.14%
                Prototype5.5%
                                                   JSON0.54%                    SoThink HTML Menu0.14%
                Facebook Connect5.19%
                                                   Flash Detect0.48%            Lytebox0.13%
                Yahoo User Interface4.72%
                                                   Dojo Toolkit0.46%            Highslide0.11%
                script.aculo.us4.01%
                                                   JQuery ScrollTo0.44%         JQuery Preload0.1%
                jQuery UI3.39%
                                                   Shadowbox0.38%               Firebug Lite0.1%
                PNG Fix3.11%
                                                   Javascript Tooltips0.37%     Direct Web Remoting0.1%
                MooTools2.67%
                                                   SWF Address0.36%             Bit.ly Javascript API0.1%
                Google JS Api1.76%
                                                   Adobe Spry0.34%              Extjs 0.09%
                JCarousel1.41%
                                                   Milonic0.32%
                AC_OETags1.3%                                                   HTML 5 Shiv0.09%
                                                   overLIB0.28%
                Flash Object1.03%                                               Prototip0.09%
                                                   BBC Glow0.27%
                JQuery Easing0.93%                                              Hier Menus0.08%
                                                   MM Menu0.27%
                JQuery UI Tabs0.83%
                                                   Style Switcher0.21%
                JQuery Validate0.81%
                                                   Nifty Corners0.2%
                JQuery Dimensions0.77%
                                                   Google Friend Connect0.15%




                              Extjs is not very popular - is it really good for us?



All Materials Copyright Magenta Corporation Ltd.                                                            Page 6
      Why we use Extjs?

               JQuery29.92%
               SWFObject13.12%
                                                   SuperFish0.73%               ie7-js0.14%
               Adobe Active Content6.74%
                                                   cufón0.59%                   CSS Browser Selector0.14%
               Prototype5.5%
                                                   JCarousel Lite0.55%          IE Update0.14%
               Facebook Connect5.19%
                                                   JSON0.54%                    SoThink HTML Menu0.14%
               Yahoo User Interface4.72%
                                                   Flash Detect0.48%            Lytebox0.13%
               script.aculo.us4.01%
                                                   Dojo Toolkit0.46%            Highslide0.11%
               jQuery UI3.39%
                                                   JQuery ScrollTo0.44%         JQuery Preload0.1%
               PNG Fix3.11%
                                                   Shadowbox0.38%               Firebug Lite0.1%
               MooTools2.67%
                                                   Javascript Tooltips0.37%     Direct Web Remoting0.1%
               Google JS Api1.76%
                                                   SWF Address0.36%             Bit.ly Javascript API0.1%
               JCarousel1.41%
                                                   Adobe Spry0.34%              Extjs 0.09%
               AC_OETags1.3%
                                                   Milonic0.32%
               Flash Object1.03%                                                HTML 5 Shiv0.09%
                                                   overLIB0.28%
               JQuery Easing0.93%                                               Prototip0.09%
                                                   BBC Glow0.27%
               JQuery UI Tabs0.83%                                              Hier Menus0.08%
                                                   MM Menu0.27%
               JQuery Validate0.81%
                                                   Style Switcher0.21%
               JQuery Dimensions0.77%
                                                   Nifty Corners0.2%
                                                   Google Friend Connect0.15%




                   Extjs is not very popular - is it really good for us? – YES



All Materials Copyright Magenta Corporation Ltd.                                                            Page 7
      Extjs widgets
           Windows looks like OS windows – support dragging/resizing/closing




All Materials Copyright Magenta Corporation Ltd.                               Page 8
      Extjs widgets
         Windows looks like OS windows – support dragging/resizing/closing




All Materials Copyright Magenta Corporation Ltd.                             Page 9
      Extjs widgets
           Perfect ajax data grid – support paging/filtration/sorting
                 Easy to load/save data to server in different formats




All Materials Copyright Magenta Corporation Ltd.                         Page 10
      Extjs widgets

           Perfect ajax data grid – support paging/filtration/sorting
                 Easy to customize – plugins/events support




All Materials Copyright Magenta Corporation Ltd.                        Page 11
      What else extjs can do?

           Ajax support
           Dom traversing
           Dom manipulation
           Event Handling
           Selectors
           OOP emulation
           Animation



All Materials Copyright Magenta Corporation Ltd.   Page 12
      Main extjs classes

           Component
           Panel
           Observable
           Store




All Materials Copyright Magenta Corporation Ltd.   Page 13
      Component

           All widgets extends component class
           Provide base widget functions like
                 enable()/disable()
                 show()/hide()
                 addClass()/removeClass()
                 update(data/html) – update content area
                 getEl() return element
                 getId()
                 getXType()
                 render(target)
                 focus()
           XType – alternate way to define component
                 Lazy component creation
                    •   var panel1 = {
                    •   xtype : 'panel',
                    •   title : 'Plain Panel',
                    •   html : 'Panel with an xtype specified'
                    •   }

                    •   var myPanel = new Ext.Panel({
                    •   renderTo : document.body,
                    •   height : 50,
                    •   width : 150,
                    •   title : 'Panel',
                    •   frame : true
           Components are managed by Ext.ComponentMgr
                 get(componentId)
                 registerType(xtype, object) (shorthand Ext.reg())




All Materials Copyright Magenta Corporation Ltd.                     Page 14
      Containers
           handle the basic behavior of
           containing items, namely adding,
           inserting and removing items
           Main functions
                 add()
                 remove()/removeAll()
                 insert()
                 find()/findBy()/findById()/findByType
                 doLayout()
                 get(index or
                 id)/getComponent(component or index
                 or id)
           Main prop
                 Items - MixedCollection of children
                 components




All Materials Copyright Magenta Corporation Ltd.         Page 15
      Panels
           Main panel functions/prop/conf prop
                 load()
                           – panel.load({
                           –     url: 'your-url.php',
                           –     params: {param1: 'foo', param2: 'bar'}, // or a URL encoded string
                           –     callback: yourFunction,
                           –     scope: yourObject, // optional scope for the callback
                           –     discardUrl: false,
                           –     nocache: false,
                           –     text: 'Loading...',
                           –     timeout: 30,
                           –     scripts: false
                           – });
                 body – prop
                 html – conf prop
                 autoLoad – conf prop

           Toolbar and Bottombar
           Panel subclasses
                 TabPanel
                 Window
                 FormPanel
                 GridPanel
                 TreePanel



All Materials Copyright Magenta Corporation Ltd.                                                      Page 16
      Layouts

           Layouts manages by
           containers – there is no need
           to create Layouts directly
           The most useful are Fit, VBox,
           HBox, Border
                 Only VBox, HBox, Border
                 layouts supports margins
           Flex prop of VBox, HBox
           BorderLayout must have
           center item
           Table layout does not support
           resizing of items




All Materials Copyright Magenta Corporation Ltd.   Page 17
      Viewport

           A specialized container representing the viewable application area
           Automaticaly resize itself when browser is resized
           Example of creation
                    •   new Ext.Viewport({
                    •   layout : 'border',
                    •   items : [
                    •   {
                    •   height : 75,
                    •   region : 'north',
                    •   title : 'Does Santa live here?'
                    •   },
                    •   {
                    •   width : 150,
                    •   region : 'west',
                    •   title : 'The west region rules'
                    •   },
                    •   {
                    •   region : 'center',
                    •   title : 'No, this region rules!'
                    •   }
                    •   ]
                    •   });




All Materials Copyright Magenta Corporation Ltd.                                Page 18
      Main Ext static functions


           extend(Function superclass, Object overrides) :
           Function
           get/fly(StringId, HTMLElement) - returns element
                 These methods does not retrieve Components
           getBody() - returns element body
           apply(obj, config, defaults)
           applyIf(obj, config, defaults)
           getCmp(id) – returns component



All Materials Copyright Magenta Corporation Ltd.              Page 19
      GridPanel
           Store
                 contains grid data
           GridView
                 Display store data
           ColumnModel - is a class that models how the columns are organized, sized and displayed for the
           GridPanel widget.
                           –   var colModel = new Ext.grid.ColumnModel([ // 1
                           –   {
                           –   sortable : true,
                           –   header : 'Full Name',
                           –   dataIndex : 'fullName' // 2
                           –   },
                           –   {
                           –   header : 'State',
                           –   dataIndex : 'state'
                           –   }]);


           Selection model
                 Define how user is able to select rows
                           –   var selModel = new Ext.grid.RowSelectionModel({ // 4
                           –   singleSelect : true
                           –   })

           Grid Features: sorting, paging, columns moving / hidding/ resizing
           Example of configuration
                           –   var grid = new Ext.grid.GridPanel({ // 5
                           –   title : 'Our first grid',
                           –   renderTo : Ext.getBody(),
                           –   autoHeight : true,
                           –   width : 250,
                           –   store : store, // 6
                           –   view : gridView,
                           –   colModel : colModel,
                           –   selModel : selModel
                           –   });

           EditableGridPanel – support editing of data
           Alternatives
                 DataView consumes data from a Store and “paints” it on screen using templates
                 ListView lightweight version of gridpanel – does not support ColumnModel



All Materials Copyright Magenta Corporation Ltd.                                                     Page 20
      Stores
           The main purposes of the stores classes are data storage/loading
           Store contains records object which contain a server data directly
                 Store is able to insert/update/add records
           SubClasses
                 ArrayStore: Store + ArrayReader –
                    •   plain js array can be loaded into the array store
                 DirectStore: Store + DirectProxy + JsonReader
                    •   CRUD operation is going thought custom js method
                 GroupingStore: store for grid rows grouping
                 JsonStore: Store + JsonReader
                 XmlStore: Store + XmlReader




All Materials Copyright Magenta Corporation Ltd.                                Page 21
       Stores conf example

    this.tableDataStore = new Ext.data.Store({
        // destroy a store if destroy the component to which the store was bounded
        //autoDestroy: true,
        restful: false,
        autoSave: false,
        autoLoad: {params: {start: 0, limit: One.ErrorReview.PAGE_SIZE } },
        batch: true,
        storeId : 'tableDataStore',
        // load remote data using HTTP
        proxy : new One.PagingHttpProxy({
          method: 'GET',
          prettyUrls: false,
          url: '/oms/rest/ErrorReview/TableData/' + Url.getParam('csvInboundInterfaceName'), // see options parameter for Ext.Ajax.request
          totalUrl: '/oms/rest/ErrorReview/TotalCount/' + Url.getParam('csvInboundInterfaceName'),
          api: {
            destroy : {url: '/oms/rest/ErrorReview/DeleteErrorRow/' + Url.getParam('csvInboundInterfaceName'), method: 'DELETE'},
            update : {url: '/oms/rest/ErrorReview/UpdateErrorRow/' + Url.getParam('csvInboundInterfaceName'), method: 'PUT'}
          }
        }),
        reader: new Ext.data.JsonReader({
          root: 'rows',
          idProperty: 'ErrorSysId',
          totalProperty: 'results',
          // use an Array of field definition objects to implicitly create a Record constructor
          fields: OneExt.getStoreFields(fieldsArr)
        }),
        writer : new Ext.data.JsonWriter({
          encode: false,
          writeAllFields: true,
          listful : true
        }),
        listeners: {
          write: {fn : this.onSuccessWrite, scope : this},
          update: {fn : this.onUpdate, scope : this},
          exception: OneExt.showStoreErrorMsg,
          datachanged: {fn : this.onDataChanged, scope : this}
       }
     });




All Materials Copyright Magenta Corporation Ltd.                                                                                             Page 22
      Proxies

           HttpProxy
                 CRUD operation are processed via ap config or url prop to a
                 server
           DirectProxy
                 CRUD operation is going thought custom js function
           MemoryProxy
                 ctor of MemoryProxy takes data js array as argument and the
                 class does not invoke any requests to a server
           ScriptTagProxy
                 Provide possibility to make request to other domain
                 Other domain server must return valid js text data
           OnePagingHttpProxy




All Materials Copyright Magenta Corporation Ltd.                               Page 23
      Reader conf example
          var myReader = new Ext.data.JsonReader({
            // metadata configuration options:
            idProperty: 'id'
            root: 'rows',
            totalProperty: 'results',
            Ext.data.DataReader.messageProperty: "msg" // The element within the response that provides a user-
          feedback message (optional)

                // the fields config option will internally create an Ext.data.Record
                // constructor that provides mapping for reading the record data objects
                fields: [
                    // map Record's 'firstname' field to data object's key of same name
                    {name: 'name'},
                    // map Record's 'job' field to data object's 'occupation' key
                    {name: 'job', mapping: 'occupation'}
                ]
          });

          {
                results: 2000, // Reader's configured totalProperty
                rows: [       // Reader's configured root
                  // record data objects:
                  { id: 1, firstname: 'Bill', occupation: 'Gardener' },
                  { id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' },
                  ...
                ]
          }




All Materials Copyright Magenta Corporation Ltd.                                                                  Page 24
      Events

          If class should support events this class must extends
          Observable
          Observable methods
                addListener (shorthand on())
                removeListener (shorthand un())
                addEvent()
                fireEvent
                relayEvent(eventName, targetObj)
                enableBubble()
          Ext.EventObject – each event callback have this obj as
          argument
                stopPropagation()
                preventDefault()
                stopEvent()




All Materials Copyright Magenta Corporation Ltd.                   Page 25
      Plugins



           All components support plugins customization
           Plugin is a plain js object with init method, after
           component is initialized the init() method of
           plugin is called
           Plugin can add listeners to component therefore
           customize behavior of the component




All Materials Copyright Magenta Corporation Ltd.            Page 26
      Other widgets



           Menus
           Buttons
           Dialogs
                 Ext.MessageBox.show




All Materials Copyright Magenta Corporation Ltd.   Page 27

				
DOCUMENT INFO