ExtJs与JSON格式数据绑定的方法（grid）

最新推荐文章于 2020-07-15 14:29:12 发布
最新推荐文章于 2020-07-15 14:29:12 发布
阅读量3k 收藏
点赞数 1
文章标签： extjs json header stylesheet function ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu_2005/article/details/5407141
版权

在这个AJAX流行年代，xml绑定已经满足不了我们的需求。ExtJs又为我们提供了JSON格式数据绑定的方法，下面我们来看看效果

用到的有二个文件survey.html、xml-grid.html，注意js引用路径。

survey.html文件：

 

[{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},
{"appeId":"2","survId":"32","location":"","surveyDate":"2008-03-14","surveyTime":"22:43:09","inputUserId":"32","inputTime":"2008-03-14 22:43:37","modifyTime":"0000-00-00 00:00:00"},
{"appeId":"3","survId":"32","location":"","surveyDate":"2008-03-15","surveyTime":"07:59:33","inputUserId":"32","inputTime":"2008-03-15 08:00:44","modifyTime":"0000-00-00 00:00:00"},
{"appeId":"4","survId":"1","location":"","surveyDate":"2008-03-15","surveyTime":"10:45:42","inputUserId":"1","inputTime":"2008-03-15 10:46:04","modifyTime":"0000-00-00 00:00:00"},
{"appeId":"5","survId":"32","location":"","surveyDate":"2008-03-16","surveyTime":"08:04:49","inputUserId":"32","inputTime":"2008-03-16 08:05:26","modifyTime":"0000-00-00 00:00:00"},
{"appeId":"6","survId":"32","location":"","surveyDate":"2008-03-20","surveyTime":"20:19:01","inputUserId":"32","inputTime":"2008-03-20 20:19:32","modifyTime":"0000-00-00 00:00:00"}]

 

json-grid.html 文件：

 

<html>
 <head>
  <link rel="stylesheet" type="text/css"
   href="../script/ext/resources/css/ext-all.css" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="../script/ext/ext-base.js"></script>
  <script type="text/javascript" src="../script/ext/ext-all.js"></script>
  <script type="text/javascript"
   src="../script/ext/build/locale/ext-lang-zh_CN.js"></script>
  <script>
Ext.onReady(function(){

 var proxy=new Ext.data.HttpProxy(    {url:'survey.html'});
 //定义reader
    var reader=new Ext.data.JsonReader(
   {
   },[
    {name: 'appeId', mapping: 'appeId'},
    {name: 'survId'},
    {name: 'location'},
    {name: 'surveyDate'},
    {name: 'surveyTime'},
    {name: 'inputUserId'}          
   ]
  )
 //构建Store  
  var store=new Ext.data.Store(    {
    proxy:proxy,
    reader:reader
    });
 //载入
 store.load();


    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
            {header: "survId", width: 60, dataIndex: 'survId', sortable: true},
            {header: "location", width: 60, dataIndex: 'location', sortable: true},
            {header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
            {header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
            {header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
        ],
        renderTo:'example-grid',
        width:540,
        height:200
    });

});

</script>
 </head>
 <body>
  <div id="example-grid"></div>
 </body>
</html>

