PDA

View Full Version : Which extensions/plugins are not compatible with Ext 3.3?



Condor
13 Oct 2010, 1:28 AM
There are probably several user extensions and plugins that will have issues when used with the newly released Ext JS version 3.3.0.

I'm trying to gather a list of those extensions and plugins in order the either notify the original creator that the extension/plugins needs updating or maybe do the modifications myself if I have some time to spare.

Current list:
Ext.ux.grid.GridHeaderFilters (http://www.sencha.com/forum/showthread.php?41658-Grid-header-filters&) - solved?
Ext.ux.LiveGrid (http://www.ext-livegrid.com/)
Ext.ux.grid.RowAction (http://www.sencha.com/forum/showthread.php?29961-1.0-Grid-RowActions-Plugin)
Ext.ux.grid.FilterRow (http://www.sencha.com/forum/showthread.php?55730-Editors-in-Grid-Header-for-Filter-or-New-Data)

Please post a link to the thread with the extension or plugin and a description of the problems you are experiencing.

Notes:
- First confirm that it is an upgrade issue by checking if the extension/plugin does work correctly with an older Ext 3 version.
- This thread is not meant for issues with Ext 2.x extensions/plugins used in Ext 3.x.

taxidriver
13 Oct 2010, 6:59 AM
Hello Condor,
After trying the plugin Ext.ux.grid.GridHeaderFilters
http://www.sencha.com/forum/showthread.php?41658-Grid-header-filters& ,
in Ext 3.3 seems to have problem. The filter row in gridpanel is not displayed.
However, in Ext 3.2.1 works OK

yura620310
13 Oct 2010, 9:09 AM
livegrid seems to have problem with ext 3.3

Nicolas BUI
14 Oct 2010, 4:45 AM
Hi,

I've just post a solution to the GridHeaderFilters rendering problem here http://www.sencha.com/forum/showthread.php?41658-Grid-header-filters/page8

Simply change from "render" to "viewready" in the plugins source to make it render properly.

gelleneu
15 Oct 2010, 5:56 AM
Ext.ux.maximgb.TreeGrid has Problems with ext 3.3 because of Changes in Ext.grid.GridView and the extend version Ext.ux.maximgb.GridView

kayakyakr
15 Oct 2010, 6:16 AM
Ext.ux.maximgb.TreeGrid has Problems with ext 3.3 because of Changes in Ext.grid.GridView and the extend version Ext.ux.maximgb.GridView

what sort of issues are you seeing? i haven't run into a problem in our implementation of it.

codeart.ch
15 Oct 2010, 4:37 PM
RowActions Plugin don't work too. It throws the follow error "this.config[i].destroy is not a function".

http://www.sencha.com/forum/showthread.php?106404-3.3-Beta-CLOSED-1183-this.config-i-.destroy-not-a-function&p=498771#post498771

gelleneu
16 Oct 2010, 2:41 AM
what sort of issues are you seeing? i haven't run into a problem in our implementation of it.

The error occurs in the following scenario, but works fine in Ext 3.2.1:

Having a store which is restful means, that on every store record "update", "remove" etc., an ajax call connects to the server and write data to the db.

Now, if I selected a row on f.e. tree level 3, change a value in the selected record with record.set('field', 'value'); the record will be updated correctly, but the node in the tree loose it's indent space and it's icon.. Then it's suddenly on position of level 0 but without an icon...

sand123
17 Oct 2010, 8:33 AM
Ext.ux.grid.FilterRow not working, but with 3.2.2 everything was ok
Now in handler OnColumnMove it throws col.filter.getField is not a function on line
var editor = col.filter.getField();

hschaefer123
20 Oct 2010, 3:48 AM
Hi Everybody,
i am using my own filter based on Ext.ux.grid.FilterRow.

My plugin works if changing Line 96 (v0.4)

grid.on("render", this.renderFields, this);
through

view.on("refresh", this.renderFields, this);

The event is fired after the GridView's body has been refreshed.

I also added the line

grid.on("columnresize", this.resizeAllFilterFields, this);
right after

grid.on("resize", this.resizeAllFilterFields, this);

This makes the grid also recalculate filter column width on browser resizing
(i think this line is missing in the origin plugin).

All in all Ext.ux.grid.FilterRow is a great plugin.

Maybe nene did not have the time to fix it.

Hope that helps,
Holger

daddie888
21 Oct 2010, 12:31 AM
Great Holger, thanks, that works.
One problem though, the filterbox loses focus after each key. Has someone a solution for this ?
And can you buffer the keystrokes for a couple of seconds so that not for every key a refiltering happens when you type in a word ?

Peter

darklow
21 Oct 2010, 1:11 AM
Unfortunately Holger's solution for FilterRow didn't work for me (using EditorGridPanel) :/
Filters aren't rendering on Extjs3.3... it worked great on 3.2

hschaefer123
21 Oct 2010, 1:22 AM
Hi Peter,
for that reason i have rewritten my own plugin that uses the key return event for triggering.
replacing

fieldEvents: ["keyup"],
through

fieldEvents: ["specialkey","select"],
to make specialkeys (in this case RETURN) and SELECT (used by combobox) as the default event handlers.
My Focus for this plugin is using it in remote store context. (the default behavior on keychange is good for local stores).

I also added support for highlighting the complete filter row if one filter has been set (backgrouindColor),
and for this reason i added a event 'filterreset' to reset all filter fields from a toolbar action.

My Plugin is a merge of Ext.ux.grid.FilterRow and Ext.ux.grid.GridHeaderFilters.
I took the well structured FilterRow and added the missing features from GridHeaderFilters.
So i have the best of both Worlds ;-)

Furthermore there is support for Ext.ux.DateRangeField that does not work out of the box with FilterRow.
This field saves grid place by allowing selection date ranges without the need using two columns with filterStartdate, filterEndDate.

I do not like the ext default filter functionality, because you need to many click (you have to drill down to many levels).

If you are experienced with ext, the follwing is what you have to change:


constructor: function(config) {
Ext.apply(this, config);

if (!this.field) {
this.field = new Ext.form.TextField({ enableKeyEvents: true });
}
else if (!(this.field instanceof Ext.form.Field)) {
this.field = Ext.create(this.field, "textfield");
}
this.field.style = { margin: '1px 0' };

this.addEvents(
/**
* @event change
* Fired when ever one of the events listed in "events" config
* option is fired by field.
*/
"change"
);
Ext.each(this.fieldEvents, function(event) {
if (event == 'specialkey')
this.field.on('specialkey', this.fireSpecialKeyEvent, this);
else
this.field.on(event, this.fireChangeEvent, this);
}, this);
},

fireSpecialKeyEvent: function(el, ev) {
ev.stopPropagation();
if (ev.getKey() == ev.ENTER) {
this.fireChangeEvent();
}
},

fireChangeEvent: function() {
this.fireEvent("change");
},

Best wishes

hschaefer123
21 Oct 2010, 1:39 AM
Hi Darklow,
i have switched my grid to an editorgrid and tested FilterRow under 3.3.0.
With the mentioned changes, the plugin works also on EditorGrids.

Holger

darklow
22 Oct 2010, 1:41 AM
Hi Darklow,
i have switched my grid to an editorgrid and tested FilterRow under 3.3.0.
With the mentioned changes, the plugin works also on EditorGrids.

Holger

My bad, just noticed i used grid.on not view.on
Thanks. Now plugins works perfect!

daddie888
22 Oct 2010, 2:06 AM
Hi Hschaefer, that helps for remote but for local the functionality is now somewhat limited, hopefully there come other solutions for the focus problem.
Would you care to share the whole rewritten plugin (merge of Ext.ux.grid.FilterRow and Ext.ux.grid.GridHeaderFilters) ?
I'm curious to see your solution regarding dateranges etc.

Best wishes

Peter

ctp
1 Nov 2010, 2:58 AM
Hi all,

I've played with Livegrid in 3.3 but when the grid is populated with maximum amount of n records which fit into the grid's first 'page' it fails to render all further records. Not Livegrid's sense ;-) Anyone has any solution for this behaviour?

michael melsen
11 Nov 2010, 3:25 AM
Hi all,

small question regarding filterrow in combination with 3.3.0. With the addition of the listerner on the view that will invoke the renderFields method from an earlier reply in this thread, almost all filter fields work. Unfortunately my custom combobox filter doesn't work in IE, but does in FF. As soon as a value is entered, the input combobox disappears and leaves me with a gray field. This is actually the same field that I got when I did not add the view.on("refresh", this.renderFields, this);

I've tried to find out the differences between the divs in ie and ff and found out that in ie the function getFieldDom


getFieldDom: function() {
return this.field.wrap ? this.field.wrap.dom : this.field.el.dom;
},returns an object that lacks the input html. This is available in ff. Does anybody know what could be the cause of this? It worked fine on extjs 3.2.1

attached you see the effect before and after the refresh:
23284

Condor
11 Nov 2010, 4:59 AM
I assume that is because 'this.field' references the Ext.grid.GridEditor instead of the actual field.

Try:

getFieldDom: function() {
var field = this.field.field || this.field;
return field.wrap ? field.wrap.dom : field.el.dom;
},

michael melsen
11 Nov 2010, 6:54 AM
hi Condor,

thanks for your reply. I've added your changes but it doesn't make a difference. I've again studied the code and noticed the following:

in ie the field.wrap.dom has the following value for my combobox field:


"\r\n<DIV style="WIDTH: 98px" id=ext-gen493 class="x-form-field-wrap x-form-field-trigger-wrap"></DIV>"the field.el.dom variable has the value:


"<INPUT style="WIDTH: 81px" id=ext-comp-1241 class="x-form-text x-form-field" name=ext-comp-1241 value=vrouw size=24 autocomplete="off" qtip>"I think that the field.el.dom value should be returned as this variable holds the input field tag. So I've added the following code just for ie in the getFieldDom function:


if(Ext.isIE) {return field.el.dom;}

The result is that I do see an input field with the value I've entered, but the drop down arrow button is gone. So this doesn't seem to work as well.

Any idea what I should change to let it work on ie as well as ff?

cheers,

Michael

michael melsen
15 Nov 2010, 7:24 AM
Hi guys,

I'm not really making progress with the disappearing div. I did notice that in FF the variable this.field.wrap.dom.children holds 2 children for the combobox:

[input#ext-comp-1866.x-form-text, img#ext-gen1195.x-form-trigger javascri...lt/s.gif]

however on IE the same variable holds no children and this is the reason why the div disappears. Can someone give a hint on where to look?

kind regards,

Michael

griffiti93
16 Nov 2010, 2:51 PM
Hey Condor - I enjoyed your presentation at SenchaCon. I'm looking forward to using many of your components.

pablitobs
20 Nov 2010, 8:51 PM
Hi, there, I tried Ext.ux.UploadDialog on 3.0 and it fails....
just to update the not compatible list of extensions...
see ya

michael melsen
23 Nov 2010, 2:35 AM
Hi guys,

I'm not really making progress with the disappearing div. I did notice that in FF the variable this.field.wrap.dom.children holds 2 children for the combobox:

[input#ext-comp-1866.x-form-text, img#ext-gen1195.x-form-trigger javascri...lt/s.gif]

however on IE the same variable holds no children and this is the reason why the div disappears. Can someone give a hint on where to look?

kind regards,

Michael


Hi guys,

I figured out that the problem is caused by ext in combination with the filterrow. It seems that the refresh(true) is causing the headers to be refreshed which causes the divs for the combobox to vanish in IE, but not in FF. Can someone point me to the best possible way to solve this? I guess a listener would suffice, but I could not get it working one way or the other.

cheers,

Michael

renku
8 Dec 2010, 9:29 AM
I think the FilterRow should work now with Ext 3.3 -- See the thread for details. (http://www.sencha.com/forum/showthread.php?55730-Editors-in-Grid-Header-for-Filter-or-New-Data/page7)

bkraut
5 Feb 2011, 4:26 PM
I'm also having issues with ManagedIFrame in ExtJs 3.3.

I posted an error in ManagedIFrame forum thread.
Best regards,
Bojan

veenvliet.morion
11 Feb 2011, 6:13 AM
Livegrid is fixed in a 0.5 branche!!

jej2003
23 Feb 2011, 11:52 AM
Looks like Ext.ux.grid.RowExpander is also broken. I updated mine locally as follows, basically involved removing the onDestroy listener on the grid and changing the onDestroy method to destroy and added a call to purgeListeners. Not sure if this is the most appropriate mod, so if anyone has a better solution I am all ears.



/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');

/**
* @class Ext.ux.grid.RowExpander
* @extends Ext.util.Observable
* Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
* a second row body which expands/contracts. The expand/contract behavior is configurable to react
* on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
*
* @ptype rowexpander
*/
Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
/**
* @cfg {Boolean} expandOnEnter
* <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
* key is pressed (defaults to <tt>true</tt>).
*/
expandOnEnter : true,
/**
* @cfg {Boolean} expandOnDblClick
* <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
* (defaults to <tt>true</tt>).
*/
expandOnDblClick : true,

header : '',
width : 20,
sortable : false,
fixed : true,
hideable: false,
menuDisabled : true,
dataIndex : '',
id : 'expander',
lazyRender : true,
enableCaching : true,

constructor: function(config){
Ext.apply(this, config);

if(!this.scope)
this.scope = this;

this.addEvents({
/**
* @event beforeexpand
* Fires before the row expands. Have the listener return false to prevent the row from expanding.
* @param {Object} this RowExpander object.
* @param {Object} Ext.data.Record Record for the selected row.
* @param {Object} body body element for the secondary row.
* @param {Number} rowIndex The current row index.
*/
beforeexpand: true,
/**
* @event expand
* Fires after the row expands.
* @param {Object} this RowExpander object.
* @param {Object} Ext.data.Record Record for the selected row.
* @param {Object} body body element for the secondary row.
* @param {Number} rowIndex The current row index.
*/
expand: true,
/**
* @event beforecollapse
* Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
* @param {Object} this RowExpander object.
* @param {Object} Ext.data.Record Record for the selected row.
* @param {Object} body body element for the secondary row.
* @param {Number} rowIndex The current row index.
*/
beforecollapse: true,
/**
* @event collapse
* Fires after the row collapses.
* @param {Object} this RowExpander object.
* @param {Object} Ext.data.Record Record for the selected row.
* @param {Object} body body element for the secondary row.
* @param {Number} rowIndex The current row index.
*/
collapse: true
});

Ext.ux.grid.RowExpander.superclass.constructor.call(this);

if(this.tpl){
if(typeof this.tpl == 'string'){
this.tpl = new Ext.Template(this.tpl);
}
this.tpl.compile();
}

this.state = {};
this.bodyContent = {};
},

getRowClass : function(record, rowIndex, p, ds){
p.cols = p.cols-1;
var content = this.bodyContent[record.id];
if(!content && !this.lazyRender){
content = this.getBodyContent(record, rowIndex);
}
if(content){
p.body = content;
}
return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
},

init : function(grid){
this.grid = grid;

var view = grid.getView();
view.getRowClass = this.getRowClass.createDelegate(this);

view.enableRowBody = true;


grid.on('render', this.onRender, this);
//grid.on('destroy', this.onDestroy, this);
},

// @private
onRender: function() {
var grid = this.grid;
var mainBody = grid.getView().mainBody;
mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
if (this.expandOnEnter) {
this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
'enter' : this.onEnter,
scope: this
});
}
if (this.expandOnDblClick) {
grid.on('rowdblclick', this.onRowDblClick, this);
}
},

// @private
destroy: function() {
if(this.keyNav){
this.keyNav.disable();
delete this.keyNav;
}

this.purgeListeners();

},
// @private
onRowDblClick: function(grid, rowIdx, e) {
this.toggleRow(rowIdx);
},

onEnter: function(e) {
var g = this.grid;
var sm = g.getSelectionModel();
var sels = sm.getSelections();
for (var i = 0, len = sels.length; i < len; i++) {
var rowIdx = g.getStore().indexOf(sels[i]);
this.toggleRow(rowIdx);
}
},

getBodyContent : function(record, index){
if(!this.enableCaching){
return this.tpl.apply(record.data);
}
var content = this.bodyContent[record.id];
if(!content){
content = this.tpl.apply(record.data);
this.bodyContent[record.id] = content;
}
return content;
},

onMouseDown : function(e, t){
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
this.toggleRow(row);
},

renderer : function(v, p, record){
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander">&#160;</div>';
},

beforeExpand : function(record, body, rowIndex){
if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
if(this.tpl && this.lazyRender){
body.innerHTML = this.getBodyContent(record, rowIndex);
}
return true;
}else{
return false;
}
},

toggleRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
},

expandRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
if(this.beforeExpand(record, body, row.rowIndex)){
this.state[record.id] = true;
Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
this.fireEvent('expand', this, record, body, row.rowIndex);
}
},

collapseRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
this.state[record.id] = false;
Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
this.fireEvent('collapse', this, record, body, row.rowIndex);
}
}
});

Ext.preg('rowexpander', Ext.ux.grid.RowExpander);

//backwards compat
Ext.grid.RowExpander = Ext.ux.grid.RowExpander;