您的位置：首页 > Web前端 > JavaScript

11Extjs 高级组件 grid

2014-06-17 19:47 435 查看

1.组件说明：

每一个继承都是一层抽象一层实现

2.本节课需要讲解的类

注意后面就是用到的panel

3.老师的教学提纲：

4.注意里面每一个都是代表着一个类

可以看文档去了解这个类是什么。

column这里面的属性来自：

5.dataindex就是对应的store里面的。

6.对于一个表格grid必须要有自己的数据集store。否则就会报错。就是说没有数据是不行的。

7.关于storeID：就是说只要是写了storeID的话，那么他就会被storemanager进行管理了。

代码中：

8.关于store里面的根节点的介绍：

root就是传递过来数据的根节点。

下面就是根节点 topics 就是传递过来的数据在哪个字段里

9.调用storemanager的lookup 方法就可以获取相应的store了。

10store数据的的自动加载:

11.注意上面的一个错误，下面的是正确的

就是说，引用的是一个类，并不是一个对象。一个类的引用要加上' ' 但是一个对象的引用没有必要加上‘’。

12.下面就是对panel进行相应的添加边框和空白进行补充

13.上方添加按钮用到的属性

14.注意xtype和 ext.create 是等效的。

15.再重申一遍，添加对象（用xtype）后面就是跟着这个对象的属性。

16.上面是tbar下面是bbar

17.添加侧边栏

18看一个组件的别名方法是直接看源码，因为在文档里面他没有直接写出来。

效果

19.extjs 3和4的区别：

例子：比如一个容器里面控件想要找到父控件。下面的方法就是得到了一个父类然后在得到父类的store就好了

注意第一句里面是父类的xtype类型。

下面的另一种方法也是达到了相同的效果。就是直接得到他的父类。由于下面的父类是两层。第一层是bar 然后接着就是panel

这里的o指的是button

20.下面进行删除的操作。

具体看下面的代码（这就是一个panel上的按钮的操作罢了）

21.关于更新的操作，现在4.0中用的是plugins的操作。

下面是文档

下面就是代码（为panel添加编辑的插件）

最后的数字表示单机几下出现编辑插件。

上面的编辑插件不光光是将插件导入，而且还需要做的就是这个插件是要被panel里面的某个列引用的。因此需要给某个列配置需要引用哪一个编辑的插件就是了。

相应的引用代码是用field

只要是写好了代码，那么就会出现下面的效果了

22. html 页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>EXTJS4.0</title>
<link rel="stylesheet" type="text/css" href="../../../../extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../../../extjs4/examples/shared/example.css" />
<link rel="stylesheet" type="text/css" href="../../../../permitToWork/common/css/common.css" />
<script type="text/javascript" src="../../../../extjs4/bootstrap.js"></script>
<script type="text/javascript" src="../../../../extjs4/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="mode.js"></script>
<script type="text/javascript" src="01gridDemo.js"></script>
</head>
<body>
<div id="gridDemo"></div>
</body>
</html>

mode.js

//User类
Ext.define("user",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'string',sortable:true},
{name:'age',type:'int',sortable:true},
{name:'email',type:'string',sortable:true}
]
});
//User对象
var user = Ext.create("user",{});
Ext.create("Ext.data.Store",{
model:'user',
storeId:'s_user',
proxy:{
type:'ajax',
url:'/extjs/extjs!getUserList.action',
reader:{
type:'json',
root:'topics'
},
writer:{
type:'json'
}
},
autoLoad:true
});

01gridDemo.js

(function(){
Ext.onReady(function(){
Ext.QuickTips.init();
//穿件表格时候要 用表格的面板
var grid = Ext.create("Ext.grid.Panel",{
title : 'Grid Demo',//标题
frame : true,//面板渲染
//forceFit : true,//自动填充panel空白处
width : 600,
height: 280,
columns : [ //列模式
{text:"Name",dataIndex:'name',width:100},
{text:"age",dataIndex:'age',width:100},
{text:"email",dataIndex:'email',width:350,
field:{
xtype:'textfield',
allowBlank:false
}
}
],
tbar :[
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',text:'删除',iconCls:'table_remove',
handler:function(o){
//var gird = o.findParentByType("gridpanel");
var gird = o.ownerCt.ownerCt;
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","您最少要选择一条数据");
}else{
//1.先得到ID的数据(name)
var st = gird.getStore();
var ids = [];
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
})
//2.后台操作(delet)
Ext.Ajax.request({
url:'/extjs/extjs!deleteData.action',
params:{ids:ids.join(",")},
method:'POST',
timeout:2000,
success:function(response,opts){
Ext.Array.each(data,function(record){
st.remove(record);
})
}
})
//3.前端操作DOM进行删除(ExtJs)
}
}
},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'}
],
dockedItems :[{
xtype:'pagingtoolbar',
store:Ext.data.StoreManager.lookup('s_user'),
dock:'bottom',
displayInfo:true
}],
plugins:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 1
})
],
selType:'checkboxmodel',//设定选择模式
multiSelect:true,//运行多选
renderTo :'gridDemo',
store : Ext.data.StoreManager.lookup('s_user')
});
});
})();

last.all

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航