PDA

View Full Version : [OPEN-711] Bug with using PropertyGrid and a Drag & Drop Element



Urkman
28 Jan 2010, 7:52 AM
Hello,

I'm using the PropertyGrid in a new Project. And sometimes I get an error, but not allways.
I try to explain:
When I change a value in a Textfield and after that I don't hit Enter, but rather click somewhere outside the PropertyPanel I git this error:


this.getRow(row) is undefined in ext-all-debug.js (Zeile 41154).

But did not happen everytime. So it is not reproducable, but it happens a lot...

Perhaps someboy had the same problem and can help me on this.

Thanks and greetings,
Urkman

Urkman
2 Feb 2010, 4:26 AM
Hello,

no one with an idea on this?

Here is the code of my propertyGrtid:


App.InvoiceTemplate.propertyGrid = new Ext.grid.PropertyGrid({
id: 'invoiceTemplatePropertyGrid',
width: 250,
title: 'Properties',
border: false,
height: 250,
margins: '0 0 0 0',
region: 'south',
split: true,
autoScroll: true,
customEditors: {
'font': new Ext.grid.GridEditor(
new Ext.form.ComboBox({
store: ['Arial', 'New Font', 'Another Font'],
editable: false,
triggerAction: 'all'
}),
{}),
'align': new Ext.grid.GridEditor(
new Ext.form.ComboBox({
store: [ 'left', 'right', 'center'],
editable: false,
triggerAction: 'all'
}),
{}),
'image': new Ext.grid.GridEditor(
new Ext.form.ComboBox({
store: App.DataStore.InvoiceTemplateImages,
displayField: 'name',
mode: 'local',
allowBlank: true,
triggerAction: 'all',
editable: false,
forceSelection: true
}),
{}),
'background_image': new Ext.grid.GridEditor(
new Ext.form.ComboBox({
store: App.DataStore.InvoiceTemplateImages,
displayField: 'name',
mode: 'local',
allowBlank: true,
triggerAction: 'all',
editable: false,
forceSelection: true
}),
{}),
'text': new Ext.grid.GridEditor(
new Ext.form.TextArea({
}),
{}),
'font_size': new Ext.grid.GridEditor(
new Ext.ux.form.SpinnerField({
minValue: 5,
maxValue: 25
}),
{})
// 'font_color': new Ext.grid.GridEditor(
// new Ext.ux.form.ColorPickerFieldPlus(),
// {})
},
source: {},
listeners: {
beforepropertychange : function( pSource, pRecordId, pNewValue, pOldValue )
{
if ( pRecordId == '(id)' || pRecordId == '(name)' || pRecordId == '(type)' ) {
return false;
}
return true;
},
propertychange: function( pSource, pRecordId, pNewValue, pOldValue )
{
var panel = Ext.getCmp( 'invoicePagePanel' );
if ( pSource[ '(type)' ] == 'template_item' ) {
var item = App.InvoiceTemplateItemsManager.getItem( pSource[ '(id)' ], Ext.getCmp('invoiceTemplatePartCombo').getValue() );
item[ pRecordId ] = pNewValue;
App.InvoiceTemplateItemsManager.setItem( pSource[ '(id)' ], Ext.getCmp('invoiceTemplatePartCombo').getValue(), item )

panel.refreshDisplay();

} else if ( pSource[ '(type)' ] == 'template_part' ) {
var part = App.InvoiceTemplateItemsManager.getPart( pSource[ '(id)' ] );
part[ pRecordId ] = pNewValue;
App.InvoiceTemplateItemsManager.setPart( pSource[ '(id)' ], part )

panel.refreshDisplay();
}
}
},
viewConfig : {
forceFit: true,
scrollOffset: 2 // the grid will never have scrollbars
}
});
Thanks again for your help,
Urkman

Urkman
4 Mar 2010, 9:15 AM
Hello,

I made some further investigations on this. So I try to expain what I found:

Here is my situation:
I made a template designer, where I can place item in a div and set the properties of this items. This iems can be draged around and the size of the items can be changed.
When I select an item, I display itz properties inside the PropertyGrid, using the "click" event. I change the values of the item, using the "beforepropertychange" and "propertychange" events

This works all fine...

But now the situation, where the error appears:
When I change a property inside the property and then select another item it seems, that the events "beforepropertychange" and "propertychange" are fired to late. Because the "click" on the other item is fired before these two events. And this is the point, where I get the error.

I hope, now somebody can help me with whis error...

Thanks and greetings,
Urkman

Urkman
10 Mar 2010, 12:27 PM
Hello,

I made an example on how to reproduce this error.

Just take the PropertyGrid Example and replace the content of the js file "property-grid.js" with this code:


