码迷,mamicode.com
首页 > Web开发 > 详细

初探ExtJS(2)

时间:2016-01-12 11:25:11      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

二、建立第一个Demo。实现查数据库显示到页面

        步骤:1.建立MySQL数据库表

         2.整合SSH框架

         3.用ExtJS显示

   关键注意事项:

   Ext.data.JsonReader中root的含义,比如,请求的action返回的JSON

技术分享

此时root属性为应这样填写:root:list 

1、建立MySQL数据库。如图2-1所看到的

技术分享

图2-1

2、整合SSH框架

      因为ExtJS处理的为JSON数据,则应将action返回的置为JSON格式

      Action类例如以下所看到的。返回为list

    

package com.hanhexin.action;

import java.util.ArrayList;
import java.util.List;

import org.apache.struts2.convention.annotation.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;

import com.hanhexin.entity.Person;
import com.hanhexin.service.IPersonService;
import com.opensymphony.xwork2.ActionSupport;

@Component("personAction")
@Scope("prototype")
public class PersonAction extends ActionSupport{
	
	private Person person;
	
	@Autowired
	private IPersonService personService;
	
	List<Person> list = new ArrayList<Person>();
	
	public String list(){
		person = new Person();
		list = personService.getListByPerson(person, 1, 10);
		System.out.println(list.size()+"action+++++++++++++++++++++");
		return SUCCESS;
	}

	public List<Person> getList() {
		return list;
	}

	public void setList(List<Person> list) {
		this.list = list;
	}
}

        配置struts.xml文件返回JSOn。例如以下所看到的

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<package name="person" extends="json-default" namespace="/">
		<action name="list" class="com.hanhexin.action.PersonAction" method="list">
		    <result name="success"></result>
			<result type="json">
				<param name="list"></param>
			</result>		
		</action>
	</package>
</struts> 

一定要设
<result type="json">...</result>
3、用ExtJS显示到页面 JSP文件例如以下所看到的

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'main.jsp' starting page</title>
    
	<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
	<script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript" language="javascript">
    Ext.onReady(function(){  
/*    var cm = new Ext.grid.ColumnModel([  
        {header:'id',dataIndex:'id'},  
        {header:'姓名',dataIndex:'name'},       
        {header:'电话',dataIndex:'phone'}  
    ]);  */
      
    var proxy = new Ext.data.HttpProxy({url:'list.action'});  
      
    var record = Ext.data.Record.create([  
        {name:'id'},  
        {name:'name'},  
        {name:'phone'}  
    ]);  
      
    var reader = new Ext.data.JsonReader({
    	root:'list'
    },record);  
      
    var store = new Ext.data.Store({  
        proxy:proxy,  
        reader:reader  
    });  
      
    store.load();  
      
    var grid = new Ext.grid.GridPanel({  
        title:'表格',  
      /*  cm:cm,  */
        columns: [
        { header: 'ID',  dataIndex: 'id' },
        { header: '姓名', dataIndex: 'name', flex: 1 },
        { header: '电话', dataIndex: 'phone' }
        ],
        store:store,  
        width:450,  
        height:300,  
        autoExpandColumn:2,  
        renderTo:Ext.getBody()    
    });   
});  
</script>
  </head>
  <body>
  </body>
</html>

解释

1)Ext.onReady为Ext.Loader.onReady的别名

ExtJS API中的解释例如以下所看到的

技术分享

此时用到的仅仅是第一个參数,后面两个參数没实用到

2)var proxy = new Ext.data.HttpProxy({url:‘list.action‘}); 
请求action,当中返回的数据为

技术分享

封装到了var proxy中

3)var record = Ext.data.Record.create()。用于解析JSON,当中属性为JSON中相相应的数据项

4)var reader = new Ext.data.JsonReader({
        root:‘list‘
    },record); 
用于解析JSON。当中root为JSON中的list,即2)中的list

5)var store = new Ext.data.Store()用于存储从action返回的。并由JsonReader解析的数据。

6)var grid = new Ext.grid.GridPanel()用于显示数据

当中renderTo:Ext.getBody()    保证了显示到html页的body中。

4、终于效果如图2-3所看到的

技术分享

图2-3



源代码下载地址:http://download.csdn.net/detail/hhxin635612026/7602631


     

初探ExtJS(2)

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/5123654.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!