ExtJs4学习(七)MVC中的Store

Ext.data.Store是extjs中用来进行数据交换和数据交互的标准中间件,不管是Grid还是ComboBox,都是通过它 实现数据读取、类型转换、排序分页和搜索等操作的。

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'loginname', type: 'string'},
        {name: 'ip',  type: 'string'}
    ]
});

Store既能够从本地数组中读取数据,也能够从server远程读取数据,当然还能够server代理读取,这些都得靠proxy实现,至于还有哪些区分,以及实现方式将再下一节阐述

为了更好的说清楚Store的使用方法,我们做例如以下样例

var store = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'memory',
        data:[{loginname:'admin',ip:'192.168.1.2'},{loginname:'guest',ip:'192.168.1.5'}]
    },
    //autoLoad:true//配置了此项,表明数据集自己主动载入
});

一些经常用法

//载入数据
store.load();
//加入数据
store.add({loginname:'administrator.com',ip:'192.168.1.8'});
//读取数据
store.each(function(record){
	console.info(record.get('loginname'));
	alert(record.get('loginname'));
});
//过滤
//store.filter("loginname", /\.com$/);依据单个属性域(field)过滤:
store.filter([
              {property: "loginname", value: /\.com$/},
              {filterFn: function(item) { return item.get("ip") == '192.168.1.5'; }}
]);
//查找某条记录
var record = store.find('loginname','guest');
//获取store中第一条记录的快捷方法.
var record = store.first();
//获取指定index处的记录
var record = store.getAt(2);
//获取store中记录的数量
var count = store.getCount;
//获取store中最后一条记录的快捷方法
var record = store.last();

后台读取数据

var store = Ext.create('Ext.data.Store', {
    model: 'User',
    pageSize:5,//每页显示条数,默认25
    proxy: {
        type: 'ajax',
        url: 'jsonServer.jsp',
        reader: {
            type: 'json',
            root: 'rows',
            totalProperty: 'total'
        },
        writer: {
			type: 'json'
		}
    }
});

怎么获取数据

store.load({
	scope: this,
    callback: function(records, operation, success) {
    	//获取总记录数
    	//console.info(store.getCount());这个来源于对记录的统计
    	console.info(store.getTotalCount());//这个来源于后台传过来的total
    	//获取当前页
    	console.info(store.currentPage);
    	Ext.each(records,function(record){
    		console.info(record.get('loginname'));
    	})
    }
});

//显示第二页数据
store.loadPage(2);
//显示上一页数据
store.previousPage();
//显示下一页数据
store.nextPage();

后台数据,我以jsp的形式提供

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
	String[] persons = new String[10];
	persons[0] = "{loginname : 'tom' , ip : '192.168.1.1'}";
	persons[1] = "{loginname : 'jack' , ip : '192.168.1.2'}";
	persons[2] = "{loginname : 'mary' , ip : '192.168.1.3'}";
	persons[3] = "{loginname : 'jone' , ip : '192.168.1.4'}";
	persons[4] = "{loginname : 'ada' , ip : '192.168.1.5'}";
	persons[5] = "{loginname : 'alex' , ip : '192.168.1.6'}";
	persons[6] = "{loginname : 'lucy' , ip : '192.168.1.7'}";
	persons[7] = "{loginname : 'jms' , ip : '192.168.1.8'}";
	persons[8] = "{loginname : 'smile' , ip : '192.168.1.9'}";
	persons[9] = "{loginname : 'somnus' , ip : '192.168.1.10'}";

	int pageSize = Integer.parseInt(request.getParameter("page").toString());
	int limit = Integer.parseInt(request.getParameter("limit").toString());

	System.out.println("pageSize="+pageSize+ " limit="+limit);
	StringBuffer personName = new StringBuffer();
	personName.append("{");
	personName.append("total : 10,");
	personName.append("rows : [");
	int min = (pageSize-1)*limit;
	int max = pageSize*limit;
	if(max > 10){
		max = 10;
	}
	for(int i = min ; i < max ; i++){
		personName.append(persons[i]);
		if(i < max - 1){
			personName.append(",");
		}
	};
	personName.append("]");
	personName.append("}");
	response.getWriter().write(personName.toString());
%>

最后介绍一个Store的一个属性:storeId

当前store对象的唯一标识ID. 当此值存在时, 当前Store将被注冊到Ext.data.StoreManager中, 从而能够在别处轻松创建.

获取方式

var store = Ext.data.StoreManager.lookup('simpsonsStore')
时间: 2024-10-08 18:51:49

ExtJs4学习(七)MVC中的Store的相关文章

ExtJs4学习MVC中的Store

