javascript
ExtJS图表
視頻課：https://edu.csdn.net/course/play/7621
1.1?學習技能點
本次在線學習將學習以下知識技能：
??柱狀圖
??餅狀圖
??折線圖
1.2?學習任務
ExtJS3使用的Flash Chart來源于YUI，其中包括柱狀圖、餅狀圖等多種圖表，這些圖表可以與ExtJS組件完美整合，不僅可以在Panel中顯示圖表，還可以通過Store為圖表提供數據。
1.2.1?任務1：使用柱狀圖統計每月的訪問人數
需求說明
首先定義一個JsonStroe為我們要實現的圖表提供數據，代碼如下：
var store = new Ext.data.JsonStore({
????????fields:['name', 'visits', 'views'],
????????data: [
????????????{name:'Jul 07', visits: 245000, views: 3000000},
????????????{name:'Aug 07', visits: 240000, views: 3500000},
????????????{name:'Sep 07', visits: 355000, views: 4000000},
????????????{name:'Oct 07', visits: 375000, views: 4200000},
????????????{name:'Nov 07', visits: 490000, views: 4500000},
????????????{name:'Dec 07', visits: 495000, views: 5800000},
????????????{name:'Jan 08', visits: 520000, views: 6000000},
????????????{name:'Feb 08', visits: 620000, views: 7500000}
????????]
?});
JsonStroe中包含3列數據，分別是name、visits和views，分別表示日期、訪問人數、瀏覽量，本章各個任務都使用此數據。
大家已經學習了可以使用grid顯示這些數據，但是不利于分析，也很難看出數據的變化，下面就使用柱狀圖統計每個月的訪問人數，效果如圖6.1.1所示。
?
圖6.1.1 柱狀圖
實現步驟
//此行代碼必須，指定圖表swf文件路徑
Ext.chart.Chart.CHART_URL = 'extjs/resources/charts.swf';
Ext.onReady(function(){
???var store = new Ext.data.JsonStore({
????????fields:['name', 'visits', 'views'],
????????data: [
????????????{name:'Jul 07', visits: 245000, views: 3000000},
????????????{name:'Aug 07', visits: 240000, views: 3500000},
????????????{name:'Sep 07', visits: 355000, views: 4000000},
????????????{name:'Oct 07', visits: 375000, views: 4200000},
????????????{name:'Nov 07', visits: 490000, views: 4500000},
????????????{name:'Dec 07', visits: 495000, views: 5800000},
????????????{name:'Jan 08', visits: 520000, views: 6000000},
????????????{name:'Feb 08', visits: 620000, views: 7500000}
????????]
????});
????new Ext.Panel({
????????title: 'Chart',
????????renderTo: 'chart',
????????width:500,
????????height:300,
????????frame:true,
????????layout:'fit',
????????items: {
????????????xtype: 'columnchart',//指定是柱狀圖
????????????store: store,//指定數據
????????????xField: 'name',//X坐標數據來源
????????????yField: 'visits'//Y坐標數據來源
????????}
????});
});
注意：包含圖表的頁面必須部署到服務器中進行訪問，否則無法顯示圖表。
1.2.2?任務2：使用折線圖統計每月的訪問人數
需求說明
使用折線圖統計每月的訪問人數，效果如圖6.1.2所示。
?
圖6.1.2 折線圖
1.2.3?任務3：使用餅狀圖統計每月的訪問人數
需求說明
使用餅狀圖統計每月的訪問人數，效果如圖6.1.3所示。
?
圖6.1.3 餅狀圖
1.3?參考資料
本章節學習資料來源于：
http://www.sencha.com/
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
第2章?復習指導
2.1?知識總結
2.1.1?階段核心技能目標
本課程要掌握如下技能和知識：
??掌握XML文檔和解析
??熟練應用ExtJS常用組件
??熟練應用ExtJS常用布局
??掌握ExtJS工具欄和菜單
??掌握ExtJS圖表
2.1.2?知識體系總結
本課程所學知識如圖6.1.1所示，從圖中可以總結使用ExtJS開發常用知識。
?
圖7.1.1 使用ExtJS開發RIA應用知識
?
2.2?綜合實訓
2.2.1?任務描述
本次綜合實訓任務是使用ExtJS作為前端RIA框架，后臺技術使用SSH實現一個學生管理系統。系統首頁如圖7.1.2所示。
?
圖7.1.2 學生管理系統首頁
點擊添加工具按鈕，出現添加學生界面，效果如圖7.1.3所示。
?
圖7.1.3 添加學生信息界面
選中Grid中的一行數據后，點擊修改工具按鈕出現學生信息修改，效果界面如圖7.1.4所示。
?
圖7.1.4 學生信息修改界面
雙擊Grid中的一行數據，將使用RowEditor進行編輯學生信息，效果如圖7.1.5所示。
?
圖7.1.5 使用RowEditor編輯學生信息
修改學生信息，點擊更新按鈕后完成學生信息修改，效果如圖7.1.6所示。
?
圖7.1.6 使用RowEditor修改學生信息成功
2.2.2?系統功能
本系統包括以下功能：
??使用Grid本頁顯示學生信息
??添加學生信息
??修改學生信息
??刪除學生信息
??使用行編輯器編輯學生信息
2.2.3?開發要求
ExtJS3、Struts2、Hibernate3、Spring2.5、JSONLib
2.2.4?實現步驟
1.?新建Web項目并添加SSH框架支持
2.?編寫Hibernate實體類和映射文件
實體類代碼如下所示：
package com.yccn.student.entity;
public class Student {
private int id;
private String code;
private String name;
private int sex;
private int age;
private String political;
private String origin;
//省略getter和setter
}
3.?編寫DAO層接口和實現
DAO接口代碼代碼如下所示：
package com.yccn.student.dao;
public interface StudentDAO {
Serializable save(Student st);
Student getById(int id);
void deleteById(int id);
List<Student> queryByPage(int start,int limit);
Object merge(Student st);
Long getCount();
}
DAO實現類代碼如下所示：
package com.yccn.student.dao.impl;
import java.io.Serializable;
import java.util.List;
import org.hibernate.Session;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;
import com.yccn.student.dao.StudentDAO;
import com.yccn.student.entity.Student;
?
public class StudentDAOImpl extends HibernateDaoSupport implements StudentDAO {
@SuppressWarnings("unchecked")
@Override
public List<Student> queryByPage(int start, int limit) {
Session session = getSession(false);
List<Student> students = session.createQuery(
"from Student s order by s.code").setFirstResult(start)
.setMaxResults(limit).list();
return students;
}
?
@Override
public Serializable save(Student st) {
return getHibernateTemplate().save(st);
}
?
@Override
public Student getById(int id) {
return (Student) getHibernateTemplate().get(Student.class, id);
}
?
@Override
public void deleteById(int id) {
getHibernateTemplate().delete(getById(id));
}
?
@Override
public Object merge(Student st) {
return getHibernateTemplate().merge(st);
}
?
@Override
public Long getCount() {
return (Long) getHibernateTemplate().find(
"select count(id) from Student").get(0);
}
?
}
4.?編寫業務邏輯層接口和實現類
業務邏輯層接口代碼參考如下：
package com.yccn.student.service;
import java.io.Serializable;
import java.util.List;
import com.yccn.student.entity.Student;
public interface StudentService {
List<Student> listStudentsByPage(int start, int limit);
Serializable doAdd(Student st);
Object doEdit(Student st);
void doDelete(int id);
Long getCount();
}
?
業務邏輯層實現類代碼參考如下：
package com.yccn.student.service.impl;
?
import java.io.Serializable;
import java.util.List;
import com.yccn.student.dao.StudentDAO;
import com.yccn.student.entity.Student;
import com.yccn.student.service.StudentService;
public class StudentServiceImpl implements StudentService {
private StudentDAO studentDAO;
public void setStudentDAO(StudentDAO studentDAO) {
this.studentDAO = studentDAO;
}
public List<Student> listStudentsByPage(int start,int limit){
return studentDAO.queryByPage(start, limit);
}
?
@Override
public Serializable doAdd(Student st) {
return studentDAO.save(st);
}
?
@Override
public Object doEdit(Student st) {
return studentDAO.merge(st);
}
?
@Override
public void doDelete(int id) {
studentDAO.deleteById(id);
}
?
@Override
public Long getCount() {
return studentDAO.getCount();
}
}
5.?編寫Action類
Action類代碼參考如下：
package com.yccn.student.action;
?
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ModelDriven;
import com.yccn.student.entity.Student;
import com.yccn.student.service.StudentService;
?
public class StudentAction implements ModelDriven<Student> {
private Student student = new Student();
private StudentService studentService;
private int start;
private int limit;
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
public void setStudentService(StudentService studentService) {
this.studentService = studentService;
}
@Override
public Student getModel() {
return student;
}
//分頁查詢學生信息
public String listStudents() throws Exception {
List<Student> students = studentService.listStudentsByPage(start, limit);
Map<String,Object> data = new HashMap<String,Object>();
data.put("totalCount", studentService.getCount());
data.put("result", students);
this.outPrint(this.toJSONString(data));
return null;
}
//添加學生信息
public String add() throws Exception {
studentService.doAdd(student);
outPrint("{success:true,msg:'添加學生信息成功'}");
return null;
}
//修改學生信息
public String edit() throws Exception {
studentService.doEdit(student);
System.out.println(student);
outPrint("{success:true,msg:'修改學生信息成功'}");
return null;
}
//刪除學生信息
public String delete() throws Exception {
studentService.doDelete(student.getId());
System.out.println(student.getId());
outPrint("{success:true,msg:'刪除學生信息成功'}");
return null;
}
private String toJSONString(Object o){
return JSONObject.fromObject(o).toString();
}
private void outPrint(String s) throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf8");
PrintWriter out = response.getWriter();
out.print(s);
}
}
6.?框架配置
最終各個配置文件如下所示：
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext_*.xml</param-value>
</context-param>
<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>/*</url-pattern>
</filter-mapping>
</web-app>
Hibernate配置文件：
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE hibernate-configuration PUBLIC
??????????"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
??????????"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>
<property name="dialect">
org.hibernate.dialect.MySQLDialect
</property>
<property name="connection.url">jdbc:mysql:///test</property>
<property name="connection.username">root</property>
<property name="connection.password">admin</property>
<property name="connection.driver_class">
com.mysql.jdbc.Driver
</property>
<property name="hibernate.show_sql">true</property>
<property name="hibernate.hbm2ddl.auto">update</property>
<mapping resource="com/yccn/student/entity/Student.hbm.xml" />
</session-factory>
</hibernate-configuration>
Spring配置使用多配置文件的方式，其中applicationContext_common.xml代碼如下：
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="
???????http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
???????http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.5.xsd
???????http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd">
?
<bean id="sessionFactory"
class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
<property name="configLocation" value="classpath:hibernate.cfg.xml">
</property>
</bean>
<bean id="myTxManager"
class="org.springframework.orm.hibernate3.HibernateTransactionManager">
<property name="sessionFactory" ref="sessionFactory" />
</bean>
?
<aop:config>
<aop:pointcut id="serviceMethods"
expression="execution(* com.yccn.student.service.impl.*.*(..))" />
<aop:advisor advice-ref="txAdvice" pointcut-ref="serviceMethods" />
</aop:config>
?
<tx:advice id="txAdvice" transaction-manager="myTxManager">
<tx:attributes>
<tx:method name="do*" />
<tx:method name="*" propagation="SUPPORTS" read-only="true" />
</tx:attributes>
</tx:advice>
</beans>
applicationContext_student.xml代碼如下
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="
???????http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
???????http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.5.xsd
???????http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd">
?
<bean name="studentDAO" class="com.yccn.student.dao.impl.StudentDAOImpl">
<property name="sessionFactory" ref="sessionFactory"></property>
</bean>
<bean name="studentService" class="com.yccn.student.service.impl.StudentServiceImpl">
<property name="studentDAO" ref="studentDAO"></property>
</bean>
<bean name="studentAction" class="com.yccn.student.action.StudentAction" scope="prototype">
<property name="studentService" ref="studentService"></property>
</bean>
</beans>
7.?編寫前端界面
前端使用ExtJS實現，參考代碼如下所示。
Ext.onReady(function() {
Ext.QuickTips.init();
????var sexRenderer = function(value) {
????????if (value == 1) {
????????????return '<span style="color:red;font-weight:bold;">男</span>';
????????} else if (value == 2) {
????????????return '<span style="color:green;font-weight:bold;">女</span>';
????????}
????};
?var editor = new Ext.ux.grid.RowEditor({
????????saveText: '更新',
????????cancelText:'取消'
????????
});
editor.on("afteredit",function(roweditor, changes, record, rowIndex){
Ext.Ajax.request({
????????url: 'student_edit.action',
????????success: function(response) {
???????? record.commit();
????????????var json = Ext.decode(response.responseText);
????????????if (json.success) {
????????????????Ext.example.msg('操作提示',json.msg);
????????????}
????????},
????????failure: function() {
????????????Ext.Msg.alert('錯誤', "刪除失敗");
????????},
????????params: record.data
});
});
?
????var StudentRecord = Ext.data.Record.create([
????????{name: 'id', type: 'int'},
????????{name: 'code', type: 'string'},
????????{name: 'name', type: 'string'},
????????{name: 'sex', type: 'int'},
????????{name: 'age', type: 'int'},
????????{name: 'political', type: 'string'},
????????{name: 'origin', type: 'string'},
????????{name: 'professional', type: 'string'}
????]);
?
????var store = new Ext.data.Store({
????????proxy: new Ext.data.HttpProxy({url: 'student_listStudents.action'}),
????????reader: new Ext.data.JsonReader({
????????????totalProperty: 'totalCount',
????????????root: 'result'
????????},StudentRecord),
????????remoteSort: true
????});
????store.load({params:{start:0,limit:10}});
var sexCombo = new Ext.form.ComboBox({
fieldLabel: '性別',
name: 'sexText',
????????hiddenName: 'sex',
triggerAction: 'all',
mode: 'local',
valueField: 'value',
displayField: 'text',
store: new Ext.data.SimpleStore({
????fields: ['value','text'],
????data: [['1','男'],['2','女']]
})
});
var politicalCombo = new Ext.form.ComboBox({
name: 'political',
store: new Ext.data.SimpleStore({
????????????????fields: ['text'],
????????????????data: [['群眾'],['黨員'],['團員']]
????????????}),
????????emptyText: '請選擇',
????????mode: 'local',
????????triggerAction: 'all',
????????valueField: 'text',
????????displayField: 'text',
????????fieldLabel: '政治面貌'
});
????var columns = new Ext.grid.ColumnModel([{
header : '學號',
dataIndex : 'code',
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
header : '姓名',
dataIndex : 'name',
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
header : '性別',
dataIndex : 'sex',
renderer : sexRenderer,
editor:{
xtype:'combo',
triggerAction: 'all',
mode: 'local',
valueField: 'value',
displayField: 'text',
store: new Ext.data.SimpleStore({
????fields: ['value','text'],
????data: [['1','男'],['2','女']]
})
}
}, {
header : '年齡',
dataIndex : 'age',
editor : {
xtype : 'numberfield',
allowBlank : false
}
}, {
header : '政治面貌',
dataIndex : 'political',
editor:{
xtype: 'combo',
store: new Ext.data.SimpleStore({
????????????????fields: ['text'],
????????????????data: [['群眾'],['黨員'],['團員']]
????????????}),
????????emptyText: '請選擇',
????????mode: 'local',
????????triggerAction: 'all',
????????valueField: 'text',
????????displayField: 'text'
}
}, {
header : '籍貫',
dataIndex : 'origin',
editor : {
xtype : 'textfield',
allowBlank : false
}
}]);
????columns.defaultSortable = true;
?
????// grid start
????var grid = new Ext.grid.GridPanel({
????????title: '學生信息列表',
????????region: 'center',
????????loadMask: true,
????????stripeRows:true,
????????plugins: [editor],
????????store: store,
????????cm: columns,
????????sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
????????viewConfig: {
????????????forceFit: true
????????},
????????bbar: new Ext.PagingToolbar({
????????????pageSize: 10,
????????????store: store,
????????????displayInfo: true,
????????????plugins: new Ext.ux.ProgressBarPager()
????????}),
????????tbar:[{
???????? text:'添加',
???????? icon:'icon/add.gif',
???????? handler:function(){
???????? form.getForm().reset();
???????? window.show();
???????? }
????????},'-',{
???????? text:'修改',
???????? icon:'icon/edit.png',
???????? handler:function(){
???????? var record = grid.getSelectionModel().getSelected();
???????? if(!record){
???????? Ext.Msg.alert("提示","請選擇要操作的記錄行");
???????? } else {
???????? form.getForm().loadRecord(record);
???????? window.show();
???????? }
???????? }
????????},'-',{
???????? text:'刪除',
???????? icon:'icon/delete.gif',
???????? handler: function() {
????????????????var record = grid.getSelectionModel().getSelected();
????????????????if (!record) {
????????????????????Ext.Msg.alert('提示', '請選擇需要刪除的信息。');
????????????????} else {
???????????????? Ext.Msg.confirm("提示","刪除后將無法恢復，確定要刪除記錄嗎？",
???????????????? function(btn){
???????????????? if(btn == "yes"){
???????????????? Ext.Ajax.request({
????????????????????????url: 'student_delete.action',
????????????????????????success: function(response) {
??????????????????????????var json = Ext.decode(response.responseText);
??????????????????????????if (json.success) {
????????????????????????????Ext.Msg.alert('消息', json.msg, function() {
????????????????????????????????????grid.getStore().reload();
????????????????????????????????????form.getForm().reset();
????????????????????????????????});
????????????????????????????}
????????????????????????},
????????????????????????failure: function() {
????????????????????????????Ext.Msg.alert('錯誤', "刪除失敗");
????????????????????????},
????????????????????????params: "id=" + record.data.id
????????????????????});
???????????????? }
???????????????? })
????????????????}
????????????}
????????},'-',{
???????? xtype:'textfield',
???????? width:250
????????},'-',{
???????? text:'搜索',
???????? icon:'icon/query.png'
????????}]
????});
????/*grid.on("rowdblclick",function(g,i){
???? var rc = grid.getStore().getAt(i);
???? ?form.getForm().reset();
????????form.getForm().loadRecord(rc);
????????window.show();
????});*/
????// grid end
?
????// form start
????var form = new Ext.form.FormPanel({
????????frame: true,
????????width: 300,
????????autoHeight: true,
????????labelAlign: 'right',
????????labelWidth: 60,
????????defaultType: 'textfield',
????????buttonAlign:'center',
????????defaults: {
????????????width: 200,
????????????allowBlank: false
????????},
????????items: [{
????????????xtype: 'hidden',
????????????name: 'id'
????????},{
????????????fieldLabel: '學號',
????????????name: 'code'
????????},{
????????????fieldLabel: '姓名',
????????????name: 'name'
????????},{
????????????fieldLabel: '年齡',
????????????name: 'age',
????????????xtype: 'numberfield',
????????????allowNegative: false
????????},sexCombo,politicalCombo,{
????????????fieldLabel: '籍貫',
????????????name: 'origin'
????????}],
????????buttons: [{
????????????text: '提交',
????????????handler: function() {
????????????????if (!form.getForm().isValid()) {
????????????????????return;
????????????????}
????????????????var v = form.getForm().findField("id").getValue();
????????????????//alert(v);
????????????????if(v == ""){
???????????????? ?// 添加
???????????????form.getForm().submit({
????????????????????url: 'student_add.action',
????????????????????success: function(f, action) {
????????????????????????if (action.result.success) {
????????????????????????window.hide();
??????????????????????????Ext.Msg.alert('消息', action.result.msg, function() {
????????????????????????????????grid.getStore().reload();
????????????????????????????????form.getForm().reset();
????????????????????????????});
????????????????????????}
????????????????????},
????????????????????failure: function() {
????????????????????????Ext.Msg.alert('錯誤', "添加失敗");
????????????????????}
???????????????});
????????????????} else {
???????????????? //修改
???????????????? form.getForm().submit({
????????????????????url: 'student_edit.action',
????????????????????success: function(f, action) {
?????????????????????if (action.result.success) {
???????????????????????window.hide();
???????????????????????Ext.Msg.alert('消息', action.result.msg, function() {
????????????????????????????????grid.getStore().reload();
????????????????????????????????form.getForm().reset();
????????????????????????????});
??????????????????????}
????????????????????},
????????????????????failure: function() {
????????????????????????Ext.Msg.alert('錯誤', "添加失敗");
????????????????????}
???????????????});
????????????????}
???????????????
????????????}
????????},{
????????????text: '重置',
????????????handler: function() {
????????????????form.getForm().reset();
????????????}
????????}]
????});
????// form end
var window = new Ext.Window({
title:'編輯學生信息',
closable:true,
width:312,
closeAction:'hide',
modal:true,
items:form
});
?
????// layout start
????var viewport = new Ext.Viewport({
????????layout: 'border',
????????items: [grid]
????});
????// layout end
});
?
?
?
?
?
?
?
?
總結
- 上一篇： 工具栏和菜单
- 下一篇： Spring整合mybatis 1 查询