收藏

下载资源 加入VIP,免费下载

第1页 / 共26页

第2页 / 共26页

第3页 / 共26页

第4页 / 共26页

第5页 / 共26页

7.                bodyStyle :

 'padding:

5px 5px 5px 5px',  

8.                frame :

 true,  

9.                store :

 approveProjectStore,  

10.                master_column_id :

 'unitName',  

11.                cm :

 cm,  

12.                sm :

 sm,  

13.                // stripeRows :

 true,  

14.                // autoExpandColumn :

 'unitName',  

15.                viewConfig :

 {  

16.                    enableRowBody :

 true  

17.                },  

18.                plugins :

 [new Ext.ux.plugins.GroupHeaderGrid（{  

19.                                    rows :

 [[{}, {}, {}, {}, {}, {}, {}, {  

20.                                                header :

 '申请清单',  

21.                                                colspan :

 4,  

22.                                                align :

 'center'  

23.                                            }, {}, {  

24.                                                header :

 '批准清单',  

25.                                                colspan :

 3,  

26.                                                align :

 'center'  

27.                                            }, {}, {}, {}, {}, {}]],  

28.                                    hierarchicalColMenu :

 false  

29.                                }）, checkColumn],  

30.                view :

 new Ext.ux.grid.BufferView（{}）  

31.            }）;  

//立项审批grid

varapproveProjectGrid=newExt.ux.maximgb.treegrid.GridPanel（{

width:

1022,

height:

520,

minColumnWidth:

55,

title:

''+rs_.title+'',

bodyStyle:

'padding:

5px5px5px5px',

frame:

true,

store:

approveProjectStore,

master_column_id:

'unitName',

cm:

cm,

sm:

sm,

//stripeRows:

true,

//autoExpandColumn:

'unitName',

viewConfig:

{

enableRowBody:

true

},

plugins:

[newExt.ux.plugins.GroupHeaderGrid（{

rows:

[[{},{},{},{},{},{},{},{

header:

'申请清单',

colspan:

4,

align:

'center'

},{},{

header:

'批准清单',

colspan:

3,

align:

'center'

},{},{},{},{},{}]],

hierarchicalColMenu:

false

}）,checkColumn],

view:

newExt.ux.grid.BufferView（{}）

}）;

boreas_baosj（初级程序员）2009-12-14

上官网找个人家写好的吧，自己写的话，比较费时。

chanball（中级程序员）2009-12-14

newExt.ux.plugins.GroupHeaderGrid这个插件本来就是有的

boreas_baosj（初级程序员）2009-12-14

那个是我从项目里面随便拷贝的一段，是一个树形的网格，你把那个网格换成new你自己需要的网格就可以了，其实很简单，一个普通的网格就可以了，下面这段代码花括号里面什么都没有写的代表的是不需要合并的列，你网格有多少列就要用花括号在这里补齐,下面这个网格一共就有9列，另外的就很容易理解了

Java代码

1.plugins :

 [new Ext.ux.plugins.GroupHeaderGrid（{  

2.                                    rows :

 [[{}, {  

3.                                                header :

 '申请清单',//合并显示的表头  

4.                                                colspan :

 4,//合并多少列  

5.                                                align :

 'center'//表头的对齐方式  

6.  

7.                                            }, {}, {  

8.                                                header :

 '批准清单',  

9.                                                colspan :

 3,  

10.                                                align :

 'center'  

11.                                            },{}]],  

12.                                    hierarchicalColMenu :

 false  

13.                                }）],  

plugins:

[newExt.ux.plugins.GroupHeaderGrid（{

rows:

[[{},{

header:

'申请清单',//合并显示的表头

colspan:

4,//合并多少列

align:

'center'//表头的对齐方式

},{},{

header:

'批准清单',

colspan:

3,

align:

'center'

},{}]],

hierarchicalColMenu:

false

}）],

boreas_baosj（初级程序员）2009-12-15

看这个吧

Javascript代码

1.// 网格对象  

2.var createProjectGrid = new Ext.grid.EditorGridPanel（{  

3.            width :

 1024,  

4.            height :

 520,  

5.            title :

 '申请和审批清单：

',  

6.            bodyStyle :

 'padding:

5px 5px 5px 5px',  

7.            frame :

 true,  

8.            cm :

 cm,  

9.            ds :

 createProjectStore,  

10.            sm :

 sm,  

11.            bbar :

 pagingToolbar,  

12.            plugins :

 [new Ext.ux.plugins.GroupHeaderGrid（{  

13.                        rows :

 [[{}, {}, {}, {}, {  

14.                                    header :

 '申请清单',  

15.                                    colspan :

 4,  

16.                                    align :

 'center'  

17.                                }, {  

18.                                    header :

 '批准清单',  

19.                                    colspan :

 3,  

20.                                    align :

 'center'  

21.                                }]],  

22.                        hierarchicalColMenu :

 false  

23.                    }）]  

24.        }）;  

