包含extjs6項目編譯的詞條

本文目錄一覽：

• 1、好煩哦，eclipse導入Extjs後每次操作都要build workspace，怎麼弄啊？
• 2、使用Extjs6.0開發應用。build生成的app.js過大有沒有解決方案？
• 3、關於一個ExtJs框架應用上的一個小問題~O(∩_∩)O~
• 4、extjs怎麼獲取後台的數據或者是變量。。。求大神速回？
• 5、Extjs 中的ext-all.js 中報Microsoft JScript 編譯錯誤: 缺少 ‘}’，代碼如下，請幫忙，我沒找到那裡錯了。
• 6、如何在ExtJS 6中使用Fashion美化應用程序

好煩哦，eclipse導入Extjs後每次操作都要build workspace，怎麼弄啊？

可以在window選項中選擇Preference-startup and shutdown 將不必要的預編譯去掉，eclipse就不會自動去編譯一些插件了

使用Extjs6.0開發應用。build生成的app.js過大有沒有解決方案？

e，這個問題，我來答最合適了，兩個都用過。總體來說還是apicloud靠譜。ide開發工具hbuilder好一些，關鍵是hbuilder的核心技術不怎樣；apicloud主要突出的就是開發出來的app性能好，最主要apicloud封裝了很多原生效果模塊，開發的時候直接調用就ok了，用起來比較省事兒，效果還堪比原生。apicloud還有一個優點就是跨平台呀，用javascript就能開發原生應用，一套代碼，同時編譯出兩個原生app，那叫一個簡單呀，節省效率！順便說一句，不知道你用得上不，apicloud還有後端的api服務和數據存儲服務，可以直接給app建數據庫，前端、後端一起搞定！

關於一個ExtJs框架應用上的一個小問題~O(∩_∩)O~

我的印象中好像JS是分塊編譯的，只預編譯方法類的代碼。變量類的按順序編譯。

extjs怎麼獲取後台的數據或者是變量。。。求大神速回？

1. 使用form表單提交

使用表單提交是調用了表單的submit方法，其配置項包括url、method等。這種方式能夠以JSON的形式提交參數信息。

