PDA

View Full Version : Dataview has error on store record update.



daniel6161
22 Mar 2010, 8:39 AM
Background:
This is keyword helper for an admin tool that I'm building. Basically, using a treepanel on the left, find the category and the keywords that match the items on the right. I'm using the DD class to have the user select the keyword and drag it ontop of the elements in the dataview so we can update the store. I'm using overrides for the DD class to make this happen.

Problem:
When I update the dataview's store, I get the following error:


d is undefined
d.parentNode.insertBefore(replacement, d); (line 8962 in ext-all-debug.js)
This is line is the onUpdate function, I've tracked it down to see what the actual problem is. We get the index of the item that we dropped the keyword on, but the dataview.all.elements is empty, so when the update tries to replace the item at 'x' index, with the replacement, there's nothing in the list to get it....so d is in null or undefined.

How or when is the dataview elements or dataview.all.elements supposed to be populated? Is it because I'm using a tpl or is there something I need to do in tpl for it to work? Am I supposed to set something on the DV or the Store so I can update records in realtime?

Any help is appreciated.

My DD Overrides:


var overrides =
{
onBeforeDrag: function(data, e)
{
this.data = data;
},
afterDragDrop: function(target, e, id)
{
// Add our keyword to our searchitem record.
var searchitemid = id.split('-')[1];
var searchitemstore = Ext.getCmp('dataview').getStore();

var rec = searchitemstore.getById(searchitemid);
var rkeywords = rec.get('keywords') ? rec.get('keywords') + ',' : '';

rec.set('keywords', rkeywords+this.data.node.text);
searchitemstore.commitChanges();
}
};
My Store:


var searchitemstore = new Ext.data.JsonStore({
url: '/requests/Request.php?m=SLC&f=getAdminSearchitems',
root: 'data',
totalProperty: 'totalCount',
id: 'searchitemid',
fields:
[
'searchitemid', 'link', 'description', 'image', 'activedate', 'shutoff', 'expiration', 'majorCategory', 'minorCategory', 'brand', 'value', 'geotarget', 'keywords'
],
listeners:
{
load: function(store, records, options)
{
var dv = Ext.getCmp('dataview');

if (dv.rendered)
{
var searchitemwraps = Ext.get(dv.getEl()).select('.searchitemwrap');
Ext.each(searchitemwraps.elements, function(el)
{
var ctarget = new Ext.dd.DDTarget(el, 'keywordDD');
Ext.apply(ctarget, overrides);
});
}
}
}
});

searchitemstore.load({params:{'keywords':0}});
My Template


var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="searchitemwrap" style="border: 1px solid red;" id="searchitem-{searchitemid}">',
' <div class="searchitemdesc">{description}</div>',
' <div class="searchitemkeywords" style="border: 1px solid silver; clear: both;">{keywords}</div>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
);

My Dataview (in items of border layout panel)


{
xtype: 'panel',
region: 'center',
frame: true,
layout: 'fit',
height: 558,
items:
[
{
xtype: 'dataview',
id: 'dataview',
store: searchitemstore,
tpl: tpl,
autoScroll: true,
emptyText: 'No searchitems to display',
listeners:
{
render: function(dv)
{
Ext.getCmp('ccombo').setValue(0);
}
}
}
]
}

daniel6161
22 Mar 2010, 9:06 AM
Found the problem...
Ok, so I didn't understand itemSelector, I guess I thought this had something to do with the actual selection piece of each item, basically if you read the docs good enough it will explain it.

The dataview has to have an itemSelector (css selector) for each parent item in the dataview to add it's items to the elements.

Docs:

In order to use these features, an itemSelector (http://web-openorders/generic-javascript/ext3/docs/output/Ext.DataView.html#Ext.DataView-itemSelector) config must be provided for the DataView to determine what nodes it will be working with.

Shadowgeish
29 Mar 2010, 7:47 AM
Found the problem...
Ok, so I didn't understand itemSelector, I guess I thought this had something to do with the actual selection piece of each item, basically if you read the docs good enough it will explain it.

The dataview has to have an itemSelector (css selector) for each parent item in the dataview to add it's items to the elements.

Docs:

I face the same problem , please how did you exactly manage to fix it ?

daniel6161
29 Mar 2010, 7:59 AM
First, let me explain how it works so you can know exactly what I'm talking about...

In the template, you'll have your outer wrapper used as a container for your data in the dataview. Notice the class name on my outer wrapper called 'searchitemwrap', that is the div that I'll be working with.

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="searchitemwrap" style="border: 1px solid red;" id="searchitem-{searchitemid}">',
' <div class="searchitemdesc">{description}</div>',
' <div class="searchitemkeywords" style="border: 1px solid silver; clear: both;">{keywords}</div>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
);By default a dataview doesn't know what to use to get at 'each' item. The 'itemSelector' config option is used to create a pointer for your dataview to know what the each items would be. In short, if you don't specify this config parameter, your dataview doesn't know how to select any items and you can't do anything with them.

In order for you to be able to use any of your data items in your dataview you need to supply this parameter. For the example tpl above, we would add this to our dataview configuration:


itemSelector: 'searchitemwrap'
Obviously change 'searchitemwrap' to whatever class name you are using for your items in your dataview.

Shadowgeish
29 Mar 2010, 8:23 AM
Thank you.
it works :)
.

daniel6161
29 Mar 2010, 8:23 AM
Thank you.
it works :)
.

Glad I could help.

phill54
27 Aug 2010, 3:26 AM
Thanks. I was just having the same problem. This helped me out!

betheone
15 Jul 2011, 12:06 AM
Thank u Daniel....even i had the same issue.....spent almost 3 hours on this...... so never just copy n paste........n as u said we should read the docs carefully....:)

daniel6161
15 Jul 2011, 12:21 PM
No problem, just glad I can help! It took me a long time to find the problem the first time I ran into this too.