PDA

View Full Version : me.dom.parentNode is null when adding the record store after overwrite the template



fabio.policeno
27 Feb 2012, 9:02 AM
Hello,

I am developing an image browser but I'm going with this error, I created a simple example below to illustrate the problem. By clicking "Next", seto to display the first image of the store, it sets perfectly, but after that if I try to add one more item in the store, it occurs to me the error:

me.dom.parentNode is null
[Stop this error]
...me.dom.parentNode.insertBefore(Ext.getDom(el), isAfter ? me.dom.nextSibling : me...

Any ideas or suggestions of another way to implement this browser?



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../resources/css/ext-all.css" type="text/css">
<script type="text/javascript" src="../ext-all-dev.js"></script>
<script type="text/javascript">

Ext.define('Image', {
extend: 'Ext.data.Model',
fields: ['url']
});

Ext.onReady(function() {
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Image',
data : [[
'tacoma.jpg'
],[
'tahoe.jpg'
]]
});

var tpl = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="large">',
'<img src="{url}"/>',
'</div>',
'</tpl>'
);

var dataView = Ext.create('Ext.view.View', {
store : store,
tpl : tpl,
itemSelector: 'div.large',
renderTo : Ext.getBody()
});

var button = Ext.create('Ext.button.Button', {
text : 'Next',
renderTo: Ext.getBody(),
handler : function() {
var records = store.data.items,
dataViewEl = dataView.el;

tpl.overwrite(dataViewEl, records[0].data);

store.add({
url: 's10.jpg'
});
}
});
});

</script>
</head>
<body>
</body>
</html>


Thank's!

fabio.policeno
28 Feb 2012, 4:50 AM
I followed the idea of ??a colleague using a Panel or Component instead of view, since the view requires a store and would not be feasible initially show all items from the store and I would like to show one image at a time.



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../resources/css/ext-all.css" type="text/css">
<script type="text/javascript" src="../ext-all-dev.js"></script>
<script type="text/javascript">

Ext.define('Image', {
extend: 'Ext.data.Model',
fields: ['url']
});

Ext.onReady(function() {
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Image',
data : [[
'tacoma.jpg'
],[
'tahoe.jpg'
]]
});

var tpl = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="large">',
'<img src="{url}"/>',
'</div>',
'</tpl>'
);

var dataView = Ext.create('Ext.Component', {
tpl : tpl,
renderTo : Ext.getBody(),
height : 100,
listeners : {
afterrender: function() {
var records = store.data.items,
dataViewEl = this.el;

tpl.overwrite(dataViewEl, records[0].data);
}
}
});

var button = Ext.create('Ext.button.Button', {
text : 'Next',
renderTo: Ext.getBody(),
handler : function() {
var records = store.data.items,
dataViewEl = dataView.el;

tpl.overwrite(dataViewEl, records[1].data);

store.add({
url: 's10.jpg'
});
}
});
});

</script>
</head>
<body>
</body>
</html>