var myform = Ext.create(‘Ext.form.Panel’,{undefined

defaultType: ‘textfield’,

items:[{undefined

fieldLabel : ‘Name’,

name : ‘name’

},{undefined

fieldLabel: ‘Gender’,

name : ‘gender’

},{undefined

fieldLabel : ‘Age’,

name: ‘age’

}],

buttons: [{undefined

text : ‘load’,

handler : function(){undefined

this.up(‘form’).getForm().submit({undefined

url: ‘/request/userinfo’,

method : ‘POST’,

success : function(form, action){undefined

console.log(form);

Ext.Msg.alert(‘title’, ‘load success’);

});

}]);

2. 使用Ajax異步提交

將上述handler方法中的內容換成一下代碼即可。在Ajax的request方法中是一個配置對象，其配置參數包括url，type，params。其中params表示要提交的參數，在此例中是從form表單中通過getValues()方法獲得的。該種方式也能將參數一JSON的方式提交到後台，與一個對象匹配。

var values = this.up(‘form’).getForm().getValues();

Ext.Ajax.request({undefined

url:’/request/userinfo’,

headers : {undefined’userHeader’: ‘userMsg’},

type:’POST’,

params:values,

success:function(response){undefined

var data = response.responseText;

console.log(data);

console.log(“success”);

},

});

3. 使用Ext.data.Store

在項目中經常需要通過提交一些數據來從後台獲取相應的信息。例如，在表單中輸入某個人的id和name就可以查出它的相關信息並在前台顯示。一個關於extjs的例子如下：

//data Model

Ext.define(‘User’,{undefined

extend: ‘Ext.data.Model’,

fields: [{name:’name’,type:’string’},

{name:’gender’,type:’string’},

{name:’age’,type:’string’}

]

});

var userStore = Ext.create(‘Ext.data.Store’,{undefined

model: ‘User’,

pageSize: 20,

// autoLoad : true,

proxy: {undefined

type : ‘ajax’, //提交數據的方式

url : ‘/request/userinfo’,

reader : { //以json的形式讀取將要提交的數據

type : ‘json’,

root : ‘resultList’

},

writer : {undefined

type : ‘json’

},

actionMethods : {undefined

create : ‘POST’

}

},

});

//grid Panel

Ext.create(‘Ext.grid.Panel’,{undefined

store: userStore,

columns: [

{header : ‘Name’, dataIndex : ‘name’},

{header : ‘Gender’, dataIndex : ‘gender’},

{header : ‘Age’, dataIndex : ‘age’}

],

height: 200,

width: 400,

renderTo: ‘div2’

});

//form Panel

var myform = Ext.create(‘Ext.form.Panel’,{undefined

defaultType: ‘textfield’,

items:[{undefined

fieldLabel: ‘Name’,

name: ‘name’

},{undefined

fieldLabel: ‘Gender’,

name: ‘gender’

},{undefined

fieldLabel : ‘Age’,

name : ‘age’

}],

buttons: [{undefined

text: ‘load’,

handler: function(){undefined

var values = this.up(‘form’).getForm().getValues();

console.log(values);

userStore.proxy.extraParams=values;

userStore.loadPage(1);

}

}

});

在handler方法中獲取form表單的參數後，賦值給userStore.proxy.extraParams，然後調用userStore.loadPage(1)。調用loadPage()方法時，會委託給proxy對象去後台獲取數據。所以對proxy的配置是核心。使用這個方式從後台獲取數據時，後台接口返回的對象應該包括一個List字段，list中包含所需要的具體信息。比如

@ReponseBody

public UserInfoResp getUserInfo(User user) {undefined

}

UserInfoResp應該像這樣有一個List字段

class UserInfoResp {undefined

ListUser resulltList;

}

Extjs 中的ext-all.js 中報Microsoft JScript 編譯錯誤: 缺少 ‘}’，代碼如下，請幫忙，我沒找到那裡錯了。

我認為二樓的正解，如果是你寫的js報錯，他不會在ext-all.js里報錯。應該是返回字符串錯誤Ext.util.JSON.decode不陳成功。一樓的看來程序的概念不熟練，雙引號內的字符串只是一個值，不會涉及到任何語法問題的。無論裡面有什麼符號他也不會被編譯執行的，也不會報錯

如何在ExtJS 6中使用Fashion美化應用程序

在本文，重點是Sencha Fashion。這是什麼？該如何使用它呢？在未來陸續的教程中，將為你展示如何去創建一個極好的暗黑主題。

編譯主題

Ext JS應用程序的主題使用的是SASS，它是一種動態編寫CSS代碼的方法。例如，可以在樣式表中使用變量和運算。瀏覽器並不了解SASS，它只知道CSS，隱藏，這些SASS主題需要被編譯為瀏覽器能理解的，生產用的CSS代碼。在Ext JS應用程序中可以通過在Sencha Cmd運行以下命令來編譯主題：

view sourceprint?

1.sencha app build [development]

或

view sourceprint?

1.sencha app watch [toolkit]

兩者的區別在於watch會通過輪詢來了解更新，並理解進行編譯，而build編譯只能手動執行一次。

在舊版本的Ext JS或Sencha Touch，SASS樣式是在Ruby中編譯的。在Windows，需要使用管理員權限來安裝Ruby。一旦安裝完成，就可以開始編譯主題了。不過，在有大量代碼庫和高級主題的時候，就要花費大量的編譯時間。

為了編譯高級主題，有時候需要花費一分鐘。然後，你不得不刷新瀏覽器窗口來測試主題以確保已正確設置SASS變量。之後還要一次次的重複此過程。要知道，這個過程是相當耗時間的。這也是為什麼對Fashion感到高興的原因。

Sencha Fashion是使用javascript來編譯主題的，可以說這是超級的快。當在左邊的顯示器修改一行代碼後，就可以右邊的顯示器看到變化了，就是這麼快。不再需要等等編譯（在服務器開始），也不再需要刷新瀏覽器窗口。

由於Fashion使用的是javascript，因而有更多優點。例如，可以在Fashion之上進行擴展並創建自己的樣式功能（類似SASS功能），還能調試樣式表代碼。

不過，最大的得益還是可以在開發機器上設計主題。要實現這個，只需要在命令行運行sencha app watch並在URL中添加以下參數：

view sourceprint?

platformTags=fashion:true