/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){

var propsGrid = new Ext.grid.PropertyGrid({
renderTo: 'prop-grid',
width: 250,
title: 'Properties',
border: false,
height: 250,
margins: '0 0 0 0',
region: 'center',
split: true,
autoScroll: true,
source: {
'(id)': 1,
align: 'left',
background_color: 'FFFFFF',
background_image: '',
border: 0,
border_color: '000000',
font: 'Courier',
font_size: 10,
font_style: '',
font_color: '000000',
text: 'Test Text',
x: parseInt( 0 ),
y: parseInt( 0 ),
width: parseInt( 100 ),
height: parseInt( 100 )
},
customEditors: {
'text': new Ext.grid.GridEditor(
new Ext.form.TextArea({
}),
{})
},
listeners: {
beforepropertychange : function( pSource, pRecordId, pNewValue, pOldValue )
{
console.log( 'beforepropertychange' );

if ( pRecordId == '(id)' ) {
return false;
}
return true;
},
propertychange: function( pSource, pRecordId, pNewValue, pOldValue )
{
console.log( 'propertychange' );
}
},
viewConfig : {
forceFit: true,
scrollOffset: 2 // the grid will never have scrollbars
}
});


// simulate updating the grid data via a button click
new Ext.Button({
id: 'testbutton',
renderTo: 'button-container',
text: 'Update source'
});

Ext.getCmp( 'testbutton' ).getEl().on( 'click', function () {
console.log( 'click' );
propsGrid.setSource({
'(id)': 1,
align: 'left',
background_color: 'FFFFFF',
background_image: '',
border: 0,
border_color: '000000',
font: 'Courier',
font_size: 10,
font_style: '',
font_color: '000000',
text: 'Test Text',
x: parseInt( 0 ),
y: parseInt( 0 ),
width: parseInt( 100 ),
height: parseInt( 100 )
});
});

Ext.getCmp( 'testbutton' ).getEl().dd = new Ext.dd.DD( Ext.getCmp( 'testbutton' ).getEl() );
Ext.apply( Ext.getCmp( 'testbutton' ).getEl().dd, {
startDrag: function( pX, pY )
{
console.log( 'start drag' );
},

endDrag:function( pEvent )
{
console.log( 'end drag' );
}
});

});To explain, what I tried to reproduce the problem:
1.) I added the click event to the button to change the property source - still working
2.) I added Drag & Drop to the button - this broke thproperty grid.

Here is how you can reproduce the error:
1.) select the "text" property and change the value
2.) now click the "update source" button.
3.) Now you can see the error using firefox.

As you can see, the click event of the button is raised, before the "beforepropertychange" and "propertychange" events of the propertygrid are raised.
But this only happens, when the button has Drag & Drop. If the button has no Drag & Drop everything is working fine...

So, now I hope someone of the ExtJs Team can help me with this.

As a sideeffect, you can see, that the propertygrid can be scrolled left and right, if there is a scrollbar...

Thanks and greetings,
Urkman

Urkman
10 Mar 2010, 12:43 PM
Hello,

I managed to reproduce the error. Just take the property-grid example and replace the content to the "property-grid.js" file with this code:


/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){

var propsGrid = new Ext.grid.PropertyGrid({
renderTo: 'prop-grid',
width: 250,
title: 'Properties',
border: false,
height: 250,
margins: '0 0 0 0',
region: 'center',
split: true,
autoScroll: true,
source: {
'(id)': 1,
align: 'left',
background_color: 'FFFFFF',
background_image: '',
border: 0,
border_color: '000000',
font: 'Courier',
font_size: 10,
font_style: '',
font_color: '000000',
text: 'Test Text',
x: parseInt( 0 ),
y: parseInt( 0 ),
width: parseInt( 100 ),
height: parseInt( 100 )
},
customEditors: {
'text': new Ext.grid.GridEditor(
new Ext.form.TextArea({
}),
{})
},
listeners: {
beforepropertychange : function( pSource, pRecordId, pNewValue, pOldValue )
{
console.log( 'beforepropertychange' );

if ( pRecordId == '(id)' ) {
return false;
}
return true;
},
propertychange: function( pSource, pRecordId, pNewValue, pOldValue )
{
console.log( 'propertychange' );
}
},
viewConfig : {
forceFit: true,
scrollOffset: 2 // the grid will never have scrollbars
}
});


// simulate updating the grid data via a button click
new Ext.Button({
id: 'testbutton',
renderTo: 'button-container',
text: 'Update source'
});

Ext.getCmp( 'testbutton' ).getEl().on( 'click', function () {
console.log( 'click' );
propsGrid.setSource({
'(id)': 1,
align: 'left',
background_color: 'FFFFFF',
background_image: '',
border: 0,
border_color: '000000',
font: 'Courier',
font_size: 10,
font_style: '',
font_color: '000000',
text: 'Test Text',
x: parseInt( 0 ),
y: parseInt( 0 ),
width: parseInt( 100 ),
height: parseInt( 100 )
});
});

Ext.getCmp( 'testbutton' ).getEl().dd = new Ext.dd.DD( Ext.getCmp( 'testbutton' ).getEl() );
Ext.apply( Ext.getCmp( 'testbutton' ).getEl().dd, {
startDrag: function( pX, pY )
{
console.log( 'start drag' );
},

endDrag:function( pEvent )
{
console.log( 'end drag' );
}
});

});Now to reproduce the error:
1.) select the "Text" property and change the value.
2.) Now click the "Update Source" Button, without leaving the "Text" Property.

