PDA

View Full Version : DataView requires tpl, store and itemSelector configurations to be defined.



dbottillo
27 Jan 2011, 3:18 AM
i'm trying to reproduce the tutorial of Sencha+PhoneGap (http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap) on my own

but i found some problems with datastore of the main list

i defined:

myapp.views.ContactList = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'Contacts'
}],
items: [{
xtype: 'list',
store: myapp.stores.contacts,
itemTpl: '{givenName} {familyName}',
onItemDisclosure: function (record){
//Ext.dispatch({
// controller: app.controllers.contacts,
// action: 'show',
// id: record.getId()
//});
}
}],
initComponent: function(){
myapp.stores.contacts.load();
myapp.views.ContactList.superclass.initComponent.apply(this, arguments);
}
});

exactly like the tutorial, then i defined myapp.stores.contacts, but i can't access to data from Phonegap so i write a simple store like:


myapp.models.Contact = Ext.regModel("myapp.models.Contact", {
fields: [
{name: "id", type: "int"},
{name: "givenName", type: "string"},
{name: "familyName", type: "string"},
{name: "emails", type: "auto"},
{name: "phoneNumbers", type: "auto"}
],
proxy: {
type: 'ajax',
url: 'resources/contacts.json',
reader: {
type: 'json',
root: 'contacts'
}
}
});

myapp.stores.contacts = new Ext.data.Store({
model: "myapp.models.Contact"
});

where in resoruces/contact.json i puts:

{
"contacts" : [
{
"id": 1,
"givenName": "Name1",
"familyName": "Supername1",
"emails": "name1@test.com",
"phoneNumbers": "3330011223"
},
{
"id": 4,
"givenName": "Name2",
"familyName": "Supername2",
"emails": "name2@test.com",
"phoneNumbers": "3330011222"
}
]
}

but it doesn't work...i received
"Uncaught DataView requires tpl, store and itemSelector configurations to be defined."

where i'm wrong?

i really appreciate this tutorial, because it's the first tutorial that explains how to use MVC pattern!!!

Thank You

Daniele

AndreaCammarata
27 Jan 2011, 12:03 PM
Ciao Daniele.
I see no errors in your code.
Is your application compose by only the code you post?
From the code description it seems you define a DataView component somewhere.
Search in your project if you define a DataView and check if tpl, store and itemSelector configurations of that component are defined.

Hope this helps.

lexer
6 Feb 2011, 7:25 AM
I've got the same error. Have you solved it?

hitman01
7 Feb 2011, 8:43 AM
Got the same problem.

lexer
7 Feb 2011, 8:49 AM
I've solved the issue.

You need to populate items with data you want to display


updateWithRecord: function(record) {
Ext.each(this.items.items, function(item) {
item.update(record.data);
});
var toolbar = this.getDockedItems()[0];
toolbar.setTitle(record.get('name'));
toolbar.getComponent('edit').record = record;
},

hitman01
7 Feb 2011, 1:58 PM
Got it working on simulator. However, on the device its not showing any numbers.

lexer
7 Feb 2011, 8:52 PM
No ideas, Im currently working with Google Chrome.

ninoguba
11 Feb 2011, 11:22 AM
Had this problem before and found out the issue was caused by the order of my javascript files wasn't correct. Make sure you're order is as follows:




<link type="text/css" rel="stylesheet" href="../lib/touch/resources/css/sencha-touch.css" />
<script type="text/javascript" src="../lib/touch/sencha-touch.js"></script>
<script type="text/javascript" src="../lib/phonegap.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="models/Contact.js"></script>
<script type="text/javascript" src="views/Viewport.js"></script>
<script type="text/javascript" src="views/ContactsList.js"></script>
<script type="text/javascript" src="views/ContactDetail.js"></script>
<script type="text/javascript" src="views/ContactForm.js"></script>
<script type="text/javascript" src="controllers/contacts.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready", app.mainLaunch, false);
</script>


Hope this helps.

heringsfilet
24 Mar 2011, 12:10 AM
This doesn't solve the problem neither :(

I still get the error "uncaught exception: DataView requires tpl, store and itemSelector configurations to be defined."

When I ran into this problem, the only view I've got is the ContactsList.js.
In the items section there is a store defined, but instead of a tpl there is a itemTpl and no itemSelector is defined. Is this the problem?

martinbroos
24 Mar 2011, 1:37 AM
When using a xtype:list in a panel you must use itemTpl so your good there.
I had the same problem with following this tutorial but solved in by checking al my files in the index.html

I totaly forgat to include my model as script tag and so it couldn't find the store.

Can you check if you got :



<script type="text/javascript" src="models/Contact.js"></script>

heringsfilet
24 Mar 2011, 1:41 AM
Thanks for your answer, but the model is already loaded in the index.html (in my case customer instead of contacts):

<script type="text/javascript" src="app/models/Customer.js"></script>And the CustomerList is the same as the ContactsList from the tutorial:

app.views.CustomerList = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'Customer'
}],
items: [{
xtype: 'list',
store: app.stores.customer,
itemTpl: '{forename} {name}',
onItemDisclosure: function (record) {
//Ext.dispatch({
// controller: app.controllers.contacts,
// action: 'show',
// id: record.getId()
//});
}
}],
initComponent: function() {
app.stores.customers.load();
app.views.CustomerList.superclass.initComponent.apply(this, arguments);
}
});

