CODEWITHSUNDEEP
javascriptiphonemobileextjssencha-touch
skålfyfan
skålfyfan

Reputation: 5281

Sencha Touch 2.x - How to load a custom view into a tab panel? Use xtype?

I am completely new to Sencha 2 Touch. This is my second day playing with it.

I have a custom class (app/view/Howdy.js):

Ext.define('MyApp.view.Howdy', {
  extend: 'Ext.Panel',
  xtype: 'howdy', // <--- this creates the 'howdy' xtype reference right?
  requires: [
    'Ext.SegmentedButton'
  ],

  config: {
    fullscreen: true,
    html: ['Hello Word.'].join("")  
  }
});

and I am now trying to load it into a tab when clicked:

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

   config: {
     fullscreen: true,
     tabBarPosition: 'bottom',

     items: [
        {
            title: 'TAB 1',
            iconCls: 'star',
            xtype: 'howdy', // <--- WHY IS THIS CRASHING MY APP?
        },
    ]
}
});

If I remove the xtype declaration inside TAB 1 and replace it with an html everything works fine. As soon as I try and load my custom view into the tab all I get is a white screen in my browser and console shows no errors ???

P.S Yes everything is setup correctly already in App.js:

views: ['Howdy','Main'],

HELP PLEASE!

Upvotes: 3

Views: 6795

Answers (4)

sk&#229;lfyfan
sk&#229;lfyfan

Reputation: 5281

Late to update this thread but the solution was simply to remove the fullscreen: true declaration from inside the config in MyApp.view.Howdy.

Upvotes: 3

Mihail Velikov
Mihail Velikov

Reputation: 566

I hope that this will help you:

MyApp.view.Howdy

Ext.define('MyApp.view.Howdy', {
  extend: 'Ext.Container',
  xtype: 'howdy',
  requires: [
    'Ext.SegmentedButton'
  ],

  config: {
    incoCls: 'star',
    title: 'TAB 1',

    html: ['Hello Word.'].join("")  
  }
});

MyApp.view.Main

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

   config: {
     fullscreen: true,
     tabBarPosition: 'bottom',

     items: [
        {xclass: 'MyApp.view.Howdy'},
    ]
}
});

Upvotes: 1

Will Stern
Will Stern

Reputation: 17579

A couple of things. First, xtype is what you use to define the type if you're adding it instantly...if you haven't already defined it with Ext.create. If you've already created it, then you don't need it. When creating panels, each item contains all the info for itself, title, icon, everything. Then, just add the item(s) into a tabPanel:

var a = Ext.create('Ext.Panel',{
  iconCls:'star',
  title:'tab1',
  html:'tab one content'
});
var b = Ext.create('Ext.Panel',{
  iconCls:'star',
  title:'tab2',
  html:'tab two content'
});


var panel = Ext.create('Ext.TabPanel',{
    items:[a,b]
});

Upvotes: 0

Olivier
Olivier

Reputation: 3471

You should use alias: widget.XTYPE

Ext.define('MyApp.view.Howdy', {
  extend: 'Ext.Panel',
  alias: 'widget.howdy', // <--- this creates the 'howdy' xtype reference right?
  requires: [
    'Ext.SegmentedButton'
  ],

  config: {
    fullscreen: true,
    html: ['Hello Word.'].join("")  
  }
});

Upvotes: 0

Related Questions