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)