PDA

View Full Version : card undefined @ card layout



Johnnyger
15 Jul 2010, 4:33 AM
hi,

i used a card layout with external structure for my UI.


Ext.ns('nuTrack', 'items', 'Ext.ux');

Ext.ux.UniversalUI = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
... }

It works fine so far, but the attribute 'card' in an 'item'-object is always undefined when running the following function:


onListChange : function(list, item) {
console.log(item.card); //undefined
console.log(item.text); //Patients (see structure)
... }

Here is my structure:


nuTrack.Structure = [{
text: 'Overview',
cls: 'launchscreen',
items: [{
text: 'Patients',
card: items.Patients,
source: 'src/items/patients.js'
},
{
text: 'Scores',
card: items.Patients,
source: 'src/items/patients.js'
}]

I hope you can help me to fix my problem ;)

TIA, Kai

TommyMaintz
15 Jul 2010, 11:39 AM
Did you actually define items.Patients somewhere?

Johnnyger
22 Jul 2010, 3:50 AM
Did you actually define items.Patients somewhere?

Nope,

where do I have to define this? I actually did not find a definition for cards in the kitchensink example.

evant
22 Jul 2010, 3:55 AM
You're trying to reference an object called "items" that has a property called Patients. So if you don't define it, you're going to get undefined.

What are you trying to do?

Johnnyger
22 Jul 2010, 4:41 AM
the following code is for the navigationbar of the kitchensink example:


sink.Structure = [{
text: 'User Interface',
cls: 'launchscreen',
items: [{
text: 'Buttons',
card: demos.Buttons,
source: 'src/demos/buttons.js'

i tried to make my own navigation according to this.

i created a namespace first:

Ext.ns('nuTrack', 'items', 'Ext.ux');

then defined an object:

items.Patients = new Ext.Panel({
...
})

still don't see what i missed ;)

evant
22 Jul 2010, 5:07 AM
It's difficult to say just from random code fragments like that. You might want to post a working example.

Johnnyger
22 Jul 2010, 5:19 AM
ok, probably you're right:

index.js:

Ext.ns('nuTrack', 'items', 'Ext.ux');

Ext.ux.UniversalUI = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
items: [{
cls: 'launchscreen',
html: '<div><h1>Welcome to the NuTrack Admin Centre</h1><p>Tool for administration of the NuTrack Web Application<br /><br /><span>created with Sencha Touch &beta; (0.9)</span></p></div>'
}],
initComponent : function() {
...
onListChange : function(list, item) {
if (Ext.orientation == 'portrait' && !Ext.platform.isPhone && !item.items && !item.preventHide) {
this.navigationPanel.hide();
}
//console.log(item.items);
console.log(item.text);
console.log(item);
if (item.card) {
this.setCard(item.card, item.animation || 'slide');
this.currentCard = item.card;
if (item.text) {
this.navigationBar.setTitle(item.text);
}
if (Ext.platform.isPhone) {
this.backButton.show();
this.navigationBar.doLayout();
}
}

this.fireEvent('navigate', this, item, list);
},
...


structure.js

nuTrack.Structure = [{
text: 'Overview',
cls: 'launchscreen',
items: [{
text: 'Patients',
card: items.Patients,
source: 'src/items/patients.js'
},
{
text: 'Scores',
card: items.Patients,
source: 'src/items/patients.js'
}]
}

patients.js

items.Patients = new Ext.Panel({
layout: {
type: 'vbox',
pack: 'center',
align: 'stretch'
},
scroll: 'vertical',
defaults: {
layout: 'hbox',
flex: 1,
defaults: {
cls: 'abutton',
flex: 1
}
},
items: [{
items: [{
xtype: 'button',
text: 'Normal'
}, {
xtype: 'button',
ui: 'round',
text: 'Round'
}]
}

evant
22 Jul 2010, 5:21 AM
Again, that's not really a working example. Something I can just drop in easily and run, there's too many pieces missing.

Johnnyger
22 Jul 2010, 5:26 AM
here we go

evant
22 Jul 2010, 5:31 AM
Works ok for me...

Jaeger
30 Aug 2010, 5:47 AM
Check the order you include the javascript in index.html. The file you define the cards object should be before the file you define the items structure.

Very hard to debug it, costed me a lot of time......

Javascript is only a script language......