Card Layout panel is not rendering in Sencha Touch 2.2

2
votes

I have developed an app using sencha touch 2.0, now i upgraded the app to sencha touch 2.2. It is not working. I have a container(layout=card) as shown below:

Ext.define("InfoImage.view.viewWorkitem.ViewWorkitemView", {
extend:'Ext.Container',
requires:[
    'Ext.TitleBar',
    'Ext.List'
],
xtype:'workitems',
layout:'card',
cardSwitchAnimation:'slide',
config:{
    fullscreen:true,
    cls:'hboxpanel',
    items:[

       {
            xtype:'workItemPanel',
            flex:3
       } 
    ]
} });

workItemPanel is as below:

Ext.define("InfoImage.view.viewWorkitem.WorkitemPanel", {
extend:'Ext.navigation.View',
requires:[
    'Ext.TitleBar',
    'Ext.List'
],
xtype:'workItemPanel',
id:'workItemId',
config:{


    layout : 'card',
    style:'border-radius: 10px;',
    navigationBar:{
        hidden:'true'
    },

    items:[ ]
}  });

This is working fine in sencha tocuh 2.0, Its not in 2.2 throwing an error Uncaught TypeError: Object card has no method 'onItemAdd'

what changes have to be done to make it work using sencha touch 2.2 ?

1
javascriptcordovaextjssencha-touchsencha-touch-2

1 Answers

1
votes

You need to put your configurations such as layout:'card', cardSwitchAnimation:'slide' inside the config block:

config:{
    layout:'card',
    cardSwitchAnimation:'slide',
    fullscreen:true,
    cls:'hboxpanel',
    items:[

       {
            xtype:'workItemPanel',
            flex:3
       } 
    ]
}

Same way for your id:'workItemId' in the second view:

config:{
    id:'workItemId',
    layout : 'card',
    style:'border-radius: 10px;',
    navigationBar:{
         hidden:'true'
    },

    items:[ ]
}