Опять у меня непонятки с билдом
 

В общем есть проект.

В development все отлично работает(использую app watch)
Делаю app build production. Все отлично компилируется.

Запускаю приложение.
Рисуется интерфейс. все хорошо.
далее пытаюсь запустить функционал системы. т.е. например жму кнопку которая должна сделать и добавить в существующую таб панель вкладку

Примерно так:

newView = Ext.create('Admin.view.modeulename.Main');
mainCard.add(newView)

Так вот выяснилось что в продакшене код:

Ext.create('Admin.view.modeulename.Main');

Вызывает ошибку: http://localhost/.js 404 (Not Found)
Т.е. вместо Admin.view.modeulename.Main у меня почемуто пустота.

И так с любым Ext.create()

Если в консоли набирать Admin.view.... то хром все видит и знает. т.е. предлагает дополнить.

Ктонибудь сталкивался с таким? куда копать ума не приложу

В Application.js:

requires: ['Admin.view.modeulename.Main']

Да вроде как стоит

requires: [
        'Admin.*'
    ],

Ну и как я уже сказал. Если в консоле набирать Admin.View и т.д. то видно что браузер знает такой этот компонент и по логике он уже должен быть загружен.

Тут как будто просто стирается текст Admin.view.modeulename.Main
Потому как он пытается загрузить localhost/.js

Нашел еще одну особенность.
Если я вместо Admin.view.modeulename.Main напишу Admin.view.modeulename.Mainsd

То ошибка таже. но пишет уже подругому:
localhost/app/view/objects/Mainsd.js 404 (Not Found)

"modeulename" - тут нет опечатки? Так и должно быть?

Когда вы вызываете Ext.create() на несуществующий класс, динамический загрузчик попытается найти и загрузить этот класс синхронным Ajax запросом. Это работает в отладочном режиме; в боевой сборке динамический загрузчик отключен и вы видите то, что наблюдаете.

Две рекомендации: прописывайте иерархию в requires и не используйте Ext.create(), никогда. Оно есть зло.

Все так но у меня както не так. :)
Если класс существует он пытается загрузить js файл без имени.
Если не существует то имя и путь файла вполне себе нормальные.

Как создавать экземпляры компонентов? Использовать new?
С new ситуация аналогичная.

Ну и за основу был взят admindashboard template. в котором используется Ext.create().

Не переживайте, это не только у вас. :) Много, очень много непоняток тянется со времён Ext JS 4.0, когда появилась система классов и динамический загрузчик. Тогда "волшебная" загрузка JavaScript файлов "сама по себе" воспринималась как могучая фича; тогда же и родились рекомендации использовать Ext.create() всегда и везде, потому что оно же волшебное - если вы случайно забыли указать класс в requires, то Ext.create() всё за вас сделает! Магия.

Однако же как обычно и случается, магия сломалась при лобовом столкновении с реальностью. Динамическая синхронная загрузка, которая сносно работала для крохотных страничек с примерами кода, оказалась слишком медленной для реальных приложений, состоящих из пары сотен классов. Это когда вам нужно сперва загрузить один файл, дождаться окончания парсинга, пройти через несколько асинхронных стадий создания класса и внезапно обнаружить, что данный класс зависит от другого класса, который опять надо синхронно загрузить, распарсить, начать создавать... Понимаете, да? А потом за время пути собачка слегка подросла, и вместо пары сотен классов в приложениях стало по тыще-две, включая сам фреймворк.

Отсюда и необходимость инструментария. Сперва Sencha SDK Tools, потом Sencha Cmd. А когда есть инструментарий, костыли навроде Ext.create() уже не нужны в принципе - потому что класс гарантированно будет существовать к моменту, когда вы попытаетесь использовать его через new Ext.Foo(). Более того, в редких случаях когда Cmd не отлавливает зависимости автоматически, Ext.create() будет стрелять вам в ногу, и очень больно, т.к. вместо легко исправимой ошибки на этапе сборки вы получите непредсказуемую ситуацию с попытками динамической загрузки файлов неизвестно откуда, да ещё и синхронно. С боевого сервера, ага.

Именно об этом я выше и писал: непредсказуемость ситуации с динамической загрузкой. Это только с первого взгляда кажется, что всё очень просто: да вот же путь к моей директории с приложением, склеить её с именем класса и загрузить, и всё! А фигвам, как насчёт разных путей для фреймворка, сторонних библиотек, ваших классов? Как насчёт случаев, когда в один файл пихают несколько классов? Откуда эту информацию брать?

