1. Extjs4如何自動生成控制grid的列顯示、隱藏的checkbox
由於某種原因，需要做一個控制grid列顯示的checkboxgroup，雖然EXTJS4中的gridpanel自帶列表可以來控制列的顯示隱藏，但是有這樣的需求（需要一目瞭然）
下面先上圖
接著前幾天做的工作，今天上午完成了定製欄位，思路是在上面的普通查詢或者高級查詢結束以後，獲得了列的fields，columns等信息，然後交給一個處理函數
makeCustomMadePanel，該函數用來生成checkboxgroup，生成的時候給它加上一個事件，原本以為checkbox會有類似於check的事件，結果API看了看貌似只有個change事件可以用，MD。。
下面貼下自己寫的
makeCustomMadePanel函數。。用來根據grid的列自動生成checkboxgroup（整個grid的標頭內容等信息均從後台得到，不管後台發來一個什麼表，都能生成一個checkboxgroup來控制列的隱藏顯示）
參數分別是gridpanel在reconfigure的時候用到的fields和columns,期中的var
t=grid_a.columnManager.headerCt.items.get(th.itemId);是關鍵。。這句用來獲得grid_a的列信息。。貌似在api中查不到。網上找了幾中方法都不適合。又不想給每個列一個ID。這是在stackoverflow.com/上找到的。。http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly
復制代碼
代碼如下:
function
makeCustomMadePanel(fields,cl)
{
var
x=cusMadePanel.getComponent('custom');
//console.log(cusMadePanel.getComponent('custom'));
for(var
i=0;i<fields.length;i++)
{
x.add(
{
xtype
:
'checkboxfield',
boxLabel
:
cl[i].header,
inputValue
:
fields[i].name,
checked:true,
itemId:i,
name
:
'custom',
listeners
:
{
change
:
function(th,
value,
oldValue,eop)
{
var
t=grid_a.columnManager.headerCt.items.get(th.itemId);
if(t.isVisible()){
t.setVisible(false);
}
else{
t.setVisible(true);
}
//grid_a.columns[3].setVisible(false);
}}
}
);
}
}
在給出customMadePanel
復制代碼
代碼如下:
Ext.define('customMadePanel',
{
extend
:
'Ext.form.Panel',
title
:
'定製欄位',
collapsible
:
true,
items
:
[
{
itemId:'custom',
xtype
:
'checkboxgroup',
fieldLabel
:
'選擇欄位',
columns
:
6,
items
:
[]
}]
//collapsed:true,
});
var
cusMadePanel=new
customMadePanel();
我這種做法的不足也很明顯，makeCustomMadePanel函數中的循環生成checkbox組件太耗時了，38個組件足足花了好幾秒。。用戶體驗肯定不好。。
並且目前是在每次查詢完之後都根據查詢的結果生成一遍。。。我再想想好的解決辦法
今天對makeCustomMadePanel做了優化，生成組件的速度與先前相比提升非常明顯！
復制代碼
代碼如下:
function
makeCustomMadePanel(fields,cl)
cusMade=1;
var
x=cusMadePanel.getComponent('custom');
//console.log(cusMadePanel.getComponent('custom'));
var
fie=[];
for(var
i=0;i<fields.length;i++)
{
//x.add(
var
temp=
{
xtype
:
'checkboxfield',
boxLabel
:
cl[i].header,
//inputValue
:
fields[i].name,
checked:true,
itemId:i,
name
:
'custom',
listeners
:
{
change
:
function(th,
value,
oldValue,eop)
{
var
t=grid_a.columnManager.headerCt.items.get(th.itemId);
//console.log(t.isVisible());
//console.log('break');
if(t.isVisible()){
t.setVisible(false);
}
else{
t.setVisible(true);
}
//console.log(t.isVisible());
//var
t1=grid_a.columnManager.headerCt.items.get(th.itemId);
//console.log(t1);
//grid_a.columns[3].setVisible(false);
}}
};
//console.log(temp);
fie.push(temp);
}
//console.log(fie);
x.add(fie);
思路就是先循環組好需要生成的組件對象，然後一次add，每一次add的開銷非常大，變為一次速度真的提升了很多很多~
2. ExtJS4問題：window關閉後，其html代碼未自動移動。l
關鍵是你window是怎麼來的，好像是調用一次你就new一個、沒有公用同一個窗口。
你給window定義一個ID每次都用這個實例來彈出消息看看
3. easyui和extjs哪個好
作為ExtJs和EasyUI都用得很熟練的一個老資格程序員，我發表一下我的看法。
首先兩個框架的組件都很豐富，商業應用都要收費。ExtJS的動態性和擴展性更好，從使用效果看，easyui的組件相對體驗更好一點。
ExtJS
優點：1.完全開源，我說的開源的意思並不是說不收費。
2.我非常贊賞它的架構設計，完全的面向對象的組件化設計。所有的組件都是從一些基礎的組件派生出來的，並且提供了overide,extend等擴展方式，可以說能夠任意擴展。可能一些半桶水的人覺得ExtJS很難用，那是因為他們只懂皮毛。
3.ExtJS的文檔和實例做得比EasyUI要好得多，基礎比較好的開發人員只用看官方的文檔、demo、適當參考源碼就能夠完成任何工作，遇到問題完全不用去網路或論壇問其他人。
4.可以完全動態開發,代碼都寫在JS文件里，不像ExtJS那樣非得在頁面放一個DOM元素。所以可以自己定製組件在任意頁面引用，復用性好。
缺點：1.可能太多人用，造成審美疲勞，反正我看膩了它的界面，自己定製界面主題有太難。
2.可能因為它太龐大，不像easyUI那樣基於頁面已有的HTML
DOM渲染，所以一般人覺得比較難(但是話有說會來，如果使用者的水平高的話，這其實也是也是它的優點。因為你要是在同一個界面點擊不同按鈕要動態顯示各種各樣不同的window、form等等的話，只要把這些JS引用到當前頁面就可以吧，見上述優點4）。
easyui
優點：
1.在頁面的DOM元素加一些屬性然後加幾行JS就可以動態構造出相應的組件。開發方式相對ExtJS直觀和簡潔一些。
2.組件相對體驗更好一點，界面好像跟干凈簡潔。
缺點：1.半開源，對於一個高手來說看不到源代碼是很痛苦的，事，因為他們總有這樣那樣的擴展需求。
2.一定要在頁面上放置相應的DOM元素才能渲染（如果不對dom元素設置隱藏的話，在頁面沒有渲染過程中會顯示一堆亂七八糟的東西）所以無法自己定製組件在其他頁面引用，要復用的話得搬磚一樣把JS和DOM都復制過來，遇到非常復雜的頁面那是相當雜亂和痛苦的。
4. extjs4 畫線圖
除了它們共用的坐標外，另外的一個軸上確實不能像柱狀圖放到一個數組中那樣方便了，必須在series中一個一個的繪制。
series:[
{
type:'line',
axis:'left',
xField:'months',
yField:['a']
},
{
type:'line',
axis:'left',
xField:'months',
yField:['b']
},
{
type:'line',
axis:'left',
xField:'months',
yField:['c']
}
]
5. extjs4 numberfield無法設置高度
你的高度其實已經設置了，只不過是溢出了。
把下面幾個配置都設置一下。
labelWidth , width, maxHeight
6. extjs4有免費的嗎
主要就是面向對象更加徹底吧，代碼看起來更像是面向對象的語言
7. extjs4 彈出window後只遮罩其父容器
你配置panel1加一個配置項:maskDiabled:true //在該panel被設置為diabled時啟用遮罩效果
然後在你想專panel1被遮罩時屬調用panel1.setDisabled(true)