主题认识Dojo中的界面控件DijitWord文档下载推荐.docx
- 文档编号:16211057
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:26
- 大小:119.38KB
主题认识Dojo中的界面控件DijitWord文档下载推荐.docx
《主题认识Dojo中的界面控件DijitWord文档下载推荐.docx》由会员分享,可在线阅读,更多相关《主题认识Dojo中的界面控件DijitWord文档下载推荐.docx(26页珍藏版)》请在冰豆网上搜索。
id="
dojoType="
dojox.Grid"
structure="
layout"
7.>
<
/div>
2222222222
不知道LZ所说的gridpanel表头需要三层是什么意思?
能否把问题说的详细点
boreas_baosj(初级程序员)2009-12-14
这个需要使用到合并表头,LZ可以看下这个插件的相关文档
groupHeaderPlugin.css
groupHeaderPlugin.js
合并表头插件的使用片段:
Javascript代码
1.//
立项审批grid
2.
var
approveProjectGrid
Ext.ux.maximgb.treegrid.GridPanel({
3.
width
:
1022,
4.
height
520,
5.
minColumnWidth
55,
6.
title
align=center>
+
rs_.title
7.
bodyStyle
padding:
5px
5px'
8.
frame
true,
9.
store
approveProjectStore,
10.
master_column_id
unitName'
11.
cm
cm,
12.
sm
sm,
13.
//
stripeRows
14.
autoExpandColumn
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.
批准清单'
25.
3,
26.
27.
{}]],
28.
hierarchicalColMenu
false
29.
}),
checkColumn],
30.
view
Ext.ux.grid.BufferView({})
31.
//立项审批grid
varapproveProjectGrid=newExt.ux.maximgb.treegrid.GridPanel({
width:
1022,
height:
520,
minColumnWidth:
55,
title:
'
divalign=center>
+rs_.title+'
bodyStyle:
5px5px5px5px'
frame:
true,
store:
approveProjectStore,
master_column_id:
cm:
cm,
sm:
sm,
//stripeRows:
//autoExpandColumn:
viewConfig:
{
enableRowBody:
true
},
plugins:
[newExt.ux.plugins.GroupHeaderGrid({
rows:
[[{},{},{},{},{},{},{},{
header:
colspan:
4,
align:
},{},{
3,
},{},{},{},{},{}]],
hierarchicalColMenu:
false
}),checkColumn],
view:
newExt.ux.grid.BufferView({})
});
上官网找个人家写好的吧,自己写的话,比较费时。
chanball(中级程序员)2009-12-14
newExt.ux.plugins.GroupHeaderGrid这个插件本来就是有的
那个是我从项目里面随便拷贝的一段,是一个树形的网格,你把那个网格换成new你自己需要的网格就可以了,其实很简单,一个普通的网格就可以了,下面这段代码花括号里面什么都没有写的代表的是不需要合并的列,你网格有多少列就要用花括号在这里补齐,下面这个网格一共就有9列,另外的就很容易理解了
Java代码
1.plugins
//合并显示的表头
4,//合并多少列
//表头的对齐方式
},{}]],
})],
plugins:
[[{},{
//合并显示的表头
4,//合并多少列
//表头的对齐方式
},{}]],
})],
boreas_baosj(初级程序员)2009-12-15
看这个吧
网格对象
createProjectGrid
Ext.grid.EditorGridPanel({
1024,
申请和审批清单:
ds
createProjectStore,
bbar
pagingToolbar,
}]],
})]
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页面中:
style
text/css"
!
--
/*
use
the
tundra
theme
*/
@import
"
Note
that
if
you
don’t
specify
a
minor
revision,
e.g.
1.5.0
or
1.4.3,
CDN
will
deliver
latest
version
/style>
styletype="
--
/*usethetundratheme*/
@import"
/*Notethatifyoudon’tspecifyaminorrevision,e.g.1.5.0or1.4.3,theCDNwilldeliverthelatestversion*/
当然,这个地址你也可以用你自己的:
dojoroot/dijit/themes/tundra/tundra.css"
;
你可以用Dijit的主题查看器来查看每个主题的外观,本地也可以访问到这个主题查看器:
dojoroot>
/dijit/themes/themeTester.html,你也可以定义自己的主题。
除了引入样式文件,当然还要引入Dojo核心本身,和其他类库一样,需要引入一个js文件。
但Dojo中可以在引用js文件的同时对其进行参数配置。
这里有一个比较重要的就是parseOnLoad参数。
这个参数使得在页面载入完成之后自动解析页面上的所有Dijit控件。
因此,引入Dojo核心库的代码如下:
src="
djConfig="
parseOnLoad:
true"
scripttype="
src="
djConfig="
同理,这里的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表示:
select
name="
players"
option
value="
Select
an
Arsenal
Player<
/option>
Arshavin"
selected="
selected"
Andrey
Arshavin<
Vermaelen"
Thomas
Vermaelen<
–
more
OPTION
elements
here
–>
/select>
selectname="
id="
<
optionvalue="
SelectanArsenalPlayer<
selected="
AndreyArshavin<
ThomasVermaelen<
–moreOPTIONelementshere–>
这是一个包括多个选项的静态下拉框,那么现在我们想让其支持实时过滤:
即下拉框选项会根据你输入的关键字被过滤,缩小选项范围。
在Dijit中有相应的控件来实现这个特性:
dijit.form.FilteringSelect.因此,我们首先需要引入这个控件:
Js代码
1.dojo.require(‘dijit.form.FilteringSelect’);
dojo.require(‘dijit.form.FilteringSelect’);
引入控件之后,我们很容易将一个静态的下拉框转变为Dijit控件。
通过声明方式创建Dijit
这种方式直接在原来的Html标记里加上Dijit相关的属性:
dijit.form.FilteringSelect"
autoComplete="
pageSize="
10"
dojoType="
dijit.form
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 主题 认识 Dojo 中的 界面 控件 Dijit
![提示](https://static.bdocx.com/images/bang_tan.gif)