Ext.data.Store是extjs中用来进行数据交换和数据交互的标准中间件,无论是Grid还是ComboBox,都是通过它实现数据读取.类型转换.排序分页和搜索等操作的. 1 2 3 4 5 6 7 Ext.define('User', {     extend: 'Ext.data.Model',     fields: [         {name: 'loginname', type: 'string'},         {name: 'ip',  type: 'string'}

在MVC中实现和网站不同服务器的批量文件下载以及NOPI下载数据到Excel的简单学习

嘿嘿,我来啦,最近忙啦几天,使用MVC把应该实现的一些功能实现了,说起来做项目,实属感觉蛮好的,即可以学习新的东西,又可以增加自己之前知道的知识的巩固,不得不说是双丰收啊,其实这周来就开始面对下载在挣扎啦,不知道从哪下手,而且自己针对一个文件下载的小小练习还是写过的,但是和项目中的下载完全就是两个世界,所以我只能抱着学习的心情查找资料啦,刚开始由于leader没有说怎么个下载的办法,我只能自己看些有关下载的资料啦,周一只是在猜测的学习,然后通过询问各路大神.就新学习了NOPI,当我看到Nopi下

(转)Maven学习总结(七)——eclipse中使用Maven创建Web项目

孤傲苍狼只为成功找方法,不为失败找借口! Maven学习总结(七)——eclipse中使用Maven创建Web项目 一.创建Web项目 1.1 选择建立Maven Project 选择File -> New ->Project,如下图所示: 在New窗口中选择 Maven -> Maven Project.点击[next]如下图所示: 1.2 选择项目路径 根据项目的实际情况选择项目的存放目录,也可以选择[Use default Workspace location]默认工作空间.如下图

ContextLoaderListener和Spring MVC中的DispatcherServlet学习

DispatcherServlet介绍 DispatcherServlet是Spring前端控制器的实现,提供Spring Web MVC的集中访问点,并且负责职责的分派,与Spring IoC容器无缝集成,从而可以获得Spring的所有好处. DispatcherServlet主要用作职责调度工作,本身主要用于控制流程,主要职责如下: 1.文件上传解析,如果请求类型是multipart将通过MultipartResolver进行文件上传解析:2.通过HandlerMapping,将请求映射到处

&lt;转&gt;ASP.NET学习笔记之在ASP.NET MVC中使用DropDownList

看到一篇关于dropdownlist的用法很好的阐述,比较清楚,留着,防止以后自己不记得,还可以瞅瞅. 在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性Html,它为我们呈现控件提供了捷径. 我们今天主要来讨论Html.DropDownList的用法,首先从Html.TextBox开始. Html.TextBox有一个重载方法形式如下: publi

ASP.NET MVC中的ActionFilter介绍学习

一直都知道MVC中的ActionFilter,只是没有在实际项目中使用过. 顾名思义,ActionFilter就是指在Action上的Filter, 那么,在Action上的Filter到底有哪些呢.首先我们看看MVC中的Controller基类(抽象类) public abstract class Controller : ControllerBase, IActionFilter, IAuthenticationFilter, IAuthorizationFilter, IDisposabl

springMVC3学习(七)--Interceptor拦截器

Spring为我们提供了:org.springframework.web.servlet.HandlerInterceptor接口, org.springframework.web.servlet.handler.HandlerInterceptorAdapter适配器, 实现这个接口或继承此类,能够很方便的实现自己的拦截器. 有下面三个方法: Action之前运行 public boolean preHandle(HttpServletRequest request, HttpServletR

ExtJs4学习(二):Dom文档操作

现在主流的JS框架要数ExtJs和JQuery应用的比较广泛.JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势.ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的封装之外,还提供了一套强大的UI库.在企业级B/S解决方案应用上独占优势.就单说它在原生JS的封装,DOM操作方式封装方面也足以藐视JQuery.下面我就通过对比API,体现两种框架的异曲同工之处.我们已JQuery API为主线,来看看ExtJs是否有替代的方案. 注意一点:ExtJs4.0相对上

ExtJS4学习--多表头Grid

ExtJS4学习--多表头Grid 分类: javascript 2014-06-11 17:59 1676人阅读 评论(2) 收藏 举报 ext 转载来源:http://www.mhzg.net/a/20115/201151911240247.html 做项目的时候,有时候会遇到多表头的Grid,在EXTJS4中,多表头的实现已经很简单了,本文介绍如何实现多表头gird的功能. 做项目的时候,有时候会遇到多表头的Grid,在EXTJS4中,多表头的实现已经很简单了,本文介绍如何实现多表头gir