RSS

Category Archives: Sencha

ExtJs: radio buttons are not clickable sometimes…

Radio buttons

Just came across this issue when ExtJs radio buttons are not selectable for some reason.

My initial setup was the following:

{ xtype: 'radiogroup', columns: 1,  fieldLabel: "Languages", autoWidth:true, 
  items: [
      {boxLabel: "Default", name: 'language', inputValue: 'D', id: 'defaultLang', checked: true},
      {boxLabel: "Order", name: 'language', inputValue: 'C', id: 'orderLang'},
      {boxLabel: "Other", name: 'language', inputValue: '0', id: 'otherLang'}
  ] 						
}    					

It’s very basic and I spent hours trying to figure out why only last option gets selected no matter what radio button I click.

Long story short – value of “0” in the last radio button causes the issue. There must be something with mixing numeric and non-numeric types of values. And numeric are give the priority.

So changing the value to the same type as other values fixes the issue.

P.S. fond the same issue addressed on StackOverflow http://stackoverflow.com/questions/5465859/extjs-radio-group-can-only-click-on-one-item

Advertisements
 
Leave a comment

Posted by on August 12, 2011 in Sencha

 

Tags: , , ,

EditorGridPanel drag and drop

sm.isSelected is not a function error message

If you are wondering why you are getting “sm.isSelected is not a function” error when trying to drag and drop records from EditorGridPanel then the answer is… CellSelectionModel.

Drag and drop in ExtJs works with RowSelectionModel but EditorGridPanel – with CellSelectionModel by default (which doesn’t implement isSelected method).

The quick and easy solution is to use RowSelectionModel instead (if it’s acceptable for you of course).

sm: new Ext.grid.RowSelectionModel()

Otherwise you most probably will have to override ExtJs implementation of drag and drop for EditorGridPanel.

 
1 Comment

Posted by on May 4, 2011 in Sencha

 

Tags: , ,

Auto height and window shadow

Incorrect window shadow

The issue seems to appear when window autoHeight property is set to true. Which means that window height will be adjusted according to window contents height.But it starts misbehaving if you dynamically change the window contents – resize or add/delete new items.

Looks like the easiest solution is to call syncShadow() method on your window object.

    Ext.getCmp('myWindow').syncShadow();

The best place to stick it is after you modified the child controls or on window resize event.

* I haven’t tried replicating this issue in ExtJS 4.0.0 but it appeared on my 3.3.0 and prior.

 
Leave a comment

Posted by on April 28, 2011 in Sencha

 

Tags: , , ,

EditorGridPanel not firing afteredit event if value didn’t change

EditorGridPanel

If you are using EditorGridPanel plugin for ExtJS grids chances are you want to know when user starts and finishes editing a cell.

There is no problem to find out when edit starts with beforeedit event. But afteredit event ExtJS provides for capturing edit completion only fires if the content of the cell has changed. But if the user leaves the cell without modifying it there is no way of capturing this with afteredit.

But we can always override ExtJS internal methods to achieve required functionality ;). In this case we extend EditorGridPanel’s onEditComplete function:

Ext.grid.EditorGridPanel.prototype.onEditComplete = function(ed, value, startValue)
{
        this.editing = false;
        this.lastActiveEditor = this.activeEditor;
        this.activeEditor = null;

        var r = ed.record,
            field = this.colModel.getDataIndex(ed.col);
        value = this.postEditValue(value, startValue, r, field);
        if(this.forceValidation === true || String(value) !== String(startValue)){
            var e = {
                grid: this,
                record: r,
                field: field,
                originalValue: startValue,
                value: value,
                row: ed.row,
                column: ed.col,
                cancel:false
            };
            if(this.fireEvent("validateedit", e) !== false && !e.cancel /* && String(value) !== String(startValue) */){
                r.set(field, e.value);
                delete e.cancel;
                this.fireEvent("afteredit", e);
            }
        }
        this.view.focusCell(ed.row, ed.col);
};  
 
Leave a comment

Posted by on April 15, 2011 in misc, Sencha

 

Tags: , ,

ExtJS: multi-line grid headers and cells

By default ExtJS grids don’t allow text in headers and cells to wrap by setting white-space:nowrap in ExtJS stylesheet.

No cell text wrap

So to make header text wrap override the default css with:

.x-grid3-hd-inner { white-space: normal; }

