初探ExtJS（2）-Mysql Tutorial-php.cn

初探ExtJS（2）

WBOY

Release： 2016-06-07 15:49:30

Original

1287 people have browsed it

二、建立第一个Demo，实现查数据库显示到页面步骤：1.建立MySQL数据库表 2.整合SSH框架 3.用ExtJS显示关键注意事项： Ext.data.JsonReader中root的含义，例如，请求的action返回的JSON 此时root属性为应这样填写：root:list 1、建立MySQL数据库，如图2-1所

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

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

2.整合SSH框架

3.用ExtJS显示

关键注意事项：

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

初探ExtJS（2）

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

1、建立MySQL数据库，如图2-1所示

初探ExtJS（2）

图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;
	}
}
</person></person></person></person>

Copy after login

配置struts.xml文件返回JSOn，如下所示

<?xml version="1.0" encoding="UTF-8" ?>

<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">
			</result>		
		</action>
	</package>
</struts>

Copy after login

一定要设

<result type="json">...</result>

Copy after login

3、用ExtJS显示到页面 JSP文件如下所示





  
    <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:&#39;id&#39;,dataIndex:&#39;id&#39;},  
        {header:&#39;姓名&#39;,dataIndex:&#39;name&#39;},       
        {header:&#39;电话&#39;,dataIndex:&#39;phone&#39;}  
    ]);  */
      
    var proxy = new Ext.data.HttpProxy({url:&#39;list.action&#39;});  
      
    var record = Ext.data.Record.create([  
        {name:&#39;id&#39;},  
        {name:&#39;name&#39;},  
        {name:&#39;phone&#39;}  
    ]);  
      
    var reader = new Ext.data.JsonReader({
    	root:&#39;list&#39;
    },record);  
      
    var store = new Ext.data.Store({  
        proxy:proxy,  
        reader:reader  
    });  
      
    store.load();  
      
    var grid = new Ext.grid.GridPanel({  
        title:&#39;表格&#39;,  
      /*  cm:cm,  */
        columns: [
        { header: &#39;ID&#39;,  dataIndex: &#39;id&#39; },
        { header: &#39;姓名&#39;, dataIndex: &#39;name&#39;, flex: 1 },
        { header: &#39;电话&#39;, dataIndex: &#39;phone&#39; }
        ],
        store:store,  
        width:450,  
        height:300,  
        autoExpandColumn:2,  
        renderTo:Ext.getBody()    
    });   
});  
</script>

Copy after login

解释

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

ExtJS API中的解释如下所示

初探ExtJS（2）