Определение Panel и создание ее экземпляра в области просмотра - PullRequest
Новая
       6

Определение Panel и создание ее экземпляра в области просмотра

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

Я пытаюсь заставить Ext.define & Ext.create работать в Sencha touch 2, чтобы я мог определить все в своей библиотеке и просто создать предварительно настроенные элементы.

Однако Ext.defineне делает то, что я ожидал бы, во всем, что я пробовал.

Почему следующий код не создает панель внутри области просмотра с полем «Tame»?

Ext.define('mobi.form.Login',{
    extend:'Ext.form.Panel',
    items: [{
            xtype: 'textfield',
            name: 'Tame',
            label: 'Tame'
        }
    ]
});
Ext.application({
    viewport: {
        layout:'fit'        
    },
    launch: function(){
        var form = Ext.create('Ext.form.Panel', {
            items: [{
                    xtype: 'textfield',
                    name: 'name',
                    label: 'Name'
                }
            ]
        });
        Ext.Viewport.add(Ext.create('mobi.form.Login')); // This doesnt add anything to the viewport
        Ext.Viewport.add(form); //magically this works
    }
})

Ответы [ 2 ]

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

При использовании Ext.define все конфигурации должны находиться внутри блока config. Итак, ваш код должен выглядеть так: 

Ext.define('mobi.form.Login',{
    extend:'Ext.form.Panel',

    config: {
        items: [{
                xtype: 'textfield',
                name: 'Tame',
                label: 'Tame'
            }
        ]
    }
});

Как правило, единственными исключениями являются:

  • продлить * 1009
  • требует
  • xtype
  • одноточечно
  • alternateClassName

Все остальное должно быть внутри объекта config, но помните, только при использовании Ext.define.

0 голосов
/ 10 марта 2012

Похоже, вы пытаетесь использовать концепцию Sencha MVC, но это неправильно, если это ваш единственный фрагмент кода.

Сначала создайте следующую структуру папок:

  • MyAppFolder
    • index.html (сюда входит библиотека sencha)
    • app.js (основной файл)
    • приложение (папка)
      • контроллер
        • Main (главный контроллер)
      • модель (необязательно, если модель не определена)
      • магазин (необязательно, если модель не определена)
      • вид
        • Viewport.js (ваш основной видовой экран)
    • ресурсы
      • CSS
        • style.css (ваш собственный стиль)
      • изображений (ваши значки и изображения, если у вас есть)

Тогда в вашем app.js вы бы определили что-то вроде этого: 

// enable loader for dynamic loading of .js classes
Ext.Loader.setConfig({
    enabled : true,
    paths   : {
    }
});

/**
 * Better performance is achived when knowing which .js classes we need to load prior to execution of this class.
 */
Ext.require([
]);

/**
 * This is the definition of our mobile application.
 * The name of this app is MVCTest.
 */
Ext.application({
    name        : 'MVCTest',

    controllers : ['Main'],
    views       : ['Viewport'],

    launch      : function() {
        Ext.create('MVCTest.view.Viewport');
    }
});

Тогда ваш главный контроллер: 

Ext.define('MVCTest.controller.Main', {
    extend  : 'Ext.app.Controller',

    config  : {
        refs : {
                viewport : 'mvctest-viewport'
            }
    }
});

Тогда ваш видовой экран будет выглядеть примерно так, в соответствии с вашим примером: 

Ext.define('MVCTest.view.Viewport', {
    extend : 'Ext.Container',
    xtype  : 'mvctest-viewport',

    config : {
        fullscreen : true,
        layout     : 'card',
        items: 
        [
           {
               xtype: 'textfield',
               name: 'name',
               label: 'Name'
           },
           {
               xtype: 'mvctest-tame'
           }
        ]
    }
});

Указав xtype mvctest-tame, он будет искать этот xtype и добавлять его в качестве нового элемента на эту карту. Так что вам нужен ручной вид: 

Ext.define('MVCTest.view.Login',{
extend:'Ext.form.Panel',
xtype: 'mvctest-tame',
items: [{
        xtype: 'textfield',
        name: 'Tame',
        label: 'Tame'
    }
]
});

И не забудьте добавить представление Login в app.js ..

...