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

Extjs4.1中动态改变gridpanel的数据源

2013-03-07 10:35 274 查看

动态改变数据源，不是同一个数据源，按照条件再重新过滤，而是指定store的url，做这个功能时也上网搜了一些方法，有的管用，有的不管用，找个适合自己的看看。

修改前数据展示

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ext的动态修改Grid数据源</title>
<link href="../Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../Ext/ext-all.js" type="text/javascript"></script>
<script src="../Ext/bootstrap.js" type="text/javascript"></script>
<script src="../Ext/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.require([
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.util.*'

]);
Ext.onReady(function () {

Ext.define('MyData', {
extend: 'Ext.data.Model',
fields: [
//第一个字段需要指定mapping，其他字段，可以省略掉。
{name: 'userName', mapping: 'UserName' },

'Sex',
'Age',
'XueHao',
'BanJi'
]
});

//创建数据源
var store = Ext.create('Ext.data.Store', {
model: 'MyData',
proxy: {
//异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type: 'ajax',
url: 'mydata.json',
reader: {
type: 'json',
root: 'items'
//totalProperty : 'total'
}
},
autoLoad: true
});

//复选框
// var sel = Ext.create("Ext.selection.CheckBoxModel");

//创建Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
Ext.grid.RowNumberer({
header: "序号",
width: 40,
renderer: function (value, metadata, record, rowIndex) {
return rowIndex + 1;
}
}),
{ text: "姓名", width: 120, dataIndex: 'userName', sortable: true },
{ text: "性别", flex: 1, dataIndex: 'Sex', sortable: false },
{ text: "年龄", width: 100, dataIndex: 'Age', sortable: true },
{ text: "学号", width: 100, dataIndex: 'XueHao', sortable: true }
],
title: 'ExtJS4 Grid示例',
viewConfig: { stripeRows: true },
tbar: Ext.create("Ext.toolbar.Toolbar", {
items: [{
text: "动态修改数据源",
handler: function () {

grid.getStore().proxy.url = "newdata.js";

grid.getStore().load();

}
}]
})
});

Ext.create('Ext.container.Viewport',
{
layout: 'fit',
items: grid
}
);
});
</script>
</head>
<body>
<div id="demo">
</div>
</body>
</html>

第73行是方式，很很简单吧，找到了就是简单

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

标签：

相关文章推荐

新的分享

章节导航