//创建查询对象
var gridStore = new Ext.data.JsonStore( {
url : "../../service/vip/query.action",
autoLoad : false,
pruneModifiedRecords : true,
fields : [ 'IMSI', 'MSISDN', 'zjshcount'],
root : 'data',
method : 'POST'
});
//数据加载
gridStore.load();
//创建表格对象,显示查询出来的数据
var grid = new Ext.grid.GridPanel( {
el : "gridDiv",
store : gridStore,
columns : [
{id : 'IMSI', header : 'IMSI', dataIndex : 'IMSI', sortable : true},
{id : 'MSISDN', header : 'MSISDN', dataIndex : 'MSISDN', sortable : true},
{id : 'zjshcount', header : '主叫试呼次数', dataIndex : 'zjshcount', sortable : true}
],
viewConfig : {
forceFit : true
},
autoHeight : true,
width : 900
});
//加载到页面
grid.render();
//带参数的后台访问加载
//点击查询按钮后根据查询条件加载查询结果
grid.getStore().load( {
params : {
starttime : starttimeValue,
endtime : endtimeValue,
type : type_comboBox.getValue(),
province : province.getValue(),
city : city.getValue(),
zdvip : zdvip.checked,
continutime : continutime.getValue(),
continutime2 : continutime2.getValue(),
opc : opc.getValue(),
opc2 : opc2.getValue()
},
callback : function(r, options, success) {
if (success) {
//加载成功后显示到页面
grid.render();
} else {
Ext.Msg.alert('友情提示', '数据查询异常');
}
}
});
分享到:
相关推荐
在 `newtpanel.aspx` 文件中,可能会使用 `XTemplate` 或 `ClientScript` 来在客户端执行JavaScript代码,以便在特定事件(如按钮点击)时动态显示或隐藏GridPanel。 3. **配置数据源**: GridPanel的数据源可以...
动态加载本地数据到`Ext.Panel`通常涉及到异步请求,使用`Ajax`或`Store`的`load`方法,通过URL获取JSON或XML格式的数据,并将其渲染到面板内。 例如: ```javascript var panel = Ext.create('Ext.Panel', { ...
当请求成功时,`success`回调函数被调用,这里我们解析返回的JSON响应,将每一列的数据字段和标题添加到ColumnModel中。然后,调用`makeGrid`函数来实际创建并渲染GridPanel。 `makeGrid`函数是实现动态生成...
在GridPanel中,当用户滚动到表格的底部或顶部时,延时加载会自动请求更多的数据。这种方式降低了初始页面加载时间,减少了服务器压力,同时提高了用户体验。实现延时加载通常需要设置Store的`autoLoad`属性为`false...
在本文中,我们将深入探讨如何使用`GridPanel`在Ext JS框架中实现动态加载数据的实例。`GridPanel`是Ext JS中一个强大的组件,它用于显示和操作表格数据。动态加载数据是一种优化性能的策略,它允许在用户滚动或需要...
它可以连接到各种数据源,如JSON、XML或Ajax,并自动处理数据的加载、更新和排序。在GridPanel中,Store与Model绑定,确保数据正确地显示在表格中。 2. **Model**:数据模型定义了数据的结构和字段。在GridPanel中...
- **Ajax数据加载**: 如果数据不在本地,我们需要设置store的proxy来从服务器拉取数据。 - **分页**: 使用`pagingToolbar`插件实现分页功能,设置`pageSize`和`proxy`的`reader`配置。 - **排序与过滤**: `sortable`...
主页面的显示则可能涉及到各种组件的组合,如GridPanel、Panel、Toolbar等,配合布局管理器,可以创建出美观且功能完善的界面。 总的来说,“ExtProject”是一个全面介绍Ext数据库操作和Ajax请求的实践项目,它将...
分页功能通过配置Store的proxy和paging参数实现,如设置`autoLoad`为true自动加载数据,`pageSize`定义每页显示的记录数,`proxy`配置为REST或Ajax类型以处理HTTP请求。 2. **TreePanel**:TreePanel用于展示层次...
在本实例中,数据源是通过Ajax请求从服务器获取的JSON对象,该对象通常包含一个数组,数组中的每个元素代表一行数据。 **步骤1:创建基本的Grid配置** 在创建Grid之前,我们需要定义其基本配置。这包括列定义、存储...
窗口组件(Window)则可以通过AJAX获取远程数据,然后填充到窗口内部。这些功能增强了EXT应用的灵活性和可扩展性。 在`knew7pi`这个标签中,可能是指某个个人或团队对EXT 1.1的深入理解和实践,他们分享了一些关于...
在描述中提到的“连接XML文件,动态显示表格数据”,这涉及到Ext JS的数据绑定和GridPanel组件。GridPanel是Ext JS中用于展示表格数据的关键组件。开发者可以通过配置XML数据源,使用Ext的XMLReader解析XML文件,将...
这样做可以不重新加载页面的情况下与服务器进行数据交换,提高用户体验。 最后,Coolite框架也允许你轻松获取和设置button和textField等控件的文本值。这通常通过JavaScript的DOM操作来实现,可以使用Coolite提供的...
在购物车中,AJAX(Asynchronous JavaScript and XML)用于在后台与服务器交换数据,无需重新加载整个页面。当用户添加商品到购物车时,AJAX请求会发送到服务器,验证商品信息,然后将购物车状态更新返回给客户端。...
在"使用Ajax技术在ExtGrid插件中展示数据"这个场景中,Prototype可能被用来创建Ajax请求,处理服务器返回的数据,并将这些数据动态地渲染到页面上。 **ExtJS框架** ExtJS是Sencha公司推出的一个用于构建富客户端...
应确保GridPanel已经正确设置了数据存储,并且在添加数据前已经通过`store.load`方法加载数据。此外,当通过代码动态添加数据时,需要调用`store.sync`或者相应的更新方法来刷新Grid。 3. 检查CSS样式。有时候...
你可以定义模型(Model)来映射后端数据结构,使用`Ext.data.Store`来管理和加载数据,并通过`Ext.data.reader.Json`或`Ext.data.reader.Xml`解析服务器返回的数据。 在本教程中,你将学习如何配置`Ext.data.Model`...
4. **数据加载和更新**:当用户点击分页栏的按钮时,PagingStore会向服务器发送新的请求,获取新页面的数据,并更新GridPanel中的内容。 5. **缓存策略**:PagingStore支持缓存策略,可以缓存已经加载过的页面数据,...
标题中的"ExtDesigner中用jsonstore给girdpanel绑定数据"是指在Ext Designer这款可视化设计工具中,通过JsonStore来为GridPanel加载和显示JSON格式的数据。ExtDesigner是Sencha提供的一款用于创建ExtJS应用的图形化...
在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...