3333333333333

«上一页123下一页»

浏览6250次

主题：

认识Dojo中的界面控件：

Dijit

该帖已经被评为良好帖

作者

正文

∙dojotoolkit

∙等级:

初级会员

∙

∙性别:

∙文章:

38

∙积分:

90

∙来自:

上海

∙

  发表时间：

2010-09-16  最后修改：

2010-09-16

相关文章:

∙改善Dojo应用程序的初始下载时间

∙扩展Dojo0.9之ResizableDialog

∙Dojo之面向对象

推荐圈子:

javascript研究小组

更多相关推荐

看来JavaEye的群众不喜争论，更加倾向于潜心研究技术

翻译一篇，希望能帮助大家了解Dojo！

同时欢迎讨论主题相关内容。

本文翻译自：

Dojo框架区别于其他Ajax框架的一个显著特征就是它的界面控件系统：

Dijit。

Dijit是Dojo中界面控件的总称，他们使用灵活而且易于理解。

每个Dijit控件都是由Dojo类以及控件中使用的图片，CSS等资源文件共同组成。

通过Dijit架构，可以方便的创建灵活、可扩展、可定制外观的控件。

下面将逐步介绍如何创建、配置Dijit控件，从而将其用在自己的web应用中。

开始使用Dijit：

引入需要的类和资源

前面提到Dijit的组成中除了Dojo类，还有图片和CSS。

这些外观是通过Dojo框架的主题来提供的，Dojo包含了4个主题，分别是：

nihilo,soria,tundra和claro，其中claro是最新的Dojo1.5新增加的一个外观主题。

每个主题中都包含了用于定义控件外观的css和图片文件。

因此，为了使用某一个主题，我们首先需要将其导入到Web页面中：

Html代码

1.

--    

2.        /* use the tundra theme */    

3.        @import "    

4.        /* Note that if you don’t specify a minor revision, e.g. 1.5.0 or 1.4.3, the CDN will deliver the latest version */    

5.  

--

/*usethetundratheme*/

@import"

/*Notethatifyoudon’tspecifyaminorrevision,e.g.1.5.0or1.4.3,theCDNwilldeliverthelatestversion*/

当然，这个地址你也可以用你自己的：

@import"dojoroot/dijit/themes/tundra/tundra.css";

你可以用Dijit的主题查看器来查看每个主题的外观，本地也可以访问到这个主题查看器：

/dijit/themes/themeTester.html，你也可以定义自己的主题。

除了引入样式文件，当然还要引入Dojo核心本身，和其他类库一样，需要引入一个js文件。

但Dojo中可以在引用js文件的同时对其进行参数配置。

这里有一个比较重要的就是parseOnLoad参数。

这个参数使得在页面载入完成之后自动解析页面上的所有Dijit控件。

因此，引入Dojo核心库的代码如下：

Html代码

1.

true">    

true">

同理，这里的dojo.js文件你也可以直接使用本地文件。

引入Dojo核心之后，你还需要引入你所用到的控件的代码文件，这是通过dojo.require语句完成的。

例如，你需要在页面上使用一个按钮控件：

dijit.form.Button，那么你就需要在页面载入的最开始加入：

dojo.require（'dijit.form.Button'）。

这个和java的import语句或者.net中using语句的作用是类似的。

准备工作完成之后，下面我们来看如何使用dojo控件。

创建Dijit的两种方式

在Dojo中创建Dijit可以有两种方式，这也是Dijit系统最显著的特性之一：

通过HTML标记以声明方式创建

通过javascript程序动态创建

例如，一个基本的下拉框通过如下HTML表示：

Html代码

1.    

2.        Select an Arsenal Player    

3.        Andrey Arshavin    

4.        Thomas Vermaelen    

5.        

– more OPTION elements here –>    

6.   

SelectanArsenalPlayer

AndreyArshavin

ThomasVermaelen

–moreOPTIONelementshere–>

这是一个包括多个选项的静态下拉框，那么现在我们想让其支持实时过滤：

即下拉框选项会根据你输入的关键字被过滤，缩小选项范围。

在Dijit中有相应的控件来实现这个特性：

dijit.form.FilteringSelect.因此，我们首先需要引入这个控件：

Js代码

1.dojo.require（‘dijit.form.FilteringSelect’）;    

dojo.require（‘dijit.form.FilteringSelect’）;

引入控件之后，我们很容易将一个静态的下拉框转变为Dijit控件。

通过声明方式创建Dijit

这种方式直接在原来的Html标记里加上Dijit相关的属性：

Html代码

1.    

2.        Select an Arsenal Player    

3.        Andrey Arshavin    

4.        Thomas Vermaelen    

5.        

– more OPTION elements here –>    

6.