`
mimang2007110
  • 浏览: 237306 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

GridPanel通过Ajax动态加载数据显示到页面

阅读更多
//创建查询对象
		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('友情提示', '数据查询异常');
						}
					}
				});

 

分享到:
评论

相关推荐

    ext.net 动态创建gridpanel

    在 `newtpanel.aspx` 文件中,可能会使用 `XTemplate` 或 `ClientScript` 来在客户端执行JavaScript代码,以便在特定事件(如按钮点击)时动态显示或隐藏GridPanel。 3. **配置数据源**: GridPanel的数据源可以...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    动态加载本地数据到`Ext.Panel`通常涉及到异步请求,使用`Ajax`或`Store`的`load`方法,通过URL获取JSON或XML格式的数据,并将其渲染到面板内。 例如: ```javascript var panel = Ext.create('Ext.Panel', { ...

    extjs动态生成表格,前台+后台

    当请求成功时,`success`回调函数被调用,这里我们解析返回的JSON响应,将每一列的数据字段和标题添加到ColumnModel中。然后,调用`makeGrid`函数来实际创建并渲染GridPanel。 `makeGrid`函数是实现动态生成...

    ExtJs GridPanel延时加载.rar

    在GridPanel中,当用户滚动到表格的底部或顶部时,延时加载会自动请求更多的数据。这种方式降低了初始页面加载时间,减少了服务器压力,同时提高了用户体验。实现延时加载通常需要设置Store的`autoLoad`属性为`false...

    gridpanel动态加载数据的实例代码

    在本文中,我们将深入探讨如何使用`GridPanel`在Ext JS框架中实现动态加载数据的实例。`GridPanel`是Ext JS中一个强大的组件,它用于显示和操作表格数据。动态加载数据是一种优化性能的策略,它允许在用户滚动或需要...

    ExtJS4.0下的gridPanel组建完全版

    它可以连接到各种数据源,如JSON、XML或Ajax,并自动处理数据的加载、更新和排序。在GridPanel中,Store与Model绑定,确保数据正确地显示在表格中。 2. **Model**:数据模型定义了数据的结构和字段。在GridPanel中...

    ExtJS 表格面板GridPanel完整例子

    - **Ajax数据加载**: 如果数据不在本地,我们需要设置store的proxy来从服务器拉取数据。 - **分页**: 使用`pagingToolbar`插件实现分页功能,设置`pageSize`和`proxy`的`reader`配置。 - **排序与过滤**: `sortable`...

    Ext 操作数据库,对数据的增删改查,包括数据库,Ajax请求和store请求的设置

    主页面的显示则可能涉及到各种组件的组合,如GridPanel、Panel、Toolbar等,配合布局管理器,可以创建出美观且功能完善的界面。 总的来说,“ExtProject”是一个全面介绍Ext数据库操作和Ajax请求的实践项目,它将...

    extjs表格(表格后台数据读,分页),树(后台数据读取,复选框联动)的基本操作示例

    分页功能通过配置Store的proxy和paging参数实现,如设置`autoLoad`为true自动加载数据,`pageSize`定义每页显示的记录数,`proxy`配置为REST或Ajax类型以处理HTTP请求。 2. **TreePanel**:TreePanel用于展示层次...

    Ext 根据数据库返回json动态生成grid列表实例

    在本实例中,数据源是通过Ajax请求从服务器获取的JSON对象,该对象通常包含一个数组,数组中的每个元素代表一行数据。 **步骤1:创建基本的Grid配置** 在创建Grid之前,我们需要定义其基本配置。这包括列定义、存储...

    ext_ext_knew7pi_ajax_

    窗口组件(Window)则可以通过AJAX获取远程数据,然后填充到窗口内部。这些功能增强了EXT应用的灵活性和可扩展性。 在`knew7pi`这个标签中,可能是指某个个人或团队对EXT 1.1的深入理解和实践,他们分享了一些关于...

    Ext 表单示例演示 视频

    在描述中提到的“连接XML文件,动态显示表格数据”,这涉及到Ext JS的数据绑定和GridPanel组件。GridPanel是Ext JS中用于展示表格数据的关键组件。开发者可以通过配置XML数据源,使用Ext的XMLReader解析XML文件,将...

    Coolite 中前台获取 GridPanel 当前选择行值的代码

    这样做可以不重新加载页面的情况下与服务器进行数据交换,提高用户体验。 最后,Coolite框架也允许你轻松获取和设置button和textField等控件的文本值。这通常通过JavaScript的DOM操作来实现,可以使用Coolite提供的...

    Extjs Ajax 购物车

    在购物车中,AJAX(Asynchronous JavaScript and XML)用于在后台与服务器交换数据,无需重新加载整个页面。当用户添加商品到购物车时,AJAX请求会发送到服务器,验证商品信息,然后将购物车状态更新返回给客户端。...

    Ajax和Ext插件的使用

    在"使用Ajax技术在ExtGrid插件中展示数据"这个场景中,Prototype可能被用来创建Ajax请求,处理服务器返回的数据,并将这些数据动态地渲染到页面上。 **ExtJS框架** ExtJS是Sencha公司推出的一个用于构建富客户端...

    extjs grid取到数据而不显示的解决

    应确保GridPanel已经正确设置了数据存储,并且在添加数据前已经通过`store.load`方法加载数据。此外,当通过代码动态添加数据时,需要调用`store.sync`或者相应的更新方法来刷新Grid。 3. 检查CSS样式。有时候...

    extjs中文教程 ajax

    你可以定义模型(Model)来映射后端数据结构,使用`Ext.data.Store`来管理和加载数据,并通过`Ext.data.reader.Json`或`Ext.data.reader.Xml`解析服务器返回的数据。 在本教程中,你将学习如何配置`Ext.data.Model`...

    extjs前台分页插件PagingStore!

    4. **数据加载和更新**:当用户点击分页栏的按钮时,PagingStore会向服务器发送新的请求,获取新页面的数据,并更新GridPanel中的内容。 5. **缓存策略**:PagingStore支持缓存策略,可以缓存已经加载过的页面数据,...

    ExtDesigner中用jsonstore给girdpanel绑定数据

    标题中的"ExtDesigner中用jsonstore给girdpanel绑定数据"是指在Ext Designer这款可视化设计工具中,通过JsonStore来为GridPanel加载和显示JSON格式的数据。ExtDesigner是Sencha提供的一款用于创建ExtJS应用的图形化...

    ext grid 动态扩展

    在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...

Global site tag (gtag.js) - Google Analytics