前言,常规的ExtJS的Store,在new一个Store控件的时候,加上proxy属性,指向URL,在URL里返回特定格式的JSON数据即可。
即:
var store = new Ext.data.Store({
// 获取数据的方式
proxy : new Ext.data.HttpProxy({
url : 'cardSell.ered?reqCode=queryCrdSellList4CX'
}),
});
我们这里要说的,是引用前台JS生成的Array,将Array塞入到Store中,显示在列表中,(或是需求中有要求先查询一个FORM,若合格,再将数据塞入到Store中。
1、Store的proxy属性填写自己的data数据。
/**
* 数据存储
*/
var store = new Ext.data.Store({
// 获取数据的方式
proxy: new Ext.data.MemoryProxy(data),
});
2、我们在步骤1中已经填写了获取Store数据的方式,那么,我们接下来要赋值给data,并将Store数据load进去。
/**重要**/
var list = result.cardinfo;
data = {TOTALCOUNT:list.length, ROOT:list};
store.loadData(data);
此处的list是JS对象的Array。
其JSON格式result如下:(后台response其JSON格式的数据到前台。)
{"cardinfo":[{"numb":"1","name":"007"},{"numb":"2","name":"008}]}
3、取出Store中的全部数据,再封装成JSON格式,传回后台。(extjs store中数据转换成json)。
主要有以下两种方法:
a\
var jsonData = Ext.encode(Ext.pluck(store.data.items, 'data'));
b\
var datar = new Array();
var jsonDataEncode = "";
var records = store.getRange();
for (var i = 0; i < records.length; i++) {
datar.push(records[i].data);
}
jsonDataEncode = Ext.util.JSON.encode(datar);
测试了下a方法,其jsonData的值如下:这样传送到后台,能用JACKSON等JSON工具转成LIST列表。
[{"numb":"1","name":"007"},{"numb":"2","name":"008"}]
补充自己的一些特定类:
由于公司后台没用JACKSON等JSON工具类,而只有一种将JSON格式的数据转成LIST的方法,如下:(因为不想改底层,JSON转LIST平时也用不大到)
/**
* 将复杂Json资料格式转换为List对象
*
* @param jsonString
* 复杂Json对象,格式必须符合如下契约<br>
* {"1":{"name":"托尼.贾","age":"27"},
* "2":{"name":"甄子丹","age":"72"}}
* @return List
*/
public static List parseJson2List(String jsonString) {
List list = new ArrayList();
JSONObject jbJsonObject = JSONObject.fromObject(jsonString);
Iterator iterator = jbJsonObject.keySet().iterator();
while (iterator.hasNext()) {
Dto dto = parseSingleJson2Dto(jbJsonObject.getString(iterator.next().toString()));
list.add(dto);
}
return list;
}
为了改成此工具能转化的JSON,将Store转JSON格式数据稍作改动,此方法纯属记录一下。(以免以后自己要用到)
var records = store.getRange();
var totaldata = "{";
for (var i = 0; i < records.length; i++) {
var data = records[i].data;
var sdata = Ext.util.JSON.encode(data);
sdata = "\"" + (i + 1) + "\":" + sdata + ",";
totaldata = totaldata + sdata;
}
totaldata = totaldata.substring(0,totaldata.length - 1) + "}";
totaldata就是已转好的格式,类似:{"1":{"name":"托尼.贾","age":"27"},"2":{"name":"甄子丹","age":"72"}}。
分享到:
相关推荐
标题 "Extjs 从远程获取json类型的list数据" 涉及的是在Web开发中使用Extjs框架与服务器进行交互,获取JSON格式的数据并展示在列表(List)组件中的技术。Extjs是一款强大的JavaScript库,用于构建富客户端的桌面级...
在本案例中,我们将深入探讨如何使用ExtJS读取并解析后端返回的JSON格式数据,然后将这些数据呈现为动态的条形图,以实现吸引用户注意力的视觉效果。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据...
`Store`是EXTJS中的一个关键组件,它负责管理一组数据,通常是从服务器获取或本地定义的JSON对象。`Store`可以动态加载、更新和缓存数据,与`Model`(数据模型)和`Proxy`(数据源)配合工作,提供了强大的数据操作...
- ExtJS中的Grid Panel是展示数据的主要组件,它可以动态加载和操作大量数据。 - Grid Panel的特点包括分页、排序、过滤、编辑等功能。 - 如何配置Grid Panel的列模型,定义列的显示方式和宽度。 - 使用Store与...
在本文中,我们将深入探讨如何使用ExtJS框架在前端动态生成表格,并结合后端数据进行展示。ExtJS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,尤其在创建交互式用户界面方面表现突出。动态生成表格是...
总结来说,"Extjs 无限树菜单 后台拼接json"涉及到的技术点包括:ExtJS的树形组件使用、后台动态生成JSON、无限滚动加载策略、以及前端和后端的异步通信。通过这样的方式,我们可以构建出动态、可扩展且高效的树形...
5. **org.extjs.extjs**: 这可能是ExtJS自身的Java后端支持库,提供了与ExtJS组件通信的辅助工具,例如处理ExtJS的Store与服务器端的数据同步。 6. **slf4j**: Simple Logging Facade for Java,是一个日志记录的...
在标题和描述中提到的“中间页”和“后台JSON”,通常指的是在ExtJS应用中,通过一个中间页面来处理与服务器的数据交互,这个中间页面通常会从后端服务接收或发送JSON格式的数据。 **中间页(Middleware)** 在Web...
4. **生成JSON响应**:在Action的方法中,使用ActionContext或类似的工具将Java对象转换成JSON字符串。 5. **ExtJS端的配置**:在客户端,创建ExtJS应用,定义Store来接收和处理JSON数据,以及Grid或其他组件来展示...
在ExtJS动态树中,Struts需要将后端数据转化为JSON格式,以便前端解析。JSON对象通常包含键值对,数组和嵌套的对象,可以方便地表示复杂的数据结构。 3. **Struts2 Action和Result**: 在Struts2框架中,Action类是...
Store是ExtJS中用于管理数据的核心组件,它可以连接到各种数据源,如JSON、XML或远程服务器,并负责加载、处理和缓存数据。在STOREMENU中,Store通常用来存储菜单项的相关信息,如标题、链接或者图标等。 “Menu”...
2. **生成JSON** 使用Gson或Jackson库将Java对象转换为JSON字符串。例如,如果你有一个名为`User`的Java类,你可以创建一个`User`对象,然后使用Gson的`toJson()`方法将其转换为JSON字符串。 3. **配置URL** 在...
在本示例中,服务器端(这里使用Struts2框架)将处理业务逻辑,生成JSON数据,然后返回给客户端(ExtJS TreePanel)。JSON数据通常包含节点ID、文本、子节点数组等信息,以构建树形结构。 Struts2是一个基于MVC...
标题“ExtJS Oracle分页---Json转换”涉及的是在Web应用程序开发中,使用ExtJS框架与Oracle数据库进行分页数据交互,并通过Json格式进行数据转换的技术。以下是对这个主题的详细解释: ExtJS是一个强大的JavaScript...
2. **Store(存储)**:Store是EXTJS中管理数据的组件,它可以加载JSON数据,并与视图(如Grid、List等)进行数据绑定。当服务器返回JSON数据时,Store会解析数据并更新其内部记录集。 3. **Proxy(代理)**:Proxy...
在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中,我们将深入探讨两个核心组件:动态菜单(Dynamic Menus)和表格数据展示(Grid Data Display),以及如何在实际应用中进行操作。 动态菜单在Web应用中...
- 最后,可以在 ExtJS 应用中引用这些生成的 model 和 store,与视图组件进行数据绑定。 **6. 示例代码** 以下是一个简单的 ExtJS 5 应用示例,展示了如何使用自动生成的 model 和 store: ```javascript Ext....
6. **动态列生成**:根据后台返回的列信息动态创建和配置Grid的列,这通常涉及到解析JSON数据中的列头信息。 7. **优化性能**:考虑使用分页(Paging)和延迟加载(Lazy Loading)来优化大数据量的加载,提高用户...
在“ExtJs 连接数据库并且生成动态树”这个主题中,我们将探讨如何利用ExtJs来连接后端数据库,并动态生成树形结构来展示数据。 首先,要实现ExtJs连接数据库,你需要一个服务器端的数据接口,它可以是基于PHP、...
在本文中,我们将深入探讨如何使用ExtJS框架根据数据库返回的JSON数据动态生成Grid列表实例。ExtJS是一款强大的JavaScript库,常用于构建富客户端应用程序,尤其是数据可视化和数据管理组件,如Grid。Grid是ExtJS中...