Now you can see the error using firebug.

This error only appears, when the "Update Source" Button has Drag & Drop. Remove the Drag & Drop from the Button and everything works fine.

When Drag & Drop is added to the Button, the "click" event of the Button is raised before the events of the Property Grid.

As a Sideeffect you can see, that the Property Grid is not displayed correct, when it has a Scrollbar.

Hope this helps to fix this problem...

Greetings,
Urkman

Urkman
10 Mar 2010, 1:41 PM
Hello,

why my posts needs to be moderated?

Greetings,
Urkman

Urkman
10 Mar 2010, 11:31 PM
Hello,

I mde an expample to reproduce the problem:
http://extjstest.stefansturm.de/property-grid.html

To reproduct it, do the follwoing:
1.) Select the text proerpty and change it
2.) Now click the button "Update Source".

Now you can see the error using firebug.

The problem here is, that the Button supports Drag & Drop. because of this, the "Click" event of the Button is raised before the events of the property grid.

Ich hope this helps,
Urkman

Urkman
11 Mar 2010, 1:53 AM
Hello,

I made some tests on ths using extJs 3.2 beta.

With this version there is no error show, but the proprety events are not raised.
So, when I change the value and then click the button, the click event of the button is raisede, but the beforepropertychange and propertychange of the property grid are never raised.

Greetings,
Urkman

Urkman
11 Mar 2010, 6:56 AM
Hello,

Here is a Link where I show this Bug:
http://extjstest.stefansturm.de/property-grid.html

To reproduct it, do the follwoing:
1.) Select the text property and change it
2.) Now click the button "Update Source".

Then You get this error:
this.getRow(row) is undefined in ext-all-debug.js (Zeile 41154).

The problem here is, that the Button supports Drag & Drop. Because of this, the "Click" event of the Button is raised before the events of the property grid are raised.
Remove the Drag & Drop from the button and it works fine.

Here I describe more about the Problem:
http://www.extjs.com/forum/showthread.php?t=90794

Greetings,
Urkman

Urkman
16 Mar 2010, 4:06 AM
Hello,

no news on this bug?

Thanks and greetings,
Urkman

evant
16 Mar 2010, 4:13 AM
I'd be fairly loathe to call this a bug. Buttons don't support drag/dropping by default.

Urkman
16 Mar 2010, 4:48 AM
Hello evant,

I just take a button for the example. You can change the button to a panel and you get the same bug...

My situation:
I develop a visual designer to build print templates.
My Base is a panel and you can add items( panel ) to this panel and drag them around. When you click a item the properties of this item are show in the property grid.
When you change a value for one item and then click another item, you get the bug.

So, I think, this is a bug...

Greetings,
Urkman

Urkman
22 Mar 2010, 8:14 AM
Hello,

still no one with an idea on this? How can I help you to fix this?

Thanks and greetings,
Urkman

JaspreetSingh
27 May 2010, 2:43 AM
Hi dude

I also faced the same problem yesterday and able to find out the solution.
U need to do changes in ext-all-debug.js

1) go to line number where you facing error in ext-all-debug.js(say its 41155)
in getcell function do following changes
getCell : function(row, col){
// below two lines are added to resolve js error on property grid change
if(row==null)
return null;
return this.getRow(row).getElementsByTagName('td')[col];
},


2) u also need to do following change in same js

getResolvedXY : function(resolved){
if(!resolved){
return null;
}
var s = this.scroller.dom, c = resolved.cell, r = resolved.row;
// below two lines are added to resolve js error on property grid change
if(c==null)
return null;

return c ? Ext.fly(c).getXY() : [this.el.getX(), Ext.fly(r).getY()];
},



hope it will sove the problem and will not effect other functionalities

Jaspreet Singh
Cheerss!!

Condor
27 May 2010, 3:02 AM
One of my feature requests (http://www.extjs.com/forum/showthread.php?82767-2.x-3.x-Select-rows-before-grid-is-rendered) contains:

Ext.override(Ext.grid.GridView, {
hasRows : function(){
var fc = this.mainBody ? this.mainBody.dom.firstChild : false;
return fc && fc.nodeType == 1 && fc.className != 'x-grid-empty';
},
getCell : function(row, col){
var r = this.getRow(row);
return r ? r.getElementsByTagName('td')[col] : false;
}
});
to avoid errors when events are triggered for a grid that isn't rendered yet.

These should also solve the problem.