lesson4.md

1. Ext.Component

   1. config
      1. id, itemId
      2. margin, padding
      3. width, height, minWidth, minHeight, maxWidth, maxHeight
      4. autoScroll
      5. cls, style, baseCls
      6. border, frame
      7. hidden, hideMode
      8. disabled, disabledCls
      9. autoEl
      10. tpl
      11. stateful, stateId
   2. method
      1. disable(), enable()
   3. custom component
      1. http://docs.sencha.com/extjs/4.2.1/#!/guide/components-section-creating-custom-components

2. Form fields

   1. config
      1. name
      2. fieldLabel, fieldStyle, fieldCls
      3. labelWidth, labelAlign, labelCls, labelStyle, labelSeparator
      4. hideEmptyLabel, hideLabel
      5. readOnly, readOnlyCls, disabled, disabledCls, emptyCls, emptyText, dirtyCls
      6. originalValue, isDirty(), dirtyCls
      7. enforceMaxLength
      8. enableKeyEvents
      9. submitValue
      10. formBind
      11. Validation text & class
          1. vtype
          2. validator
          3. allowBlank
          4. msgTarget
          5. blankText, invalidText, invalidCls
   2. methods
      1. getValue(), getRawValue()
      2. getActiveErrors(), setActiveErrors(), getErrors(), markInvalid()
      3. isValid(), clearInvalid()
      4. checkChange(), checkDirty(), isDirty(), resetOriginalValue()
      5. rawToValue(), valueToRaw()

3. Containers: container, panel, window, form, tab, fieldset, fieldcontainer

   1. config
      1. bubbleEvents
      2. defaults, defaultType
      3. items
      4. layout
   2. method
      1. add(), remove(), removeAll
      2. child(), down()

4. Form

   1. method
      1. getValues()
      2. isDirty(), isValid()
      3. load(), submit(), loadRecord(), getRecord()
      4. getForm()
   2. Basic
      1. getFieldValues(), getValues()
      2. findField(), getFields()
      3. isDirty(), isValid()
      4. checkDirty(), checkValidity(), clearInvalid(), markInvalid()
      5. load(), submit(), loadRecord(), getRecord(), setValues()

5. Data Package

   1. Ext.data.Store

      1. fields: name, type
      2. model
      3. each(), getAt()
      4. getCount(), getTotalCount()

   2. Ext.data.Model

      1. fields, idProperty
      2. get()
      3. isModified()
      4. commit(), reject()
      5. validations
      6. validate(), isValid(), dirty

   3. Ext.data.proxy.Proxy

      1. url
      2. api
      3. timeout: global setting
      4. extraParams
      5. limitParam, pageParam etc.
      6. reader

   4. Ext.data.reader.Json

      1. successProperty, totalProperty, root

   5. Sample

       me.store = new Ext.data.Store({
       	proxy: {
       		type: 'ajax',
           	url: 'path/getUserAccountBalances',
       	    extraParams: {
       		    userId: me.getUserId()
       		},
       		reader: {
       			type: 'json',
           		root: 'items'
       	    }
       	},
       	fields: [
       		{name: 'CURRENCY'},
           	{name: 'CURRENCYBALANCE', type : 'float'},
       	    {name: 'DEFAULT', type: 'boolean'}
       	],
       	listeners: {
       		load: function(s, records, success) {
       		    
           	}
       	}
       });
      

6. Grid

   1. column
      1. text, dataIndex, renderer
   2. viewConfig
      1. trackOver, enableTextSelection, markDirty, stripeRows

7. ComboBox

   1. store
   2. listConfig
      1. width, height, minWidth, maxWidth, minHeight, maxHeight
      2. itemSelector, getInnerTpl

8. View

9. Tree/Time

10. Events

    1. listeners : { }
    2. addListener(), on()
    3. addManagedListener(), mon()
    4. removeListener(), removeManagedListener(), un(), mun()
    5. fireEvent(), fireEventArgs()

11. Component Query

    1. CSS selector
       1. http://www.w3schools.com/cssref/css_selectors.asp
       2. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
       3. http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
    2. method
       1. container: down(), child(), query()
       2. Component: up(), nextSibling(), nextNode(), previousSibling(), previousNode()
    3. syntax
       1. itemId: #
       2. xtype: xtype
       3. property: xtype[property=""]
       4. http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.ComponentQuery
    4. performance
       1. do not use it in a loop
       2. cache the result

12. SenchaMVC

13. resources

    1. http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/