刚开始接触EXT,可以搞了2天了,一个小小的测试都没有搞出来
大侠们帮忙看看吧 ~~~ 后台能取到数据,可前台怎么都取不到json,页面上能显示出grid框和列 但是没有数据;大家看我的代码可能会发现我的列都是中文的,这是由于我们的项目的原因,我查过资料EXT对中文取值是支持的
我的jsp也是UTF-8的
json的后台打印:{"pageInfo":1,"data":[{"签发人":"","归档":"","登记号":"001","保管期限":"10年","文件标题":"关于什么的测试情况","原文路径":"","份数":"","主题词":"啊","备注":"","正文":"","归档份数":"","处理单":"","密级":"机密","责任者":"啊","拟稿人":"","办结提示":"","分类号":"020","成文日期":"20081009","页数":"1","全宗号":"","缓急程度":"","签发时间":"","拟稿部门":"","主办部门":"","文号":"综[2008]1号","附件":"","登记日期":"20081009"}]}
java(action)的写法:
JSONArray ary = new JSONArray(recodList);
JSONObject jo = new JSONObject();
jo.put("data", ary);
jo.put("pageInfo",recodList.size());
String jstr=jo==null?"":jo.toString();
boolean scriptTag = false;
String cb = request.getParameter("callback");
if (cb != null) {
scriptTag = true;
response.setContentType("text/html;charset=UTF-8");
} else {//"text/html;charset=UTF-8" "text/javascript;charset=UTF-8" "application/x-json;charset=UTF-8"
response.setContentType("text/html;charset=UTF-8");
}
if (scriptTag) {
jstr = cb + "("+jstr+")";
}
System.out.println(jstr);
response.getWriter().print(jstr);
jsp(js代码)
<html>
<head>
<link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="scripts/ext/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" >
var APP_PATH='/esoaisapp';
Ext.onReady(function(){
function toggleDetails(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
var ds= new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: "listPreArchiveEdit.html?content.method=TestGtSearch&contentPath=/preArchive/1@2/1@299/29@332/4@346/3@456/@458"}),
reader: new Ext.data.JsonReader({
totalProperty:"pageInfo",
root:"data",
fields:[
{name:"密级"},
{name:"办结提示"},
{name:"成文日期"},
{name:"附件"},
{name:"责任者"},
{name:"拟稿部门"},
{name:"签发时间"},
{name:"保管期限"},
{name:"登记号"},
{name:"全宗号"},
{name:"登记日期"},
{name:"分类号"},
{name:"主题词"},
{name:"主办部门"},
{name:"份数"},
{name:"归档"},
{name:"拟稿人"},
{name:"签发人"},
{name:"页数"},
{name:"文件标题"},
{name:"原文路径"},
{name:"文号"},
{name:"缓急程度"},
{name:"备注"},
{name:"归档份数"},
{name:"正文"},
{name:"处理单"}
]
})
});
var cbsm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel(
[new Ext.grid.RowNumberer(),
cbsm,
{header:"密级",dataIndex:"密级"},
{header:"办结提示",dataIndex:"办结提示"},
{header:"成文日期",dataIndex:"成文日期"},
{header:"附件",dataIndex:"附件"},
{header:"责任者",dataIndex:"责任者"},
{header:"拟稿部门",dataIndex:"拟稿部门"},
{header:"签发时间",dataIndex:"签发时间"},
{header:"保管期限",dataIndex:"保管期限"},
{header:"登记号",dataIndex:"登记号"},
{header:"全宗号",dataIndex:"全宗号"},
{header:"登记日期",dataIndex:"登记日期"},
{header:"分类号",dataIndex:"分类号"},
{header:"主题词",dataIndex:"主题词"},
{header:"主办部门",dataIndex:"主办部门"},
{header:"份数",dataIndex:"份数"},
{header:"归档",dataIndex:"归档"},
{header:"拟稿人",dataIndex:"拟稿人"},
{header:"签发人",dataIndex:"签发人"},
{header:"页数",dataIndex:"页数"},
{header:"文件标题",dataIndex:"文件标题"},
{header:"原文路径",dataIndex:"原文路径"},
{header:"文号",dataIndex:"文号"},
{header:"缓急程度",dataIndex:"缓急程度"},
{header:"备注",dataIndex:"备注"},
{header:"归档份数",dataIndex:"归档份数"},
{header:"正文",dataIndex:"正文"},
{header:"处理单",dataIndex:"处理单"}
]
);
var grid=new Ext.grid.GridPanel({el:"grid",store:ds,cm:cm,sm:cbsm,
width:800,
height:500,
title:"grid",
bbar: new Ext.PagingToolbar({
pageSize: 4,
store: ds,
displayInfo: true,
displayMsg: "Displaying topics {0} - {1} of {2}",
emptyMsg: "No topics to display"
})
});
grid.render();
ds.load({params:{start:0,limited:10}});
});
</script>
</head>
<body style="padding:0px;margin:10px;">
<div id="grid" style="border:0px solid #cccccc;background-color:#f3f3f3;padding:5px;width:100%;" >
</div>
</body>
</html>
分享到:
相关推荐
Struts2 Action查询数据库,将查询结果转化为JSON,EXT接收到JSON数据后,将其渲染成表格或其他UI元素显示给用户。 3. **更新(Update)**:用户编辑记录后,EXT会将修改后的数据以JSON格式发送给服务器。Struts2 ...
在本篇ExtJs学习资料中,我们探讨了如何从服务器获取JSON数据并进行分页处理。这是一项在Web应用程序中非常常见的任务,特别是在构建数据密集型界面时。下面我们将详细阐述实现这一功能的关键步骤和涉及的技术点。 ...
这里,`params`对象中的`data`键值对包含了要发送的JSON数据,`Ext.encode`函数负责将其转换为JSON格式。 在PHP端,由于JSON数据是作为字符串提交的,因此我们不能简单地通过`$_POST['data']`来获取。我们需要使用`...
通常情况下,我们会根据返回数据的格式选择合适的读取器,比如对于JSON格式的数据,可以使用`JsonReader`。 Store还支持内联数据,即可以通过配置`data`选项直接定义数据,这在某些情况下非常方便。例如: ```...
后台数据读取通常涉及Ajax请求,通过Ext.Ajax或Store对象与服务器进行通信。分页功能通过配置Store的proxy和paging参数实现,如设置`autoLoad`为true自动加载数据,`pageSize`定义每页显示的记录数,`proxy`配置为...
总结来说,Ext.data是Ext_JS框架中处理数据的核心部分,它提供了强大的数据存储、读取和传输能力。通过灵活的Store、Reader和Proxy机制,开发者可以轻松地从各种数据源获取数据并呈现给用户。同时,Ext.data....
描述提到"配置proxy就好请求就可以从后台拿数据",这通常意味着在实际应用中,proxy会被配置为某种类型,如AjaxProxy或ScriptTagProxy,以便与服务器进行异步通信,获取或提交数据。但在这个例子中,由于是本地数据...
对于远程数据,通常会使用Ajax请求(DWR或者Ext.Ajax)从服务器获取JSON或XML格式的数据。 更新(Update):当用户修改了数据,Store会自动检测到这些变化。调用`sync()`方法会将更新后的数据发送回服务器,后台...
在JSP页面中获取由ExtJS和Ajax组合使用的前台传递的JSON数据并处理的过程,涉及到多个知识点和技术组件。这个过程通常包括以下几个关键步骤: 1. JSON数据的前台生成与传递: 使用ExtJS框架可以方便地构建用户界面...
ExtJS的组件和模型(Models)支持JSON数据,因此在与后台交互时,通常会将数据库中的数据转换为JSON格式发送给前端,或者接收前端提交的JSON数据并保存到数据库。使用JSON的好处在于其结构清晰、易于解析,并且跨...
配置proxy时,应指定URL、请求方法(GET, POST, PUT, DELETE)以及数据的读取方式(如JSON, XML等)。 六、事件处理 在进行CRUD操作时,可以监听Store的`beforeSync`和`sync`事件,以便在同步前后执行额外的逻辑,...
3.5.2. TreeLoader外传 之 读取本地json 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你咋从...
`MemoryProxy`从内存中读取原始数据,`ArrayReader`则负责将这些数据转换为`PersonRecord`实例,最后这些实例会被存储在`store`中。这一过程是`Ext.data.Store`最基本的功能之一。 #### 四、数据排序 `Ext.data....
`Ext.data.reader.Json`读取返回的JSON数据,填充到表格中。分页功能可以通过配置`Store`的`pageSize`和`loadPage()`方法实现,服务端根据请求的页码返回对应的数据。 5. **分页(Paging)**:`Ext.toolbar.Paging`...
`JsonStore读取后台json数据.txt`可能包含了如何从服务器获取JSON数据,然后使用JsonStore进行解析和展示的示例。 4. **Store支持按照拼音排序**: EXTJS 的Store 支持对数据进行排序,包括按照中文拼音的首字母...
总的来说,"后台框架之 Ext v2.0"是一个强大且灵活的前端开发框架,它通过组件化、数据绑定、布局管理和Ajax交互等功能,极大地提升了Web应用的开发效率和用户体验。尽管现在有更新的版本(如v4和v6),但v2.0仍是一...
3. `Newtonsoft.Json.dll`:这是一个.NET平台上的JSON序列化库,用于在C#代码中处理JSON数据,可能在这个项目中用于前后端的数据交换。 4. `from.gif`:可能是一个示例图片,可能用于在用户界面中显示。 5. `ext-all...
1. **连接后台**:首先,我们需要使用Ajax请求或者其他数据获取技术(如Sencha Direct或Ext.data.Store)与后台服务器通信。通常,我们会创建一个`Ext.Ajax.request`或者使用`Ext.data.proxy.Proxy`来发送HTTP请求到...
Grid Panel是Ext JS中用于显示和操作表格数据的重要组件,而DWR则负责在后台处理数据操作并将其结果返回给前端。 在实际的应用场景中,开发者可能会遇到以下知识点: 1. **Ext JS Grid Panel**:Grid Panel是Ext ...