ExtJs 实现动态加载grid完整示例
Ext3.3完整包
Ext3.3中文文档
数据表的结构是：数据表table > 记录record > 字段
store的结构是: Ext.data.Store > Ext.data.Record>Ext.dataDataField
store 首先驱动 DataProxy 加载数据 ，DataProxy加载完成会驱动 DataReader时行解析，最终获得Record对象。
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;
}
}
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;
}
}
<?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>
<?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>
<%@ 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>
图示： 
相关推荐
-
ExtJs 实现动态加载grid完整示例
Ext3.3完整包 Ext3.3中文文档 数据表的结构是:数据表table > 记录record > 字段 store的结构是: Ext.data.Store > Ext.data.Record>Ext.dataDataField store 首先驱动 DataProxy 加载数据 ,DataProxy加载完成会驱动 DataReader时行解析,最终获得Record对象. 1.bean : 复制代码 代码如下: package com.leo.bean; public class
-
Android 动态加载 so实现示例详解
目录 背景 so动态加载介绍 从一个例子出发 so库检索与删除 动态加载so 结束了吗? ELF文件 扩展 总结 背景 对于一个普通的android应用来说,so库的占比通常都是巨高不下的,因为我们无可避免的在开发中遇到各种各样需要用到native的需求,所以so库的动态化可以减少极大的包体积,自从2020腾讯的bugly团队发部关于动态化so的相关文章后,已经过去两年了,相关文章,经过两年的考验,实际上so动态加载也是非常成熟的一项技术了. 但是很遗憾,许多公司都还没有这方面的涉略又或者说不知
-
android动态加载布局文件示例
一.布局文件part.xml: 复制代码 代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="
-
JS获取浏览器语言动态加载JS文件示例代码
项目出于多语言版本的考虑,前台使用easyui,通过获取浏览器语言版本,来相对的加载easyui语言包,easyui默认语言包en-US 代码如下 <script type="text/javascript"> //ie if (navigator.browserLanguage != "undefined" && navigator.browserLanguage != null) { if (navigator.systemLangu
-
flex动态加载swf皮肤示例代码
复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minW
-
Extjs入门之动态加载树代码
Extjs动态加载树,首先在数据库里面设计存放树信息的表 复制代码 代码如下: USE [KimiExtjs] GO /****** 对象: Table [dbo].[Trees] 脚本日期: 04/08/2010 22:12:25 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO SET ANSI_PADDING ON GO CREATE TABLE [dbo].[Trees]( [Tid] [varchar](40) COLLA
-
动态加载、移除js/css文件的示例代码
本文简单介绍动态加载.移除.替换js/css文件 .有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率.下面贴出代码. <script language="JavaScript"> //动态加载一个js/css文件 function loadjscssfile(filename, filetype){ if (filetype=="js"){ varfileref=document.createE
-
Vue路由监听实现同页面动态加载的示例
场景分析 在系统中一个模块有三个子模块. 业务数据中可以直接根据类型去区分这个三个子模块的归属. 通常情况下.我们是写在同一个模块中然后去选择业务类型. 但是业主要求,将这个拆分成三个菜单.用户根据自己的需求去选择需要使用的模块. 这个三个菜单使用的是同一张数据表. 所以我们肯定只写一个 list,add,edit页面的. 然后根据进入页面的路由来判断属于哪一个分类.并跳转指定分类的 新增,编辑, 和调用对应的列表接口页面 开发 由于三个模块使用的相同的页面.所以需要配置三份路由.并且做出页面区
-
Android 动态加载二维码视图生成快照的示例
1.需求背景 需要实现一个动态加载但不显示出来的视图,且该视图上有个动态生成的二维码,最后用其去生成一张快照(也就是图片). (常见这种情况是来源于"图片分享"的功能需求,与普通图片分享不同在于,该快照图片是动态加载不显示的.) 2.需求功能拆解 动态二维码的实现 动态视图生成快照的实现 3.踩坑点提要 获取不到动态视图的bitmap 无法获取最新动态视图的bitmap 4.开发实现 动态加载的视图的布局文件代码: <?xml version="1.0" en
-
动态加载js文件简单示例
本文实例讲述了动态加载js文件的方法.分享给大家供大家参考,具体如下: function loadScript(url){ var hd = document.getElementsByTagName('head')[0], js = document.createElement('script'); js.src = url; js.type = "text/JavaScript"; if(js.addEventListener){ js.addEventListener("