CODEWITHSUNDEEP
extjstouchsencha-touchsencha-touch-2
yan shi
yan shi

Reputation: 1

Sencha Touch Nestedlist cannot run getDetailCard

I have code below for Sencha Touch2, when I run it, I got the error like

Uncaught TypeError: Cannot read property 'attributes' of undefined

I have seen many similar code as I put for getDetailCard. Why my one cannot get the "attributes" property?

Ext.define('MyApp.view.MainTabPanel', {
    extend: 'Ext.tab.Panel',

    config: {
        tabBar: {
            docked: 'top'
        },
        items: [
            {
                xtype: 'container',
                title: 'Documents'
            },
            {
                xtype: 'nestedlist',
                itemId: 'newslist',
                ui: 'dark',
                displayField: 'title',
                store: 'NewsStoreXML',
                title: 'News',
                getDetailCard: function(item, parent) {
                    var itemData = item.attributes.record.data,
                    parentData = parent.attributes.record.data,
                    detailCard = new Ext.Panel({
                        scroll: 'vertical',
                        styleHtmlContent: true,
                        tpl: ["<h2>{text}</h2>","{content}"]
                    });
                    detailCard.update(itemData);
                    this.backButton.setText(parentData.text);
                    return detailCard;
                }
            },
            {
                xtype: 'container',
                title: 'Calendar'
            }
        ]
    },
    requires: [
               'Ext.dataview.NestedList',
               'Ext.TitleBar'
           ]

});

Upvotes: 0

Views: 634

Answers (2)

Dinkheller
Dinkheller

Reputation: 5054

first of all you may want to use:

this.backButton.setText(parentData.text);
==> useTitleAsBackText : true

getDetailCard is only giving you an 'item' if you are about to switch to a detailcard (leaving the tree for good), but runs twice each time you switch inside the nested list.

From what I see you are tring to set the detailview for an item. Why not use the correct event:

leafitemtap( this, list, index, target, record, e, eOpts )

Fires when the user taps a leaf list item.

e.g. record.parentNode.getData().text

The good thing is, this is only fired once you get to a leaf and not everytime you switch lists inside the nestedlist.

Upvotes: 1

Joe
Joe

Reputation: 41

I got the same error. I fixed it, try something like that, by surrounding your code with an if statement which check if your item object isn't null.

getDetailCard: function(item, parent) {
    if(item) {
       // do some job on item object here...
       var itemData = item.attributes.record.data,
    }
    var parentData = parent.attributes.record.data,
    detailCard = new Ext.Panel({
        scroll: 'vertical',
        styleHtmlContent: true,
        tpl: ["<h2>{text}</h2>","{content}"]
    });
    detailCard.update(itemData);
    this.backButton.setText(parentData.text);
    return detailCard;
}

You can console.log(item) to see and undersand how it is built. For me, i can get a text, for example, by getting item.data.text.

Upvotes: 4

Related Questions