Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

Extjs Radio button issue

In one of my application, I faced one issue with radio button.

My requirement was in menu list [which consist of checkbox and radio button], when I marked as checked, group title tooltip should give list of checked menu.

It work fine in case of checkbox, when ever I checked/unchecked any check box, it update the tooltip list.

But in case of radio button, it always display the last checked message list [one radio button by default checked]

By going through the radio button default behavior I got following details:

• Radio was built as a subclass of Checkbox
• When you turn a checkbox on/off, the checkbox received a DOM event because they were clicked
• But in radio button this is not the case. The previously active radio does not receive a DOM event when you toggle between another radio within the radio group even though it was just turned off.
• Since the old radio never receives an event the this.checked variable which Ext maintains becomes state at true. Therefore the next time it is clicked, both the dom and this.checked are already in agreement and no event will be fired.

Since we don't have an event for the old radio we need to find a way to retrieve the radio and set its checked state properly.

So I did following changes:

• Added onClick method for radio
• Find the current node which clicked
• Find the parent node of clicked node
• Check for the group id [As these where under the specific group]
• Iterate through each child node for the parent node.
• When the filterId is same as clicked filterId set checked to true else false

Clicked event

onClick: function(e, el) {

var t;

if (t = e.getTarget('input[type=radio]')) {

this.radioChange(e, this.node);

}

}

Radio Change Handling

radioChange: function(e, n) {

var currentNodeId = n.attributes.filterId;

var filter = n.parentNode;

// check the selected and uncheck others

if(filter.attributes.filterId === 'radiogroup') { // radiogroup is groupId

filter.eachChild(function(filterChild) {

if(filterChild.attributes.filterId==currentNodeId)

filterChild.attributes.checked = true;

else

filterChild.attributes.checked = false;

});

}

this.node.getOwnerTree().setDirty(); //

}

Other way :
http://extjs.com/forum/showthread.php?t=13247
http://extjs.com/forum/showthread.php?t=7194

Why Extjs?

There are many JavaScript framework available. So definitely before selecting ExtJs we like to know Why Extjs?

• Ext is a cross browser JavaScript framework that allows for the creation of RIA (Rich Internet Applications).
  

• Ext uses web 2.0 methods, i.e. ajax, which has built in parsers for JSON, XML, text formats.
  

• Ext allows for the creation of Rich UI with simple notation. Which result in rapid deployment of interfaces and only to focus on getting the data to the front end.
  

• At last but not the least, I like most about this is it allow you to Customize [extend/override] the component as per the requirement without changing basic nature of JavaScript.

finally, I must say that Ext is a great product with a bright future.

Xtype in extjs

symbolic name given to class xtype.

List of all xtypes with the matching class.        
    

xtype            Class
 -------------    ------------------

 In General
 ---------------------------------------

 box              Ext.BoxComponent
 button           Ext.Button
 colorpalette     Ext.ColorPalette
 component        Ext.Component
 container        Ext.Container
 cycle            Ext.CycleButton
 dataview         Ext.DataView
 datepicker       Ext.DatePicker
 editor           Ext.Editor
 editorgrid       Ext.grid.EditorGridPanel
 grid             Ext.grid.GridPanel
 paging           Ext.PagingToolbar
 panel            Ext.Panel
 progress         Ext.ProgressBar
 propertygrid     Ext.grid.PropertyGrid
 slider           Ext.Slider
 splitbutton      Ext.SplitButton
 statusbar        Ext.StatusBar
 tabpanel         Ext.TabPanel
 treepanel        Ext.tree.TreePanel
 viewport         Ext.Viewport
 window           Ext.Window
 
 Toolbar components
 ---------------------------------------
 toolbar          Ext.Toolbar
 tbbutton         Ext.Toolbar.Button
 tbfill           Ext.Toolbar.Fill
 tbitem           Ext.Toolbar.Item
 tbseparator      Ext.Toolbar.Separator
 tbspacer         Ext.Toolbar.Spacer
 tbsplit          Ext.Toolbar.SplitButton
 tbtext           Ext.Toolbar.TextItem
 
 Form components
 ---------------------------------------
 form             Ext.FormPanel
 checkbox         Ext.form.Checkbox
 combo            Ext.form.ComboBox
 datefield        Ext.form.DateField
 field            Ext.form.Field
 fieldset         Ext.form.FieldSet
 hidden           Ext.form.Hidden
 htmleditor       Ext.form.HtmlEditor
 label            Ext.form.Label
 numberfield      Ext.form.NumberField
 radio            Ext.form.Radio
 textarea         Ext.form.TextArea
 textfield        Ext.form.TextField
 timefield        Ext.form.TimeField
 trigger          Ext.form.TriggerField