Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: card undefined @ card layout

  1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    13

    Question card undefined @ card layout

    hi,

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

    Code:
    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:

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

    Code:
    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

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243

    Default

    Did you actually define items.Patients somewhere?

  3. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    13

    Default

    Quote Originally Posted by TommyMaintz View Post
    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.

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    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?
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha User
    Join Date
    Jul 2010
    Posts
    13

    Default

    the following code is for the navigationbar of the kitchensink example:

    Code:
    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:
    Code:
    Ext.ns('nuTrack', 'items', 'Ext.ux');
    then defined an object:
    Code:
    items.Patients = new Ext.Panel({
    ...
    })
    still don't see what i missed

  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    It's difficult to say just from random code fragments like that. You might want to post a working example.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #7
    Sencha User
    Join Date
    Jul 2010
    Posts
    13

    Default

    ok, probably you're right:

    index.js:
    Code:
    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
    Code:
    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
    Code:
    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'
            }]
        }

  8. #8
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Again, that's not really a working example. Something I can just drop in easily and run, there's too many pieces missing.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  9. #9
    Sencha User
    Join Date
    Jul 2010
    Posts
    13

    Default

    here we go
    Attached Files Attached Files

  10. #10
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Works ok for me...
    Attached Images Attached Images
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Page 1 of 2 12 LastLast

Similar Threads

  1. How to use the card layout?
    By Dumas in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 23 Jul 2010, 6:19 AM
  2. Card Layout - how?
    By cherbert in forum Ext Designer: Help & Discussion
    Replies: 1
    Last Post: 25 Mar 2010, 3:56 PM
  3. Card layout
    By silpatadikonda in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 24 Nov 2008, 10:51 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •