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

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

3 голосов
/ 17 февраля 2012

Я совершенно новичок в 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'],

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

Ответы [ 4 ]

3 голосов
/ 09 марта 2012

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

1 голос
/ 06 марта 2012

Я надеюсь, что это поможет вам: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'},
    ]
}
});
0 голосов
/ 17 февраля 2012

Пара вещей. Во-первых, 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]
});
0 голосов
/ 17 февраля 2012

Вы должны использовать псевдоним: 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("")  
  }
});
...