Sencha Touch 2.x - Как загрузить пользовательский вид на панель вкладок? Использовать xtype?

Я совершенно новичок в Sencha 2 Touch. Я уже второй день играю с ним.

У меня есть собственный класс (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("")  
  }
});

и теперь я пытаюсь загрузить его на вкладку при нажатии:

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?
        },
    ]
}
});

Если я удалю объявление xtype внутри TAB 1 и заменю его html, все будет работать нормально. Как только я пытаюсь загрузить свое собственное представление на вкладку, все, что я получаю, это белый экран в моем браузере, а консоль не показывает ошибок ???

P.S Да уже в App.js все настроено правильно:

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

ПОМОГИ ПОЖАЛУЙСТА!


iphone mobile javascript extjs sencha-touch
person skålfyfan    schedule 17.02.2012    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Поздно обновлять эту ветку, но решение состояло в том, чтобы просто удалить объявление fullscreen: true из конфигурации в MyApp.view.Howdy.

person skålfyfan    schedule 09.03.2012

arrow_upward
1
arrow_downward

Я надеюсь, что это поможет вам:

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'},
    ]
}
});
person Mihail Velikov    schedule 06.03.2012

arrow_upward
0
arrow_downward

Вы должны использовать псевдоним: 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("")  
  }
});
person Olivier    schedule 17.02.2012
comment
попробовал это. Все еще не работает и просто показывает пустой белый экран. Я считаю, что начиная с Sencha 2.x определение xtype: 'xxxx' является тем же определяющим псевдонимом: 'widget.xxxx'? Кажется, я только что где-то это прочитал. - person skålfyfan; 17.02.2012

arrow_upward
0
arrow_downward

Несколько вещей. Во-первых, xtype — это то, что вы используете для определения типа, если вы добавляете его мгновенно... если вы еще не определили его с помощью Ext.create. Если вы его уже создали, то он вам не нужен. При создании панелей каждый элемент содержит всю информацию о себе, заголовок, иконку, все. Затем просто добавьте элементы в 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]
});
person Will Stern    schedule 17.02.2012