Интегрируйте Ext JS 4.1 MVC приложение в переписанный URL (mod_rewrite) при разработке и производстве

Создание нового приложения Ext JS 4.1.1 на основе раздела структуры файла в руководстве Sencha по архитектуре приложений MVC. В итоге получается следующая структура:

/wwwroot
    /myapplication
        /app
            /controller
            /view
        app.js
    /extjs-4.1.1

Файл app.js содержит:

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    appFolder: '/myapplication/app',
    autoCreateViewport: true,
    name: 'MyApplication',
    controllers: [
        ...
    ]
});

Все хорошо. Затем я включаю файл app.js для вывода в мое серверное MVC-приложение (не путать со структурой Ext JS MVC на стороне клиента). Используемый язык и структура серверного приложения не имеют значения для этого вопроса, но результат вывода. В разработке URL-адрес приложения:

http://servername/someidentifier1/someidentifier2

Как и во многих приложениях, mod_rewrite используется для придания значения идентификаторам и сопоставления URL-адреса с кодом на стороне сервера. Эти идентификаторы не отображаются на "физические" каталоги. Выход этого URL:

<!DOCTYPE html>
<html>
<head>
<title>MyApplication</title>
<link href="/extjs-4.1.1/resources/css/ext-all-debug.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="/extjs-4.1.1/ext-debug.js"></script>
<script type="text/javascript" src="/myapplication/app.js"></script>
</head>
<body>
</body>
</html>

Ext JS находится не в рекомендованном по умолчанию месте, а /wwwroot/myapplication/extjs-4.1.1, но вместо этого на один уровень выше, поскольку он используется несколькими приложениями. Если вы посмотрите на app.js выше, вы также заметите параметр appFolder, который необходимо установить, чтобы он работал с "несуществующим" URL.

Все это прекрасно работает при разработке, но следующим шагом является создание "сборки" кода с помощью Sencha SDK Tools (вопрос основан на версии 2.0.0 Beta 3 для Windows). Вот где это идет не так. Я делаю эти шаги:

  1. Командная строка Я захожу в каталог / wwwroot / myapplication.
  2. Я исполняю sencha create jsb -a http://servername/someidentifier1/someidentifier2 -p myapplication.jsb3 создать файл jsb3.
  3. Я исполняю sencha build -p myapplication.jsb3 -d .

Сборка не удалась. В этом случае, потому что он пытается найти пользовательский код, например, для контроллеров по пути c:\...\myapplication\myapplication\app\controller: текущий путь + параметр appFolder. Можно было бы предположить, что лучше запустить его на один уровень выше, но тогда он не сможет найти каталог (shared) extjs-4.1.1.

Я предполагаю, что время сделает структуру Ext JS MVC и SDK Tools более гибкой, и немного отклоняться от структуры по умолчанию не рекомендуется. Все приемлемо, но с другой стороны: интеграция Ext JS 4.x (Ext JS в MVC-стиле) с перезаписью URL (mod_rewrite) тоже должна быть очень распространенной практикой?

Любая предложенная рабочая установка / структура будут высоко оценены.

Цели должны быть:

  • Нет ручного редактирования файла jsb3.
  • Сохранение каталога extjs-4.1.1 на верхнем уровне для совместного использования приложениями.
  • Отсутствие файла app.html, поскольку он никогда не используется в серверных приложениях MVC и в противном случае потребовал бы обновления вручную.
  • Хорошим дополнением было бы содержание app.js внутри сгенерированного HTML на стороне сервера, поскольку тогда он мог бы получать динамически генерируемые параметры.
Источник

3 ответа

Создание файла index.html для генерации файла проекта будет одним из способов. Я также обнаружил, что Sencha Architect очень жесткий и сложный в использовании. Самое неприятное, что я не могу использовать внешний редактор для редактирования сгенерированного кода. Все должно быть сделано в дизайнере, и это хорошо, если дизайнер может предоставить все необходимые мне функции. Но это не может.

Источник

Пара вещей.

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

...
appFolder: 'app' // should be enough
...

Во-вторых, что касается различий между сборкой и производством, я получил два файла.html - index.html и index-dev.html. Эти файлы не изменяются (после их настройки), поэтому синхронизировать их не проблема.

Вы используете index-dev.html для нужд разработки, отладки, а также для процесса сборки. В основном этот файл настроен для вашей локальной среды разработки.

index.html просто использует комбинированную и сокращенную версию вашего app.js и настроен для производственного развертывания.

Источник

Используя переписывание модов вы можете использовать слегка модифицированный файл.htaccess от Symfony

<IfModule mod_rewrite.c>
    RewriteEngine On

    #<IfModule mod_vhost_alias.c>
    #    RewriteBase /
    #</IfModule>

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ app.php [QSA,L]
</IfModule>

Этот файл позволит вам

  • получить ресурс с сервера, если это настоящие файлы (css, js, images и т. д.)
  • преобразовать части URL в параметры запроса, если в файловой системе сервера нет совпадений.

Это должно работать на вашей установке, просто измените строку app.php на точку входа вашего приложения

для установки каталогов у вас все в порядке, просто пара вещей:

  • ваши инструменты SDK устарели, так как вы можете скачать: http://www.sencha.com/products/sencha-cmd/download/ (v3.0.0)

  • Следуя документам на http://docs.sencha.com/ext-js/4-1/, вы можете получить "сборку" с нужным вам классом, но в конце или переключиться между разработками вручную. / производственный файл javascript, или вы переключаетесь с помощью переменных окружения в вашем коде.

  • На самом деле я думаю, что вы можете использовать "поддельный" index.html в каталоге сборки, который будет изменен инструментом сборки, а затем в производственном коде вы можете имитировать код, сгенерированный сборкой sencha.

Источник
Другие вопросы по тегам