В dev и test сборках эта информация содержится в объекте Ext.manifest, который создаёт Cmd. А вот в боевой сборке манифеста нет, потому что она по определению боевая и должна содержать в себе всё необходимое. Поскольку манифеста нет, то и динамический загрузчик обламывается с треском.

Да, используйте new Ext.Foo() вместо Ext.create('Ext.Foo'). Если для сборки используете Cmd, то все пути и зависимости должны определяться автоматически - Cmd умная штука, она понимает оператор new и многие другие способы.

Если пути не определяются, то у вас что-то не то с настройками в app.json. Рекомендую копать в эту сторону.

К сожалению, Ext.create() до сих пор используется очень много где. Просто потому, что большая часть примеров писалась во времена, когда Cmd ещё не было и динамическая загрузка была настойчиво рекомендована к использованию. Те времена давно прошли, но радиоактивные осадки всё ещё выпадают нам на голову. :(

Спасибо за столь подробный развернутый ответ! :thanks:

Очень нужная информация!

Будем переделывать на new!

Раз тут зашел такой разговор, то можно и я вклинюсь? Вот есть функция widget (http://docs.sencha.com/extjs/5.1/5.1...-method-widget). По документации, это хелпер для Ext.create. Вопрос: а стоит ли тогда этот виджет использовать?

И у меня вопрос.
Как сделать динамический new?

Т.е. задача. Есть меню. у кототорого в настройках прописан код.
при нажатии котроллер делал Ext.create('Путь. путь' + код + "Main")

Соответственно Ext.create('Путь. путь' + код + "Main") нужно поменять
Попробовал new Путь. путь[ код ].Main
Ошибка ровно та же. Если целиком путь прописываю( т.е. не динамически) то работает

eval?

Ext.widget() это полезная функция как раз для таких случаев, которые описывает XAPuTOH: когда имя класса или xtype становится известно только на этапе выполнения кода.

Примерно вот так:

Или даже вот так:

Конечно же в подобных случаях можно использовать и Ext.create(), это будет вполне оправданно, поскольку оператор new не принимает строчные значения.

Однако я всё же рекомендую использовать Ext.widget() по двум причинам: а) эта функция более гибкая и умеет принимать xtype вместо имени класса, б) для стандартизации. Ext.create() имеет слишком размытую семантику, лучше избегать этой функции в коде даже для динамических случаев. Ext.widget() же однозначно говорит "создай мне объект по динамической информации".

Также рекомендую использовать xtype вместо прямого именования классов в коде. Это даст возможность сделать код более декларативным, что вообще очень полезно и сильно облегчает жизнь. Я когда-то давно написал на эту тему статью на StackOverflow, эта информация всё ещё актуальна: http://stackoverflow.com/questions/1...81965#18281965

Похоже у меня что то с настройками. Ext.widget() тоже не работает.

Везде ошибка:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check [url]https://xhr.spec.whatwg.org/[/url].
GET [url]http://192.168.20.110/.js?_dc=20160406074105[/url] 404 (Not Found)
VM1137:3 Uncaught TypeError: c is not a constructor

Ошибка в куске кода индекс файла в разделе <script id="microloader">

nohuhu, где и что посмотреть? в app.json вроде все как надо. Уверен что какая то незначительная ошибочка.

В общем победил!
Была у меня в панеле такая настроечка:

layout:{
        type: 'border',
        padding: 5
    },

Когда я для теста прописал ручками создание компонента и у меня заработало. Я заметил предупреждение:[Ext.Loader] Synchronously loading 'Ext.layout.container.Border';

Заметил но особо значения не придал.

Потом начал проводить разные эксперименты по выявлению причин и выяснил. что не грузится только определенный вид панелей.

В котором как раз layout ='border'

В итоге я попробовал прописать его:

requires: [
        'Admin.*',
        'Ext.layout.container.Border'
    ],

И вуаля. Все заработало.

Вот такие пироги.

Как я и говорил: не хватало класса Ext.layout.container.Border, а динамический загрузчик не мог сформировать для него правильный URL, поскольку нет манифеста и неоткуда взять информацию о пути и имени файла.

Прописывайте все зависимости в requires и будет вам счастье.

Тут вопрос как узнать зависимость.
Почему он Ext.layout.container.Border не знает, а Ext.layout.container.Fit знает?

Потому что fit layout активно используется и внутри фреймворка, например Ext.panel.Table (предок Ext.grid.Panel) имеет зависимость от Ext.layout.container.Fit. Поэтому если вы используете Grid где-либо в вашем приложении, то все его зависимости будут включены автоматически.

А вот border layout внутренне нигде не используется, поэтому зависимость от него нужно указывать явно.

Понял! Спасибо за ответы!