ExtJs 4 +部署時的PHP - 類加載

我正在使用基於ExtJS 3的視圖維護Zend應用程序。最近，我正在遷移到基於ExtJS 4 MVC的應用程序。ExtJs 4 +部署時的PHP - 類加載

背景

隨着ExtJS的3我用結合的ExtJS庫+我所有的JS文件，包括在Zend的佈局（我們稱之爲combine.js）。

<script type="text/javascript" src="combine.js"></script>

我所需要做的就是滿足組合文件中的依賴關係。

現在，試圖用Zend生成我的視圖來完成ExtJS 4 MVC方法，但我遇到了新的Ext.Loader帶來的多個問題。我的Zend佈局由

<script type="text/javascript"> 
Ext.application({ 
    name: 'demo', 
    appFolder: 'app', 
    controllers: [ 
    // controllers list here 
    ], 
    launch: function() 
    { 
    // viewport + page items 
    } 
}); 
</script>

而且，在HEAD部分我仍然堅持同樣的方法，包括一個組合文件（ExtJS的4 +庫我所有的js文件）。從理論上講，我將所有的js依賴都滿足了，因爲我在我的代碼之前包含了整個庫。

問題

我遇到了許多問題與新的類加載機制。假設我只有一個控制器，一個視圖和一個商店的ExtJS的一面：

GET http://myPage/demo/myModule/store/MyStore.js?_dc=1390226857962 404 (Not Found)

禁用分機：

Ext.define('demo.myModule.controller.MyGrid', function() { 
    extend: 'Ext.app.Controller', 
    stores: [ 'demo.myModule.store.MyStore' ], 
    views: [ 'demo.myModule.view.MyStore' ] 
    ... 
});

渲染這樣的頁面Ext.Loader試圖獲取不存在的資源最終.Loader結束了：

Uncaught Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: demo.myModule.controller.MyGrid

由於ExtJS的4是一個非常受歡迎的庫，一定有人之前擊中同一絆腳石。解決這個問題的正確方法是什麼？順便說一句。我問這個問題已經花了幾天時間在ExtJS文檔+官方教程上，嘗試了Sencha CMD，但是我沒有得到確切的問題。

編輯： 我已經添加了一個示例項目，顯示問題：https://github.com/mirfilip/extjs-zend。您可以看到包含簡單類demo.myModule.view.Panel的app.js。在application/layouts/scripts/layout.phtml中，您可以看到整個庫+ app.js已加載（按順序）。當你嘗試渲染項目時，它會顯示空白頁面。但是，如果你去佈局並取消註釋第23-33行（並註釋掉第11行中app.js的附加內容）並進行渲染，則效果很好。唯一的區別是我的類被定義在哪裏。在類之間不應該有可能的時間競爭，因爲Ext.application的創建被包裝在Ext.onReady中。有任何想法嗎？

來源

2014-01-20 cellardoor_ncx

我不使用Zend Studio，所以我不能給出具體的答案。我會告訴你我的代碼，我如何將ExtJs整合到我自己的自制框架中。

這是我開發網站上的html代碼，它將使用Ext.Loader來動態加載類。

<!-- <x-compile> --> 
    <!-- <x-bootstrap> --> 
     <link rel="stylesheet" href="bootstrap.css"> 
     <script src="ext/ext-dev.js"></script> 
     <script src="bootstrap.js"></script> 
    <!-- </x-bootstrap> --> 
    <script src="ext/locale/ext-lang-fr.js"></script> 
    <script src="app.js"></script> 
<!-- </x-compile> -->

這將然後編譯到：

<link rel="stylesheet" href="resources/Mb-all.css"/> 
<script type="text/javascript" src="app.js"></script>

這個文檔片斷在build/production/MyApp/index.php文件夾中找到。然後我有一個構建腳本來獲取這個文件並將它複製到應該用於php框架的地方。

我希望這會給你一個想法來解決你的具體問題。

重要提示：app.js是sencha cmd自動生成的文件。 這在開發環境和測試環境中是不一樣的。

在開發它只是包含了這樣的文字：

/* 
    This file is generated and updated by Sencha Cmd. You can edit this file as 
    needed for your application, but these edits will have to be merged by 
    Sencha Cmd when upgrading. 
*/ 

Ext.application({ 
    name: 'Mb', 
    extend: 'Mb.Application', 
    autoCreateViewport: true 
});

在生產環境不受它所包含的應用程序的完整，精縮JavaScript源。

來源

2014-01-21 16:53:59

我不使用Zend Studio作爲IDE。如果我正確地理解了你，這就是你所做的： 1.用你的第一個片段創建.html文件（我認爲ext-dev.js是框架，app.js是你的代碼）。 2.將Sencha CMD指向該.html，它編譯爲第二個片段。然後你將這個片段包含在你的框架的入口點（在我的例子中是Zend Layout）。所以底線是創建一個包含庫+我的JavaScript代碼的臨時.html文件，在其上運行Sencha CMD，生成新的css＆js文件，並將它們包含在您的框架中。我能理解嗎？ –

是的，你明白了。唯一的事情是，app.js不是你的想法。我編輯了這篇文章，以更好地解釋。 –

謝謝你，這個想法現在對我來說似乎更清楚了。我一定會嘗試它並回到這裏。謝謝。 –

可能你必須在組合的應用程序js文件之前指明Ext類的路徑。我使用的是相對於域根目錄（'/ app'而不是'app'）的路徑。

<script> 
Ext.Loader.setConfig({ 
    paths : { 
     'demo' : '/app' 
    }, 
    enabled: true 
}); 
</script> 

<script src="combine.js" />

來源

2014-06-20 23:20:48 liberborn

關鍵是我不想使用Ext.Loader。通過包含組合文件（捆綁我的Ext.Define（'my.namespace.here'）），我已經遇到了所有的依賴關係。在頁面加載的時候，你可以做console.log（my.namespace.here），你可以看到這個類。總結一下，我將combine.js與所有的Ext.defines結合在一起。我想我已經接近這個問題了。假設我有一個Ext.define在我的combine.js中擴展了Ext.panel.Panel，它會： 1.嘗試加載Panel.js - 啓用Ext.Loader（並失敗） 2.顯示白頁沒有任何錯誤 - 禁用Ext.Loader –

您可以啓用分機。加載程序用於調試目的。如果它加載了一些ext類，即使你有combine.js，這可能意味着該類沒有及時定義（在combine.js中錯誤的順序）。玩類的定義通常解決了這個問題。 – liberborn

我也是如此。啓用Ext.Loader確實會嘗試加載類。它失敗了，因爲我處理的是非定製文件結構，其中每個文件規則沒有遵循一個類。我也嘗試拆分組合文件，首先包含庫，然後是我的app.js，爲了調試目的，它只包含一個擴展了Ext.panel.Panel的類。包含文件的順序表明在類之間不應該有時間競賽。它仍然失敗。我將準備一個演示項目並上傳到github，以便您更好地瞭解我所要做的。 –

ExtJs 4 +部署時的PHP - 類加載

回答

相關問題