hu_2005
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
extjs最简单的数据绑定和修改
06-22
extjs最简单的数据绑定和修改，高手就别浪费资源分了，省的拍砖
extjs中bind_Extjs中双向数据绑定的一个用法
weixin_39822184的博客
01-14 723
Extjs的双向数据绑定Sometimes a component's state, e.g. thecheckedstate of a checkbox or the selected record of a grid, is interesting to other components. When a component is assigned areferenceto identify i...
【层级结构】Ext.js5视图模型和数据绑定（下）
鹿惊的博客
12-14 677
非英文专业，同时也是Ext.js的初学者，若您能指出错误和不恰当的地方，万分感谢！原文：http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html 一、特定的数据绑定方式 1、多项绑定 如果需要绑定一个对象或者数组，视图模型会以同样的结构生成数组或模型，只不过会用不同的实行代替绑
[ExtJS] 不同控件的双向绑定
拒绝成猿的程序员
01-12 4104
在之前的文章，简单介绍了viewModel的用法 但是那种viewModel的继承 是 父子控件之间的关联 在A控件里 声明了viewModel，B控件直接绑定AviewModel中的key即可 那如果是同级控件，或者像是常用的弹窗里编辑时，页面也跟随变化（如下图） 这种用fireEvent可以做到，但只用viewModel的话如何处理？ 主要实现： 通过extjs viewM...
如何用javascript实现双向数据绑定
The_qianduan的博客
04-25 435
如何用javascript实现双向数据绑定 近几年前端技术栈真是发展的太迅速了，从以前的针对dom操作的框架如jquery，ext.js等框架逐步过渡到当前的mvvm模式，让前端开发者将注意力从dom操作逐渐解脱出来，专注于逻辑的实现，个人认为开发效率至少提升了1倍，mvvm模式的一个核心便是数据的双向绑定。 什么是数据的双向绑定？ ​​ 上面说的是在vue框架中数据双向绑定的应用，个人认为这个特...
php+extjs+grid实时显示更新数据
03-13
在本场景中，PHP负责从数据库（如MySQL）中获取数据，处理请求，并返回JSON格式的数据给前端EXTJS Grid。这通常通过创建一个API接口来实现，例如一个`getData.php`文件，它接收请求参数，执行SQL查询，然后将结果集...
extjs+servlet+json简单应用
06-03
ExtJS中的Ajax类提供了与服务器交互的能力，它支持发送GET和POST请求，以及处理JSON、XML等多种数据格式的响应。在本例中，ExtJS将作为前端，通过Ajax调用Servlet来获取或提交数据。 Servlet在Java Web应用中扮演着...
ssh+extjs4.0grid删除数据
05-30
在IT行业中，SSH（Spring、Struts和Hibernate）是一个经典的Java Web开发框架组合，而ExtJS则是一个流行的JavaScript库，用于构建富客户端的Web应用程序，特别是数据网格（Grid）功能。这里我们关注的是如何在SSH...
extjs 跟 struts+json
04-06
标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合，通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库，用于构建富客户端Web应用程序，而Struts是Java Web开发中的一个MVC...
extjs中grid中嵌入动态combobox的应用
12-11
1. **Ext.data.JsonStore**: 这是EXTJS中的一个数据存储类，用于处理JSON格式的数据。`comboDS`实例化了一个JsonStore，它通过`url: 'test.do'`从服务器获取数据，并定义了两个字段：`id`和`display`。 2. **...
extjs最简单最简单的绑定
06-11
这是一个extjs最简单最简单的绑定，请已经实现从数据库中读出后然后绑定到extjs Grid控件的朋友不要下载了，免得您砸鸡蛋。这是一个.net的事例。仅限于没绑定上的朋友下载。extjs绑定json的时候请注意字符串
extjs读取解析后端json格式数据显示条形图
07-31
extjs读取解析后端json格式数据并显示条形图,非常好看的特效，只能用炫酷来形容，感兴趣就下载看看吧，用在自己的网站觉得吸引眼球！
ExtJS学习笔记(八) 数据绑定
左手121
01-17 4184
var databind = null; var count = 1;Ext.define("Myapp.store.Countries", { extend: "Ext.data.Store", alias: "store.countries", fields: ["country"], data: [{ country: "中国" }, { country: "美
[ExtJS5学习笔记]第十六节 Extjs5使用panel新增的ViewModel属性绑定数据
weixin_30835933的博客
09-05 217
本文地址：http://blog.csdn.net/sushengmiyan/article/details/39078627sencha官方API:http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-viewModel本文作者：sushengmiyan----------------------------...
[Ext JS6]视图模型和数据绑定
oscar999的专栏
12-27 2142
文章目录ViewModel组件绑定绑定的优先级子组件的绑定双向绑定绑定和组件状态多值绑定绑定记录关联绑定绑定的选项设置视图模型公式开发建议 ViewModel ViewModel是一个管理数据对象的类， 它运行对它感兴趣的组件绑定它并在变化的时候得到通知。ViewModel和ViewController一样，是属于某个 View的。子视图可以继承父的视图模型。 使用 bind的配置来绑定数据，当...
extjs__(grid Panel绑定数据)
weixin_33852020的博客
03-14 172
1.修改面板名称 双击My Panel 就可以进行修改 2拖入一个grid panel绑定数据 3.创建一个model 只是为了创建一个模型 相当于java中的模型层 只是数据的一个标准 4.创建一个模型字段 5.创建json数据 6.创建一个stores 这样会报一个错误:需要关联一个model 7.关联一个model 8....
EXTJS7 自定义组件配置属性启用双向绑定
路过君的博客
07-15 522
使用publishes/twoWayBindable都可以启用配置属性的变更通知，既可实现双向绑定 // 默认配置属性只能做入参 config: {myprop1: 1}, // 启用双向绑定 publishes: ['myprop1'], // 或 twoWayBindable: ['myprop1']
Extjs6.0 grid 列表绑定json数据
cx1145691901的博客
04-09 1358
最近在做一个项目由于前段使用extjs6.0,  简单记录一下grid列表绑定json数据如何实现,如下图, 是一个简单的功能模块：图中是一个数据列表绑定json数据源，实现步骤：1.首先得有一个返回json格式数据源接口,这里就不写了。2.Ext6.0可以创建一个Model ，并且指向一个stroe, url写自己的接口名称，JS代码如下Ext.define('app.model.agent.A...
ExtJs combobox 绑定ajax请求的数据
最新发布
05-31
可以通过以下步骤来绑定 ExtJs 的 ComboBox 组件到 AJAX 请求的数据： 1. 创建一个 Store 来保存请求的数据 ``` var store = Ext.create('Ext.data.Store', { fields: ['value', 'text'], proxy: { type: 'ajax', url: 'your_ajax_url', reader: { type: 'json', rootProperty: 'data' } } }); ``` 2. 创建 ComboBox 组件并绑定 Store ``` var comboBox = Ext.create('Ext.form.ComboBox', { fieldLabel: 'Select', displayField: 'text', valueField: 'value', store: store, queryMode: 'remote', forceSelection: true, typeAhead: true, selectOnFocus: true, editable: false }); ``` 3. 发送 AJAX 请求并加载数据到 Store ``` store.load(); ``` 在上面的代码中，`url` 属性应该指向返回 JSON 格式数据的 AJAX 请求的地址。`rootProperty` 属性应该对应 JSON 数据中的数组名称。ComboBox 组件的 `displayField` 和 `valueField` 分别对应 JSON 数据项的文本和值字段。 希望这个例子能够帮助你绑定 ExtJs ComboBox 组件到 AJAX 请求的数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值