martinbroos
24 Mar 2011, 2:15 AM
I used the tutorial also this week to build an app of my own. Some data could be different but can you match it with your model.

Think it's the same but you never know. You can also try doing some console.log traces to check where the app still works and where the code gets executed.


beheerpaneel.models.Pages = Ext.regModel("beheerpaneel.models.Pages", {
fields: [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'},
{name: 'date', type: 'auto'}
],
proxy:{
type: 'ajax',
url: '/BeheerpaneelMobile/api/pages.php',
reader: {
type: 'json'
}
}
});

beheerpaneel.stores.pages = new Ext.data.Store({
model: "beheerpaneel.models.Pages",
sorters: [
{
property: 'id',
direction: 'ASC'
}
],
getGroupString: function(record) {
return record.get('title')[0];
}
});

heringsfilet
24 Mar 2011, 2:24 AM
In my case I don't have a service for the content yet, but I try to use kind of a mock data "service":

Ext.data.ProxyMgr.registerType("customerstorage",
Ext.extend(Ext.data.Proxy, {
create: function(operation, callback, scope) {
},
read: function(operation, callback, scope) {
var thisProxy = this;
var contacts = [];
for (var i = 0; i < 30; i++) {
var contact = new thisProxy.model({
id: i,
customerId: i,
forename: 'Hans',
name: 'Cusack',
street: 'sausagestreet',
streetNumber: '33a',
zip: '123456',
city: 'New York'
});
contacts.push(contact);
}
operation.resultSet = new Ext.data.ResultSet({
records: contacts,
total : contacts.length,
loaded : true
});
operation.setSuccessful();
operation.setCompleted();
if (typeof callback === 'function') {
callback.call(scope || thisProxy, operation);
}
},
update: function(operation, callback, scope) {
},
destroy: function(operation, callback, scope) {
}
})
);

app.models.Customer = Ext.regModel("app.models.Customer", {
fields: [
{name: "id", type: "int"},
{name: "customerId", type: "string"},
{name: "forename", type: "string"},
{name: "name", type: "string"},
{name: "street", type: "string"},
{name: "streetNumber", type: "string"},
{name: "zip", type: "string"},
{name: "city", type: "string"}
],

hasMany: [
'Job',{model: 'Job', name: 'jobs'}
],

proxy: {type: "customerstorage"}
});

app.stores.customers = new Ext.data.Store({
model: "app.models.Customer"
});

I don't have much code in this project yet where I can use console.log. Like in the tutorial http://www.sencha.com/learn/Tutorial%3aA_Sencha_Touch_MVC_application_with_PhoneGap I use a console.log to determine if the application has launched or "mainLaunched".
I'm new to SenchaTouch and PhoneGap, so I don't know where I could add more logging...

martinbroos
24 Mar 2011, 2:35 AM
You could start by doing a console.log('test'); at the top of your model file to check if it's even getting there.

Next i would lose the proxy connect for now and do it with default data like :


beheerpaneel.stores.pages = new Ext.data.Store({
model: "beheerpaneel.models.Pages",
sorters: [
{
property: 'id',
direction: 'ASC'
}
],
data: [
{id: '1',title: 'test', date: '2011-01-01'}

]
});


The data must match your model field setup. This way we make sure there are no errors in the proxy connect or something. If your only doing reading i would advice to just load a JSON like i did cause thats just one rule of code.

But then again if your planning to update records your on the right track.

heringsfilet
24 Mar 2011, 2:43 AM
The model file get loaded and I removed the proxy settings and added some data like you mentioned. Nevertheless the error still occurs :(

martinbroos
24 Mar 2011, 2:53 AM
Very strange ... if you could put it online somewhere i could have a look. Else i'm out of options i'm afraid.

I'm also using sencha for a week now, but i'm hoping to graduate on making an app with Sencha so I can learn from problems like yours.

heringsfilet
24 Mar 2011, 3:05 AM
You can download the project from http://www.file-upload.net/download-3309446/TEST_APP.zip.html

(Update)
If I remove the following lines a new error occurs.

app.views.CustomerList.superclass.initComponent.apply(this, arguments); (the initComponent method of the CustomerList-view)


app.views.Viewport.superclass.initComponent.apply(this, arguments);
(the initComponent method of the Viewport.js)
Why is this line in the tutorial, what does it do?

The new error was "layoutCollection is undefined" so I specified the layout: 'fit' in the CustomerList view which solve this problem. The app still don't show anything but now there are no errors...

martinbroos
24 Mar 2011, 4:39 AM
I'm sorry but i can't get it to work ...

you do have to have this line in your CustomerList :


app.stores.customers.load();

Now you see that it's missing a proxy since we added a local data list. But aren't sure how to get it working, i had the same problem in my project. So next I added a json reader proxy like I showed you before.
That solved the proxy error but it got back to the requeres tpl error.

Maybe anyone else has a solution?

knifegun
10 Jun 2011, 9:53 AM
I get his error that tells me I need this data for DataView. Problem is that I am using an Ext.List. Can someone please enlighten me why this is happening for an Ext.List?

tomas.fejfar
25 Nov 2011, 3:40 AM
I added itemSelector (on which items the select and disclose should work) to fix this, but it's not propper solution - for more info see http://www.sencha.com/forum/showthread.php?157026-onItemDisclosure-not-working&p=679635&posted=1#post679635