Получите что-то из статических свойств Ext.Container при создании элемента

Question

У меня есть следующая проблема. Я создал контейнер с наследованием Ext.Container и создав несколько элементов с использованием массива элементов. В конструкторе У меня есть асинхронная логика и заполнение некоторых статических свойств. Я хочу использовать значение этого статического свойства при создании элементов контейнера. Как я могу решить эту проблему? Это важная часть моей логики.

Ext.define('somename', { 
    extend: 'Ext.Container', 
    xtype: 'somextype', 
    id: 'someid', 
    statics: { 
     property1: false, 
     property2: null, 
     property3: null 
    }, 
    config: { 
     dataAutoId: 'someid', 
     items: [{ 
      xtype: 'panel', 
      html: 'so here i want to use value of property1', 
      cls: 'some', 
      id: 'someid', 
      dataAutoId: 'someid' 
     }] 
    }, 
    constructor: function() { 
     this.callParent(arguments); 

     // here i have implemented some asinhronous logic 
     // and as a result set value of property1 
     var statics = this.statics(); 
     statics.property1 = 'test string'; 
    } 
}); 

Я попытался:

html: this.statics.property1 

и

html: this.statics().property1 

но получаю ошибку:

Uncaught Error: The following classes are not declared even if their files have been loaded. 

Edit:

После прочтения документации Sencha Touch 2 я нашел решение. Асинхронная логика может быть выполнена в конструктор после этого , мы можем добавлять элементы в контейнер. Это решение может вызвать проблемы, если асинхронная логика занимает много времени. По этой причине приятно показать прядильщик или что-то подобное. Это пример кода решения.

Ext.define('MyApp.view.Main', { 
    extend: 'Ext.tab.Panel', 
    xtype: 'main', 
    requires: [ 
     'Ext.TitleBar', 
     'Ext.Video' 
    ], 
    static: { 
     title: null 
    }, 
    config: { 
     tabBarPosition: 'bottom' 
    }, 
    constructor: function() { 
     this.callParent(arguments); 
     var statics = this.statics(); 
     statics.title = 'test string'; 
     this.renderItems(); 
    }, 
    'renderItems': function() { 
     var statics = this.statics(); 
     this.add([{ 
      title: statics.title, 
      iconCls: 'home', 

      styleHtmlContent: true, 
      scrollable: true, 

      items: { 
       docked: 'top', 
       xtype: 'titlebar', 
       title: 'Welcome to Sencha Touch 2' 
      }, 

      html: [ 
       "dfdfhfjYou've just generated a new Sencha Touch 2 project. What you're looking at right now is the ", 
       "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ", 
       "and refresh to change what's rendered here." 
      ].join("") 
     }, { 
      title: 'Get Started', 
      iconCls: 'action', 

      items: [{ 
       docked: 'top', 
       xtype: 'titlebar', 
       title: 'Getting Started' 
      }, { 
       xtype: 'video', 
       url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c', 
       posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg' 
      }] 
     }]); 
    } 
}); 

Спасибо всем, кто дал мне совет.

Answer 1

Вы не можете привязать данные таким образом. Представление сначала загружается фреймворком, а затем создается экземпляр. Это означает, что если вы хотите установить html: this.property1, ваши статические свойства еще не имеют значения.

Это работает:

Ext.define('Fiddle.view.somename', { 
    extend: 'Ext.Container', 
    xtype: 'somextype', 
    id: 'someid', 
    statics: { 
     property1: false, 
     property2: null, 
     property3: null 
    }, 
    config: { 
     dataAutoId: 'someid2', 
     items: [{ 
      xtype: 'panel', 
      html: 'so here i want to use value of property1', 
      cls: 'some', 
      id: 'someid3', 
      dataAutoId: 'someid' 
     }] 
    }, 
    constructor: function() { 
     this.callParent(arguments); 

     // here i have implemented some asinhronous logic 
     // and as a result set value of property1 
     var statics = this.statics(); 
     this.property1 = 'test string'; 
     this.down('#someid3').setHtml(this.property1); 
    } 
}); 

Answer 2

Uncaught Error: The following classes are not declared even if their files have been loaded

Это просто означает, что у вас есть несоответствие между тем, что ваши исходные файлы называются и какие классы они на самом деле объявить. Например, у вас может быть файл Foo.js, но на самом деле он содержит Ext.define('Bar'....

In constructor I'm have asynchronous logic and fill some static properties. I want to use value of this static properties when creating items of container. How I can solve this problem?

Просто имейте в виду: этот подход будет иметь смысл только в том случае, если элементы добавляются через некоторое время с момента постройки вашего Container. Использование этого подхода для элементов, указанных в конфигурации items, не будет работать просто потому, что элементы будут созданы до завершение вашей асинхронной логики. Поэтому, если вам нужно использовать эти статические свойства для элементов, указанных в конфигурации items, вам необходимо взять свою асинхронную логику за пределы вашего Container и построить ее только после того, как будут доступны свойства.