And for the cells:

.x-grid3-cell-inner { white-space: normal; }

For both:

.x-grid3-hd-inner, .x-grid3-cell-inner { white-space: normal; }

Cell text wrap

 
2 Comments

Posted by on April 1, 2011 in Sencha

 

Tags: , ,

Show tab with invalid controls when validating the form

ExtJs Tab Panel

Wouldn’t it be nice if in addition to highlighting invalid controls, FormPanel makes the tab that contains invalid control active? If you think it’s handy too then the following code will help you to achieve it.

What we need to do is overrite isValid() method of the BasicForm which is the parent of all other form components, such as FormPanel for example.

Ext.custom.FormPanel = Ext.extend(Ext.form.FormPanel, 
{

Check if form has a Tab Panel as it’s child. For this filter form’s controls by their xtype. See ExtJs documentation function for more details on filterBy function.

	
findChildTabPanel: function()
{
	var tabPanels = this.items.filterBy(function(c){ return c.getXType()=='tabpanel'; });
	if (tabPanels.items[0]) return true;
	return false;
},
overriteIsValid: function()
{
	var self = this;
	Ext.override(Ext.form.BasicForm, 
	{
		isValid: function(e) {
			var valid = true;
			var firstInvalidField = null;
					
			self.getForm().items.each(function(f)
			{
				if(!f.validate())
				{
					valid = false;
					f.markInvalid();
					if (firstInvalidField == null) firstInvalidField = f;
				}
			});
				
			if (firstInvalidField) 
			{
				var tab; 
				var tabbedPanel = firstInvalidField.findParentBy(
					function(p)
   			         {
			             if (p.isXType('tabpanel'))
			             {
			               	return true; 
			             }
			             tab = p;
			        });
			       if ((!Ext.isEmpty(tab,false)) && 
                   (!Ext.isEmpty(tabbedPanel,false)
                   { 
		              tabbedPanel.activate(tab.getId());  
		           } 
			}
			return valid;
		}
	});
},

Check if the form contains Tab Grid then override IsValid() method during component initialisation.

initComponent: function()
{
	Ext.taopix.FormPanel.superclass.initComponent.apply(this,arguments);
	
        this.on('afterlayout', function() { 
                if (this.findChildTabPanel()) this.overriteIsValid(); 
        }, this);
}
	
});

And register xtype type for new component:

Ext.reg('taopixFormPanel', Ext.taopix.FormPanel );

You can see working example here.

 
Leave a comment

Posted by on February 7, 2011 in Sencha

 

Tags: , , ,

ExtJS: GroupTabs hide expand/collapse icon on items with no child elements

By default in ExtJS (version 3.0.3) GroupTabs shows an expand/collapse icon even if group doesn’t have any subitems. Like on this screenshot:

grouptabs

If you want to change this behavior and hide an icon you will have to make a change or override onRender method of GroupTabPanel (GroupTabPanel.js).

This is a piece of modified onRender method:


/*if (!this.groupTpl) { */
      	var tt;
       	for (i = 0; i < this.items.length; i++)
       	{
       		if (this.items.items[i].items.length < 2)
       		{
       			tt = new Ext.Template(
      				'<li class="{cls}" id="{id}">',
       				'<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
       				'<span>{text}</span></a>',
       				'</li>'
       			);
       		}
       		else
       		{
       			tt = new Ext.Template(
       				'<li class="{cls}" id="{id}">',
       				'<a class="x-grouptabs-expand" onclick="return false;"></a>',
       				'<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
       				'<span>{text}</span></a>',
       				'</li>'
       			);
       		} 
       		tt.disableFormats = true;
           	tt.compile();
            	Ext.ux.GroupTabPanel.prototype.groupTpl = tt;

            	this.initGroup( this.items.items[i], i);
       	}
        	
/*
        var tt = new Ext.Template(
                '<li class="{cls}" id="{id}">', 
                '<a class="x-grouptabs-expand" onclick="return false;"></a>', 
                '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
                '<span>{text}</span></a>', 
                '</li>'
        );
        tt.disableFormats = true;
        tt.compile();
        Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
}
this.items.each(this.initGroup, this);
*/

As a result you should get something like this:

grouptabs

 
1 Comment

Posted by on February 4, 2011 in Sencha

 

Tags: , ,

 
%d bloggers like this: