原文：[Training Tip: Simple Techniques for Solving Common Coding Problems](http://www.sencha.com/blog/training-tip-simple-techniques-for-solving-common-coding-problems/) 很多時候，在我教授一個Sencha培訓課程的時候，學生經常會請求我幫忙看一下他們的應用程序，因為有些問題他們不知道如何去解決。由于不是我寫的代碼，因而，有時很難快速的向他們給出答案。還好，我有一套簡單的技術，可以用來篩選出最明顯的問題。 在本文，我將對一些最常見的問題進行分類，并介紹一些簡單而有效的策略來解決這些問題。 ### 問題：我看不到我的數據 你正在瀏覽你的應用程序，單看不到任何數據。通常，該問題很容易解決。 ### 試一下以下方法： 首先，先檢查存儲（Store），可以在應用程序運行時在瀏覽器控制臺來做這個： ~~~ Ext.getStore('MyStore').load(); ~~~ 這將返回存儲對象。可以通過data配置項來模擬一些數據，然后看看數組的長度是否大于0。  如果有可用數據，那么問題可能與渲染有關。考慮以下這些可能出現的問題： 沒有將數據字段映射到模型的字段？ 數據數組是否為空？在瀏覽器開發者工具欄，單擊網絡標簽頁。 狀態碼是否200？如果不是，那就是請求出了問題，要檢查模型或存儲的代理。 請求工作正常，但仍然沒有數據顯示？那就要確認返回的數據是否有效。例如，當返回的數據格式是JSON格式的時候，可以從瀏覽器的網絡標簽頁中將返回的數據復制到http://jsonlint.com或http://jsonplint.com/來驗證數據是否有效。還可以手動編寫一些測試數據。 ### 問題：不能生成應用程序 Sencha Cmd不能生成應用程序。大多數時候，Sencha Cmd會很清晰的描述這是怎么回事或者需要做什么改變。不過，無論是現在還是以后，都會碰到Sencha Cmd不能生成的問題，而且錯誤描述也不太清晰的情況。 這很有可能是代碼存在錯誤。例如，代碼可以很完美的在本地環境運行，但是不能生成。 ### 試一下以下方法： 這個方法非常激進，但大多時候很有效。在命令行使用相同的命名空間創建一個新的應用程序： ~~~ sencha generate app App ../myapp ~~~ 下一步，把app文件夾復制過來，并確保app.js也做了相應的修改。 現在，再試一下。 ### 問題：奇怪的組件-x行為 這類型的問題一直很難去處理。 例如，在網格中不知道為什么顯示了多個滾動條，又或者，在標簽頁面板中的顯示樣式是錯誤的。要在應用程序中解決這類問題非常的費時。這不但需要通過應用程序的導航來重現問題，還要知道造成這問題的包括哪些因素。 ### 試一下以下方法： 開發人員常見的解決問題的方法就是將問題隔離起來，將范圍縮小，且讓數據塊更易于管理。 ### 隔離問題 使用Sencha Cmd來以相同的命名空間創建一個新的應用程序。 接著，將有問題的類復制過來并對它進行測試。 是否出現了相同的bug？嘗試在測試應用程序中解決這個問題。 還可以更進一步，嘗試通過重新創建類來進行隔離。在開始的時候只包含必需的代碼。 它能工作嗎？如果框架沒有錯誤，類也沒有錯誤，哪說明肯定是別的東西出現了錯誤。 ### ### 切換到默認主題 返回應用程序， 并嘗試切換到Sencha的默認樣式（Sencha Touch中的是Sencha默認樣式，Ext JS是海王星主題）。 能工作嗎？如果能，說明問題在自定義的樣式中。 仍然不能工作？這至少可以知道，自定義的樣式沒有錯誤。這有可能是嵌套造成的錯誤，也可能是使用了錯誤的布局。 ### 組件查詢 要想知道是否組件查詢出了問題，可以輕松的在瀏覽器的開發者工具的控制臺中進行驗證： ~~~ Ext.ComponentQuery.query('button[action="test"]'); ~~~ 是否返回了一個空數組？如果是，問題就在這里！又或者可能是返回了組件，但查詢時機錯了。在處理回調的時候，經常會發生這種事情。當代碼在執行的時候，該組件可能還沒渲染到屏幕上的。 ### 常用的調試技術 作為開發人員，碰到需要解決的bug或問題是常有的事。關鍵是，使用什么樣的工具才能讓這變得富有挑戰性，是不？ 除了上面提到的技術，還有幾個標準技巧。首先，要了解框架已經所使用的工具。閱讀API文檔（或者更進一步，瀏覽器框架的源代碼）。  將框架切換為調試框架之一。這樣做的好處是可以看到額外的日志信息，而且還可以直接閱讀框架代碼。對于Sencha Touch項目，打開app.json文件并臨時修改框架為： ~~~ "js": [ { "path": "../touch/sencha-touch-all-debug.js", "x-bootstrap": true }, ~~~ 對于Ext JS項目，打開index.html文件并臨時修改框架為： ~~~ <script src="../ext/ext-all-debug.js"></script> ~~~ 瀏覽器的開發者工具也是相當有用的（Google Chrome或Firebug）。此外，還有一些是專門針對Sencha開發使用的便利插件：illumination和Sencha的App Inspector。 如果想快速設計原型，可以嘗試使用Sencha Fiddle。 對于測試，有大量的工具可以使用 ，如Siesta。 最后但并非最不重要的是，如果以上工具都幫不了，而你已經盯著你的代碼幾個小時了，那么，請你……休息一下！通常，在休息的時候，可以放松頭腦，說不定就立馬把問題解決了。尤其是在犯了拼寫錯誤或打字錯誤（沒區分大小寫）的時候，這會讓你郁悶上幾個小時，這是因為你會忽略他們。 需要尋找更多的幫助？可以了解一下在世界各地的Sencha Ext JS或Sencha Touch的培訓課程，又或者參加在線課程。 作者：**Lee Boonstra** Lee is a technical trainer at Sencha. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She is writing a cookbook for O'Reilly about Sencha Touch.