EXTJS.docx
《EXTJS.docx》由会员分享，可在线阅读，更多相关《EXTJS.docx（16页珍藏版）》请在冰豆网上搜索。
EXTJS
Extjs表单元素实现横向、多列布局，最简单的代码示例
分类：
extjs2014-06-1819:
42 1925人阅读 评论（0） 收藏 举报
extjs
[javascript] viewplaincopy
1.Ext.onReady（function（）{
2.
3. Ext.create（'Ext.form.Panel',{
4.
5. title :
'横向布局测试',
6. height :
130,
7. width :
550,
8. frame :
true,
9. layout :
'form',
10. renderTo :
Ext.getBody（）,
11. items :
[{
12.
13. layout :
'column',
14. frame :
true,
15. items :
[{
16.
17. xtype :
'textfield',
18. fieldLabel :
'姓名',
19. name :
'name'
20. },{
21.
22. xtype :
'textfield',
23. fieldLabel :
'姓名',
24. name :
'name'
25. }]
26. },{
27.
28. layout :
'column',
29. frame :
true,
30. items :
[{
31.
32. xtype :
'textfield',
33. fieldLabel :
'姓名'
34. },{
35.
36. xtype :
'textfield',
37. fieldLabel :
'姓名'
38. }]
39. }]
40. }）;
41.}）;
效果图：
如果要去掉每行的边框，只需加上一个属性：
[javascript] viewplaincopy
1.Ext.onReady（function（）{
2.
3. Ext.create（'Ext.form.Panel',{
4.
5. title :
'横向布局测试',
6. height :
130,
7. width :
550,
8. frame :
true,
9. layout :
'form',
10. renderTo :
Ext.getBody（）,
11. items :
[{
12.
13. layout :
'column',
14. frame :
true,
15. baseCls :
'my-panel-no-border', //去掉边框
16. items :
[{
17.
18. xtype :
'textfield',
19. fieldLabel :
'姓名',
20. name :
'name'
21. },{
22.
23. xtype :
'textfield',
24. fieldLabel :
'姓名',
25. name :
'name'
26. }]
27. },{
28.
29. layout :
'column',
30. frame :
true,
31. baseCls :
'my-panel-no-border', //去掉边框
32. items :
[{
33.
34. xtype :
'textfield',
35. fieldLabel :
'姓名'
36. },{
37.
38. xtype :
'textfield',
39. fieldLabel :
'姓名'
40. }]
41. }]
42. }）;
43.}）;
效果图：
版权声明：
本文为博主原创文章，未经博主允许不得转载。
extjs之GridPanel表格
分类：
extjs2013-04-0410:
19 711人阅读 评论（0） 收藏 举报
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（'name'）在模型记录中获得对应的数据内容，另外在Store中定义了add（record）,insert（index,records）,remove（）remove（index）,removeAll（）
（11）、 grid.getColumnModel（）.getColumnById（'tagline'）.sortable=true;可以通过列模型设置列是否可排序
同样：
varcolModel=grid.getColumnModel（）; colModel.setHidden（column.getIndexById（'tagline'）,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'）获取指定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:
true,
showPreview:
true,
getRowClass:
function（record,rowIndex,p,store）{
if（this.showPreview）{
p.body = '5px;border:
1px #DFE8F6 solid;margin:
2px">#15428B;font-weight:
bold;">备注:
顶替棋不日
';
return 'x-grid3-row-expanded';
}
return '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:
true,
sortInfo:
{field:
'Sex',direction:
'DESC'}
}）;
（2）：
在GridPanel中指定view:
new Ext.grid.GroupingView（）
（3）：
要使得分组和摘要同时显示，必须把先前的viewConfig配置写在view的GroupingView的配置里面
三、可编辑的EditorGridPanel
（1）：
EditorGridPanel的选择模型是CellSelectionModel，而且列模型要指定一个editor：
new Ext.grid.GridEditor（），里面是是一些表单控件。
（2）：
在EditorGridPanel比以前多autoEncode:
true,clickToEdit:
1
（3）：
将记录设置为脏数据状态，并将修改后的记录存放在Record类型的数组modified中。
当删除数据时，modified不变化，所以这些操作：
删除Store，modified中指定的元素，触发remove事件，更新EditGridPanel视图
（4）：
可以用CellSelectionModel模型用getSelectedCell（）获取单元格信息，返回如[3,4]这的行列坐标；用hasSelection（）获取是否有有选中的单元格
（5）：
EditorGridPanel的验证和表单完全一样
四、paging分页
bbar:
new Ext.PagingToolbar（{
store:
store,
pageSize:
2,
displayInfo:
true,
displayMsg:
'本页显示第{0}条到第{1}条的记录,一共{2}条',
emptyMsg:
'没有记录！
',
items:
['-',{
icon:
'../resources/images/default/dd/drop-yes.gif',
cls:
'x-btn-text-icon',
pressed:
true,
text:
'隐藏备注',
cls:
'x-btn-text-icon details',
toggleHandler:
function（btn,pressed）{
var view = grid.getView（）;
if（pressed）{
btn.setText（'隐藏备注'）;
}else{
btn.setText（'显示备注'）;
}
view.showPreview = pressed;
view.refresh（）;
}
}]
}）
版权声明：
本文为博主原创
extjs之simpleStore
分类：
extjs2013-05-1109:
20 656人阅读 评论（0） 收藏 举报
ExtJS
[html] viewplaincopy
1.var fileGrid = new Ext.grid.GridPanel（{
2. title:
'上传文件列表',
3. height:
150,
4. autoScroll:
true,
5. frame:
true,
6. columns:
[
7. new Ext.grid.RowNumberer（）,
8. {header:
'文件名',dataIndex:
'fileName'}
9. ],
10. store:
new Ext.data.SimpleStore（{
11. fields:
[
12. {name:
'fileName'}
13. ],
14. data:
[
15. ['大世界英语'],
16. ['大学语文'],
17. ['离散数学']
18. ]
19. }）
20.}）;
extjs之treePanel树
分类：
extjs2013-05-1011:
53 567人阅读 评论（0） 收藏 举报
一、以下是树的一些常用的类
二、从服务器异步加载只需四步
（1）、编写树加载器
[html] viewplaincopy
1.var treeLoader = new Ext.tree.TreeLoader（{
2. dataUrl:
'servlet/TreeJson'
3.}）;
（2）、指定根节点
[html] viewplaincopy
1.var rootNode = new Ext.tree.AsyncTreeNode（{
2. text:
'root'
3.}）;
（3）、编写树面板
[html] viewplaincopy
1.var tree = new Ext.tree.TreePanel（{
2. renderTo:
'treecontainer',
3. loader:
treeLoader,
4. root:
rootNode
5.}）;
（4）、在服务器端返回json，每个节点对象需要指定id、text、leaf、children等属性
[html] viewplaincopy
1.[ {id:
'1',text:
'No children',leaf:
true},
2. {id:
'2',text:
'has Children',children:
[
3. {id:
'3',text:
'Youngster',leaf:
true}
4. ]}]
小知识点：
（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）、给树节点加右键菜单
[html] viewplaincopy
1.var contextMenu = new Ext.menu.Menu（{
2.
3. items:
[
4. {text:
'Delete'},
5. {text:
'Sort'}
6. ]
7.}）;
8.tree.on（'contextMenu', function treeContexthandler（node）{
9. node.select（）;
10. contextMenu.show（node.ui.getAnchor（））;
11.}）;
（7）、给树的节点增加一个过滤器
[html] viewplaincopy
1.function filterHandler（）{
2. var node = tree.getSelectionModel（）.getSelectedNode（）;
3. filter.filter（'Bee', 'text', node）;// 被过滤的值，过滤的属性（可选，默认为text），开始过滤的节点
4.}
5.var filter = new Ext.tree.TreeFilter（tree）;
6.var contextMenu = new Ext.menu.Menu（{
7. items:
[
8. {text:
'Filter', handler:
filterHandler}
9. ]
10.}）;
11.tree.on（'contextMenu', function treeContexthandler（node）{
12. node.select（）;
13. contextMenu.show（node.ui.getAnchor（））;
14.}）;
（8）、把animate设置为false，可以关闭节点展开合拢的动画
（9）、把lines设置为false，可以隐藏树节点的层次线
（10）、把dlDrop和trackMouseOver设置为false，可以取消节点显示的高亮
（11）、设置一个超链接节点
[html] viewplaincopy
1.{text:
'href',enable:
true,href:
''}
（12）、设置allowChildren:
false来让节点不能有子节点
（13）、设置checked;true/false来让节点拥有checkbox，当checked改变会触发checkchange事件
（14）、icon设置图标，cls设置css样式，qtip允许你单出tooltip
升级会员 