extjs4学习之 store

ExtJS数据网格示例

最新推荐文章于 2023-06-17 22:33:57 发布

原创最新推荐文章于 2023-06-17 22:33:57 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了一个使用ExtJS框架创建的数据网格示例，通过Ajax加载数据并展示城市信息。具体实现了数据存储、加载及遍历功能。

下面是html

<!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></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">


<script type="text/javascript" src="ext.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script src="locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />


<script type="text/javascript">
Ext.onReady(function () {
var gridStore = Ext.create('Ext.data.Store', {
fields: [
{ name: 'id', type: 'string' },
{ name: 'name', type: 'string' }
],
proxy: {
type: 'ajax',
url: './city.php',
reader: {
type: 'json',
root: 'data'
}
}
});

gridStore.load();

gridStore.load({
callback: function(records, options, success){
gridStore.each(function (record) {
alert(record.get('name'));
});
}
});
});
</script>
</head>
<body>
</body>

</html>

下面是city.php

{data:[{id:1,name:'北京'},{id:2,name:'上海'}]}