/*
var data=[{id:1,
name:' 小王 ',
email:'xiaowang@easyjf.com',
sex:' 男 ',
bornDate:'1991-4-4'},
{id:1,
name:' 小李 ',
email:'xiaoli@easyjf.com',
sex:' 男 ',
bornDate:'1992-5-6'},
{id:1,
name:' 小兰 ',
email:'xiaoxiao@easyjf.com',
sex:' 女 ',
bornDate:'1993-3-7'}];
*/
var reader =new Ext.data.JsonStore({
id:'id',
//data:data,这里是用来本地测试调用
root:'results',
mode: 'local',
url:'http://localhost:99/ext2.0/js/txt/grid.php',//返回的json数据
autoLoad: true,
fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
});
reader.load();
//alert(reader.getCount);
var colM=new Ext.grid.ColumnModel([{
header:" 姓名 ",
dataIndex:"name",
sortable:true,
editor:new Ext.form.TextField()},
{header:" 性别 ",
dataIndex:"sex",
sortable:true,
editor:new Ext.form.ComboBox({//transform:'sexlist',
displayField:'sex',
triggerAction: 'all',
mode: 'local',
store:sex,//store
editable:false,
lazyRender:true})
},
{ header:" 出生日期 ",
dataIndex:"bornDate",
width:120,
sortable:true,
editor : new Ext.form.DateField(),
renderer:Ext.util.Format.dateRenderer('Y 年 m 月 d 日 ')},
{header:" 电子邮件 ",
dataIndex:"email",
sortable:true,
editor:new Ext.form.TextField()}
]);
var grid = new Ext.grid.EditorGridPanel({
renderTo:"grid",
title:" 学生基本信息管理 ",
cm:colM,
store:reader,
autoHeight: true,
autoExpandColumn:3
});
分享到:
相关推荐
标题中的"ExtDesigner中用jsonstore给girdpanel绑定数据"是指在Ext Designer这款可视化设计工具中,通过JsonStore来为GridPanel加载和显示JSON格式的数据。ExtDesigner是Sencha提供的一款用于创建ExtJS应用的图形化...
在EXT-JS和JSON应用中,SQL脚本通常用于服务器端,处理数据的增删改查操作,并将结果转换为JSON格式供EXT-JS Grid使用。 在实际项目中,服务器端可能会使用PHP、Java、Node.js等语言处理SQL查询并返回JSON数据。...
在ExtJs框架中,JsonStore是一种非常重要的数据存储器,它专门用来处理和展示JSON格式的数据。本资料主要讲解如何使用JsonStore来加载并显示数据,以创建一个简单的个人信息表格。 首先,为了使用ExtJs框架,我们...
3. **JSON数据源**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,EXT Grid通过`Ext.data.JsonStore`处理JSON数据。配置时需提供`url`和`root`属性,`root`定义了JSON对象中包含数据的键。JSON的...
`中,创建了一个JsonStore实例,ds,用于从'xxx.jsp'获取JSON格式的数据。JsonStore是Store的一种特殊类型,专门用于处理JSON格式的响应数据。在这里,root配置指定了数据在JSON响应中的根节点,fields则定义了数据...
在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...
- **DisplayAction.java**:这是一个Struts2 Action类,负责处理前端发送过来的请求,并返回JSON格式的数据。 ```java public class DisplayAction extends ActionSupport { // ... public String display() ...
这通常通过`Ext.select`函数实现,该函数返回一个包含所有匹配元素的`Ext.util.MixedCollection`对象。 ```javascript // 选择所有class为'item'的元素 var items = Ext.select('.item'); // 遍历所有选中的元素 ...
- **JsonStore**:从JSON格式的字符串或URL获取数据。 - **ArrayStore**:使用本地数组数据。 - **AjaxProxy**:通过异步请求从服务器获取数据。 4. **交互功能**: GridPanel 支持丰富的用户交互功能,如排序...
- 对于`TreeStore`和`JsonStore`的配置,应确保所使用的字段名、URL地址以及后端返回的数据格式一致。 - 分页逻辑的实现可能会因具体的业务需求而有所不同,因此在实际开发过程中可能需要根据具体情况调整代码。 - ...
Servlet在后台处理请求,返回JSON格式的数据,而ExtJS负责在前端接收和展示这些数据。这样的设计模式使得前后端分工明确,便于开发和维护。对于初学者来说,理解这个例子可以帮助他们更好地掌握Web应用的数据交互...
这里,我们向后台的`getData.php`发送请求,收到JSON格式的响应后,将其解析并加载到数据存储中,然后创建和显示图表。 5. **配置和样式**: Ext JS的柱状图允许对许多方面进行配置,如颜色、轴标签、图例、动画...
在提供的代码片段中,使用了`JsonStore`作为数据源,其通过指定的URL(`path+'/servlet/ComBox'`)异步加载JSON格式的数据。`JsonStore`的`fields`属性定义了数据集中字段的结构,这里的`groupId`和`groupName`分别...
- 定义一个`Ext.data.JsonStore`,设置URL指向提供JSON数据的后台接口,定义字段名和数据结构。 - 创建Combobox实例,与之前相同,但将store设置为JsonStore,模式设为远程(remote),因为数据从服务器获取。 - ...
本篇文章将详细讲解Ext中下拉列表ComboBox组件的store数据格式及其用法。 首先,ComboBox的store数据格式有两种常见的方式: 1. **数组格式**: ```javascript store : [['11', '2011'], ['12', '2012'], ['13',...
`JsonStore` 是 Ext JS 提供的一种数据存储类,它可以处理 JSON 数据格式,并为数据提供增删改查等操作。 2. **初始化 ComboBox** ```javascript var combo = new Ext.form.ComboBox({ store: store, mode: '...
这有助于更灵活地管理和操作JSON格式的数据。 14. **判断变量是否存在的方法:** - 在进行某些操作之前,务必先检查相关变量是否存在且非空。例如: ```javascript if (typeof(pn_zlfx_gp_mark_subjects) == '...
另一种是传统的`Ext.tree.TreeLoader`,它通过`url`属性来获取JSON格式的数据。这两种加载器的区别在于数据获取的机制和参数传递的方式。 `WebInvokeTreeLoader`通常用于AJAX请求,你可以通过监听`beforeload`事件...
此例中,`getPhotos` Action配置指向了`photos.jsp`页面,用于生成并返回JSON格式的数据。 #### 1.2 JSP页面处理 `photos.jsp`页面通过Struts2的标签库(`<s:>`)遍历`photos`集合,将每张照片的信息(如id、...
var store = Ext.create('Ext.data.JsonStore', { fields: ['name', 'email'], proxy: { type: 'ajax', url: 'data.json', reader: { type: 'json', rootProperty: 'data' } } }); var grid = Ext....