Ext 怎么发ajax请求
数据表的结构是:数据表table > 记录record > 字段
store的结构是: Ext.data.Store > Ext.data.Record>Ext.dataDataField
store 首先驱动 DataProxy 加载数据 ,DataProxy加载完成会驱动 DataReader时行解析,最终获得Record对象。
1.bean :
    package com.leo.bean;  
    public class Person {
        private String name;
        private int age;
        private String sex;
        private String birthday;  
        public Person(String name, int age, String sex, String birthday) {
            super();
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.birthday = birthday;
        }  
        public String getName() {
            return name;
        }  
        public void setName(String name) {
            this.name = name;
        }  
        public int getAge() {
            return age;
        }  
        public void setAge(int age) {
            this.age = age;
        }  
        public String getSex() {
            return sex;
        }  
        public void setSex(String sex) {
            this.sex = sex;
        }  
        public String getBirthday() {
            return birthday;
        }  
        public void setBirthday(String birthday) {
            this.birthday = birthday;
        }  
    }  
2.action
    package com.leo.action;  
    import java.util.ArrayList;
    import java.util.List;  
    import com.leo.bean.Person;
    import com.opensymphony.xwork2.ActionSupport;  
    public class ExtjsAction extends ActionSupport {
        private long results;
        private List items;  
        public long getResults() {
            return results;
        }  
        public void setResults(long results) {
            this.results = results;
        }  
        public List getItems() {
            return items;
        }  
        public void setItems(List items) {
            this.items = items;
        }  
        public String execute() throws Exception {
            this.results = 3;
            Person p1 = new Person("张三", 29, "男", "1990-10-22");
            Person p2 = new Person("李四", 28, "男", "1991-03-30");
            Person p3 = new Person("王五", 27, "女", "1993-08-17");
            this.items = new ArrayList<Person>();
            this.items.add(p1);
            this.items.add(p2);
            this.items.add(p3);  
            return SUCCESS;
        }
    }  
3.struts-xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
"http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<include file="struts-default.xml" />
<package name="/json" namespace="/" extends="json-default">
<action name="extjsaction" class="com.leo.action.ExtjsAction">
<result type="json"> </result>
</action>
</package>
</struts>
4.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter> <filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping> </web-app>
5.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ExtJs与Struts2结合</title>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var store = new Ext.data.JsonStore({
url:'json/extjsaction.action',//返回的是DataProxy对象
root:'items',
fields:['name','age','sex','birthday']
});
store.load();
var grid = new Ext.grid.GridPanel({
store:store,
viewConifg:{
forceFit:true
},
columns:[
{header:'姓名',dataIndex:'name'},
{header:'年龄',dataIndex:'age'},
{header:'性别',dataIndex:'sex'},
{header:'生日',dataIndex:'birthday'}
]
});
var win = new Ext.Window({
title:'store ', width:600,
height:400,
layout:'fit',//这个是布局
items:grid
});
win.show();
});
</script>
</head>
<body>
</body>
</html>
图示:
资料下载:
Ext 怎么发ajax请求的更多相关文章
- JS 点击元素发ajax请求 打开一个新窗口
		
JS 点击元素发ajax请求 打开一个新窗口 经常在项目中会碰到这样的需求,点击某个元素后,需要发ajax请求,请求成功以后,开发需要把链接传给前端(或者说请求成功后打开新窗口),前端需要通过新窗口打 ...
 - springmvc 前端 发ajax请求的几种方式
		
一.传json单值或对象 1.前端 var data = {'id':id,'name':name}; $.ajax({ type:"POST", url:"user/s ...
 - react生命周期函数的应用-----1性能优化 2发ajax请求
		
知识点1:每次render其实就会将jax的模板生成一个虚拟dom,跟上一个虚拟dom进行比对,通过diff算法找出不同,再更新到真实dom上去. 1性能优化 每次父组件render一次(除了第一次初 ...
 - 【前端】在浏览器控制台,直接发Ajax请求
		
我们在日常的开发的过程中,经常需要前端测试发送请求测试一些数据.但是由于一些session,cookie的存在,我们无法在postman上创建一些会话.那么这样,我们就可以在浏览器上直接发送Ajax请 ...
 - 当可以设置src时,不必发ajax请求,如果没有参数设置src即可
		
var params = (function(obj){ var string = []; for(var key in obj){ string.push(window.encodeURI(key) ...
 - vue发送ajax请求
		
一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-re ...
 - ajax是怎么发请求的和浏览器发的请求一样吗?cookie
		
下午设置cookie时出现了个问题 用ajax发的post请求php,在php的方法里设置了cookie,然后在浏览器请求的php里打印cookie值但是一直获取不到cookie的值 分析: 1.aj ...
 - legend2---开发日志10(ajax请求的方法是否同样会执行base控制器里面的方法)
		
legend2---开发日志10(ajax请求的方法是否同样会执行base控制器里面的方法) 一.总结 一句话总结:会执行的,所以写base控制器里面的方法要注意,base控制器里面的方法要以查数据为 ...
 - 为什么ajax发GET请求就成功,POST请求则报错?
		
为什么ajax发GET请求就成功,POST请求则报错? (1)首先说明的是请求的URL是一个静态资源,比如一个json文件.(2)现在现象是发GET请求就成功,POST请求则报错.(3)最新发现:就算 ...
 
随机推荐
- bzoj1637 [Usaco2007 Mar]Balanced Lineup
			
Description Farmer John 决定给他的奶牛们照一张合影,他让 N (1 ≤ N ≤ 50,000) 头奶牛站成一条直线,每头牛都有它的坐标(范围: 0..1,000,000,000 ...
 - 【C语言用法】C语言的函数“重载”
			
由于平时很少用到__attribute__定义函数或者变量的符号属性,所以很难想象C语言可以向C++一样进行函数或者变量的重载. 首先,复习一下有关强符号与弱符号的概念和编译器对强弱符号的处理规则: ...
 - EXT JS 4.3 在线学习
			
官网地址:http://docs.sencha.com/extjs/4.1.3/ 相关示例:http://docs.sencha.com/extjs/4.1.3/#!/example Examples ...
 - 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.2
			
/** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...
 - Letter Combinations of a Phone Number 解答
			
Question Given a digit string, return all possible letter combinations that the number could represe ...
 - 剑指offter-面试题7.用两个栈实现队列
			
题目.用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail和deleteHead 分别完成在对尾插入节点和在队头删除节点. 该队列类模板如下: template <typ ...
 - 【转】使用 udev 高效、动态地管理 Linux 设备文件
			
简介: 本文以通俗的方法阐述 udev 及相关术语的概念.udev 的配置文件和规则文件,然后以 Red Hat Enterprise Server 为平台演示一些管理设备文件和查询设备信息的实例.本 ...
 - Android.mk文件语法规范及使用模板
			
Android.mk文件语法详述 介绍:------------这篇文档是用来描述你的C或C++源文件中Android.mk编译文件的语法的,为了理解她们我们需要您先看完docs/OVERVIEW.h ...
 - ArcSDE for Oracle表空间管理——暂时(TEMP)表空间
			
Oracle暂时表空间主要用来做查询和存放一些缓冲区数据.暂时表空间消耗的主要原因是须要对查询的中间结果进行排序. 重新启动数据库能够释放暂时表空间,假设不能重新启动实例,而一直保持问题sql语句的运 ...
 - ubuntu WiFi: operation not possible due to RF-kill《转载》
			
Some people have been experiencing WiFi problems with Ubuntu 10.10 since an update that happend just ...