EXTJSWord文件下载.docx
- 文档编号:22940743
- 上传时间:2023-02-06
- 格式:DOCX
- 页数:16
- 大小:149.28KB
EXTJSWord文件下载.docx
《EXTJSWord文件下载.docx》由会员分享,可在线阅读,更多相关《EXTJSWord文件下载.docx(16页珍藏版)》请在冰豆网上搜索。
11.
items
[{
12.
13.
column'
14.
15.
16.
17.
xtype
textfield'
18.
fieldLabel
姓名'
19.
name
name'
20.
},{
21.
22.
23.
24.
25.
}]
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
});
41.});
效果图:
如果要去掉每行的边框,只需加上一个属性:
baseCls
my-panel-no-border'
//去掉边框
41.
42.
43.});
版权声明:
本文为博主原创文章,未经博主允许不得转载。
extjs之GridPanel表格
extjs2013-04-0410:
19
711人阅读
grid初级部分:
需要的其他辅助类有ColumnModel(Observable的子类)、RowSeletedModel、GridView、Store、RowNumberer、CheckboxSelectiondModel
(1)、包含表头(列的宽度、是否改变大小、是否排序(sortable)、是否出现菜单,是否隐藏(hidden),渲染(renderer))、数据行、分页栏。
(2)、为autoExpandColumn属性的列必须id属性。
(3)、列模型的dataIndex列需要对应reader中的name属性,reader中的mapping属性对应proxy中的name属性。
(4)、在columnModel中设置列属性renderer:
Ext.util.Format.dateRenderer('
Y-m-d'
)可以控制日期的格式
(5)、行选择模型值(grid.getSelectionModel())负责选择行的方法(第一个、最后一个、下一个、上一个、选择指定的、选择全部)和行被选择的信息(是否被选中、取消指定的选择、得到选中的条目、判断是否还有上/下条)
(6)、通过grid.getView().getRows().length可以取得总行数
(7)、通过指定Ext.grid.RowNumberer()添加序号
(8)、通过指定Ext.grid.CheckboxSelectionModel()添加复选框,在Gridpanel中添加sm:
sm
(9)、视图模型(GridView)有getRows()、getRow(row)、getCell(row,col)、refresh(true:
是否表头也刷新)
(10)、通过grid.getStore().getAt(i).get('
)在模型记录中获得对应的数据内容,另外在Store中定义了add(record),insert(index,records),remove()remove(index),removeAll()
(11)、
grid.getColumnModel().getColumnById('
tagline'
).sortable=true;
可以通过列模型设置列是否可排序
同样:
varcolModel=grid.getColumnModel();
colModel.setHidden(column.getIndexById('
),true)设置列为隐藏
(12)、enableColumnMove:
false;
设置列不能拖动
(13)、从xml读取数据的准备有:
在store中配置url,reader用XmlReader,XmlReader的第一个参数要用record设置数据行在xml中的根目录,最后用load()方法加载
(14)、从json读取数据和xml差不多,只用把XmlReader变为JsonReader,把record改为root,在json对象中要有一个success属性和root属性的一个对象数组
(15)、为列模型指定:
Ext.grid.RowNumberer()配置学号
(16)、为列模型配置和GridPanel配置:
Ext.grid.CheckboxSelectionModel()可以配备复选框
(17)、通过grid.getSelectionModel()获取选择模型,有selectFirstRow()、selectLastRow()、selectNext(keeping)、selectPrevious(keeping)、hasNext()、hasPrevious()、selectAll()、isSelected(index)、selectedRows(rows,keeping)、selectRange(start,end,keeping)、deselectRow(index)、deselectRange(start,end)、getCount()
(18)、通过grid.getView().getRows().length可以获得总行数,GirdView中常用方法有:
getRows()、getRow(index)、getCell(row,col)、refresh(boolean)
(19)、grid.getStore().getAt(i).get('
)获取指定name的行,在store常用的方法有:
add(records)、insert(index,records)、remove(record)、removeAll()
(20)、CellSelectionModel:
一次选择一个单元格
RowSelectModel:
一次选择一行
ColumnSelectionModel:
一次选择一列
CheckBoxSelectionModel:
使用checkbox来做行的选择
grid高级部分
一、显示摘要
grid有一个隐藏的RowBody,由GridView管理,在grid的viewConfig属性配置中,有属性forceFit(按一定比列拉伸列的宽度)、enableRowBody(启动RowBody)、showPreview(是否显示摘要)、getRowClass()设置RowBody的内容
配置如下:
viewConfig:
{
forceFit:
true,
enableRowBody:
showPreview:
getRowClass:
function(record,rowIndex,p,store){
if(this.showPreview){
p.body
=
<
p
style="
padding:
5px;
border:
1px
#DFE8F6
solid;
margin:
2px"
>
span
color:
#15428B;
font-weight:
bold;
"
备注:
/span>
顶替棋不日<
/p>
;
return
x-grid3-row-expanded'
}
x-grid3-row-collapsed'
},
二、分组
需要GroupingStore(Store的子类)和GroupingView(GridView)的支持,分组的依据是reader的name属性,要进行分组有以下准备:
(1):
要配置GroupingStore,
var
store
new
Ext.data.GroupingStore({
proxy:
proxy,
reader:
reader,
groupField:
Sex'
autoLoad:
sortInfo:
{field:
direction:
DESC'
(2):
在GridPanel中指定view:
Ext.grid.GroupingView()
(3):
要使得分组和摘要同时显示,必须把先前的viewConfig配置写在view的GroupingView的配置里面
三、可编辑的EditorGridPanel
(1):
EditorGridPanel的选择模型是CellSelectionModel,而且列模型要指定一个editor:
Ext.grid.GridEditor(),里面是是一些表单控件。
在EditorGridPanel比以前多autoEncode:
true,clickToEdit:
1
将记录设置为脏数据状态,并将修改后的记录存放在Record类型的数组modified中。
当删除数据时,modified不变化,所以这些操作:
删除Store,modified中指定的元素,触发remove事件,更新EditGridPanel视图
(4):
可以用CellSelectionModel模型用getSelectedCell()获取单元格信息,返回如[3,4]这的行列坐标;
用hasSelection()获取是否有有选中的单元格
(5):
EditorGridPanel的验证和表单完全一样
四、paging分页
bbar:
Ext.PagingToolbar({
store:
store,
pageSize:
2,
displayInfo:
displayMsg:
本页显示第{0}条到第{1}条的记录,一共{2}条'
emptyMsg:
没有记录!
items:
['
-'
{
icon:
../resources/images/default/dd/drop-yes.gif'
cls:
x-btn-text-icon'
pressed:
text:
隐藏备注'
x-btn-text-icon
details'
toggleHandler:
function(btn,pressed){
view
grid.getView();
if(pressed){
btn.setText('
);
}else{
显示备注'
view.showPreview
pressed;
view.refresh();
}]
})
本文为博主原创
extjs之simpleStore
extjs2013-05-1109:
20
656人阅读
ExtJS
[html]
1.var
fileGrid
Ext.grid.GridPanel({
title:
上传文件列表'
height:
150,
autoScroll:
frame:
columns:
[
Ext.grid.RowNumberer(),
{header:
文件名'
dataIndex:
fileName'
}
],
Ext.data.SimpleStore({
fields:
{name:
data:
大世界英语'
大学语文'
离散数学'
]
})
20.});
extjs之treePanel树
extjs2013-05-1011:
53
567人阅读
一、以下是树的一些常用的类
二、从服务器异步加载只需四步
(1)、编写树加载器
treeLoader
Ext.tree.TreeLoader({
dataUrl:
servlet/TreeJson'
3.});
(2)、指定根节点
rootNode
Ext.tree.AsyncTreeNode({
root'
(3)、编写树面板
tree
Ext.tree.TreePanel({
renderTo:
treecontainer'
loader:
treeLoader,
root:
5.});
(4)、在服务器端返回json,每个节点对象需要指定id、text、leaf、children等属性
1.[
{id:
1'
text:
No
children'
leaf:
true},
2'
has
Children'
children:
3'
Youngster'
true}
]}]
小知识点:
(1)、TreeNode本身没有的属性会被放在attributes属性之中
(2)、enabelDD属性配置节点是否可拖动,通过监听beforemovenode事件来保存节点移动的信息
(3)、newExt.tree.TreeSorter(tree,{folder:
true,dir:
asc/desc'
来为tree的同一层节点排序
(4)、sortType:
function(node){returnnode.attributes.creationDate}可以指定排序的依据是哪个属性
(5)、TreePanel默认的selModel是:
DefaultSelectionModel(单选,有clearSelections()方法),指定其为:
newExt.tree.MultiSelectionModel();
可以实现多选,有selectNext()、selectPrevious()等方法
(6)、给树节点加右键菜单
contextMenu
Ext.menu.Menu({
{text:
Delete'
},
Sort'
7.});
8.tree.on('
contextMenu'
function
treeContexthandler(node){
node.select();
contextMenu.show(node.ui.getAnchor());
11.});
(7)、给树的节点增加一个过滤器
1.function
filterHandler(){
node
tree.getSelectionModel().getSelectedNode();
filter.filter('
Bee'
text'
node);
//
被过滤的值,过滤的属性(可选,默认为text),开始过滤的节点
4.}
5.var
filter
Ext.tree.TreeFilter(tree);
6.var
Filter'
handler:
filterHandler}
10.});
11.tree.on('
14.});
(8)、把animate设置为false,可以关闭节点展开合拢的动画
(9)、把lines设置为false,可以隐藏树节点的层次线
(10)、把dlDrop和trackMouseOver设置为false,可以取消节点显示的高亮
(11)、设置一个超链接节点
1.{text:
href'
enable:
true,href:
(12)、设置allowChildren:
false来让节点不能有子节点
(13)、设置checked;
true/false来让节点拥有checkbox,当checked改变会触发checkchange事件
(14)、icon设置图标,cls设置css样式,qtip允许你单出tooltip
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- EXTJS