PDA

View Full Version : Loading a list into a panel using setCard



agmona
6 Feb 2011, 11:34 AM
Hi all,
im desperately trying to load a list into a panel using the setCard function,
when im using it to load another panel its fine but when im trying to load a list im seeing in chrome tools an error on the console and nothing happens...(error is below)


var taskslist = new Ext.List({
tpl: '<tpl for="."><div class="contact">{data} <br/><strong>{id}</strong></div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
indexBar: true,
store: store,
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: true
});


and this is the code that loads it into the panel


var json = response.responseText;
var o = eval("(" + json + ")");
store.loadData(o.d);
pnl.setCard(taskslist, "slide");


and the errors that im seeing ...
Uncaught Error: SYNTAX_ERR: DOM Exception 12
Ext.applyIf.getComputedTransformOffset ext-touch-debug.js:10685
Ext.util.Draggable.Ext.extend.updateBoundary ext-touch-debug.js:13892
Ext.util.Scroller.Ext.extend.updateBoundary ext-touch-debug.js:14461
Ext.util.Draggable.Ext.extend.constructor ext-touch-debug.js:13696
Ext.util.Scroller.Ext.extend.constructor ext-touch-debug.js:14395
Ext.util.ScrollView.Ext.extend.constructor ext-touch-debug.js:14261
Ext.Component.Ext.extend.setScrollable ext-touch-debug.js:18351
Ext.Component.Ext.extend.onRender ext-touch-debug.js:17980
Ext.List.Ext.extend.onRender ext-touch-debug.js:20506
Ext.lib.Component.Ext.extend.render ext-touch-debug.js:17205
Ext.layout.Layout.Ext.extend.renderItem ext-touch-debug.js:25464
Ext.layout.Layout.Ext.extend.renderItems ext-touch-debug.js:25453
Ext.layout.Layout.Ext.extend.beforeLayout ext-touch-debug.js:25440
Ext.layout.CardLayout.Ext.extend.beforeLayout ext-touch-debug.js:26208
Ext.layout.Layout.Ext.extend.layou text-touch-debug.js:25431
Ext.layout.CardLayout.Ext.extend.setActiveItem ext-touch-debug.js:26312
Ext.Container.Ext.extend.setCard ext-touch-debug.js:18860
Ext.Ajax.request.success main.js:17
Ext.data.Connection.Ext.extend.onComplete

jeffbvox
6 Feb 2011, 12:13 PM
What does your JSON data look like? Is it valid? Did you try passing it through http://www.jsonlint.com/. I haven't used setCard before, but I've used panel.add(thingToAdd) and then panel.setActiveItem(thingToAdd) to change to it.

agmona
6 Feb 2011, 12:27 PM
thanks for your answer this is my json data

"{"d":[{"__type":"Task","id":"1","data":"data for 1"},{"__type":"Task","id":"2","data":"data for 2"}]}"

and this is how the store is defined




var store = new Ext.data.JsonStore({
model: 'Tasks',
data: [{ data: "user1", id: "1" }, { data: "user2", id: "2"}]
});

mitchellsimoens
6 Feb 2011, 2:14 PM
So you say it works when you try it with a Panel and not the List... List has to be encased by at least a Container, layout managers cannot manage a List.

agmona
6 Feb 2011, 9:11 PM
Hi & thanks for your reply

Well, i tried to put it inside the items collection of an Ext.Panel but got the same exception.
here is the code:





var store = new Ext.data.JsonStore({
model: 'Tasks',
data: [{ data: "user1", id: "1" }, { data: "user2", id: "2"}]
});

var taskslist = new Ext.List({
tpl: '<tpl for="."><div class="contact">{data} <br/><strong>{id}</strong></div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
indexBar: true,
store: store,
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: true

});
var temp = new Ext.Panel({
title:'bla bla',
items: [taskslist
]
});



and the failing line is again here:



pnl.setCard(temp, "slide");

mitchellsimoens
6 Feb 2011, 9:16 PM
Is the "temp" panel already added to the "pnl" panel? Also, is setCard a valid function or is it setActiveItem?

agmona
6 Feb 2011, 11:34 PM
Thank you all for helping...

1. there is no need to add the item into the panel, setActiveItem - adds it
2. there is no problem adding a List directly, there is no need to wrap it with a panel.
3. i have updated my version, here is whats working for me



var taskslist = new Ext.List({
width:250,
height:250,
//centered: true,
modal: false,
hideOnMaskTap: false,
itemTpl: '<div class="task"><strong>{data}</strong> {id}</div>',
store:store,
singleSelect:true

});

pnl.setActiveItem(taskslist ,"slide");