15410人阅读
前面几篇博客中都是调用ChartFactory.get***Intent()方法，本节讲的内容调用ChartFactory.get***View()方法，这个方法调用的结果可以嵌入到任何一个Activity中，作为Activity的一部分。
XYChartBuilder.java(源码分析见注释)
package org.achartengine.chartdemo.demo.
import java.io.F
import java.io.FileOutputS
import org.achartengine.ChartF
import org.achartengine.GraphicalV
import org.achartengine.chart.PointS
import org.achartengine.chartdemo.demo.R;
import org.achartengine.model.SeriesS
import org.achartengine.model.XYMultipleSeriesD
import org.achartengine.model.XYS
import org.achartengine.renderer.XYMultipleSeriesR
import org.achartengine.renderer.XYSeriesR
import org.achartengine.tools.PanL
import org.achartengine.tools.ZoomE
import org.achartengine.tools.ZoomL
import android.app.A
import android.graphics.B
import android.pressF
import android.graphics.C
import android.os.B
import android.os.E
import android.view.V
import android.view.ViewGroup.LayoutP
import android.widget.B
import android.widget.EditT
import android.widget.LinearL
import android.widget.T
public class XYChartBuilder extends Activity {
public static final String TYPE = &type&;
private XYMultipleSeriesDataset mDataset = new XYMultipleSeriesDataset();
private XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
private XYSeries mCurrentS
private XYSeriesRenderer mCurrentR
private String mDateF
private Button mNewS
private Button mA
private EditText mX;
private EditText mY;
private GraphicalView mChartV
private int index = 0;
protected void onRestoreInstanceState(Bundle savedState) {
super.onRestoreInstanceState(savedState);
mDataset = (XYMultipleSeriesDataset) savedState.getSerializable(&dataset&);
mRenderer = (XYMultipleSeriesRenderer) savedState.getSerializable(&renderer&);
mCurrentSeries = (XYSeries) savedState.getSerializable(¤t_series&);
mCurrentRenderer = (XYSeriesRenderer) savedState.getSerializable(¤t_renderer&);
mDateFormat = savedState.getString(&date_format&);
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putSerializable(&dataset&, mDataset);
outState.putSerializable(&renderer&, mRenderer);
outState.putSerializable(¤t_series&, mCurrentSeries);
outState.putSerializable(¤t_renderer&, mCurrentRenderer);
outState.putString(&date_format&, mDateFormat);
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.xy_chart);
mX = (EditText) findViewById(R.id.xValue);
mY = (EditText) findViewById(R.id.yValue);
mRenderer.setApplyBackgroundColor(true);//设置是否显示背景色
mRenderer.setBackgroundColor(Color.argb(100, 50, 50, 50));//设置背景色
mRenderer.setAxisTitleTextSize(16); //设置轴标题文字的大小
mRenderer.setChartTitleTextSize(20);//?设置整个图表标题文字大小
mRenderer.setLabelsTextSize(15);//设置刻度显示文字的大小(XY轴都会被设置)
mRenderer.setLegendTextSize(15);//图例文字大小
mRenderer.setMargins(new int[] { 30, 70, 0, 10 });//设置图表的外边框(上/左/下/右)
mRenderer.setZoomButtonsVisible(true);//是否显示放大缩小按钮
mRenderer.setPointSize(10);//设置点的大小(图上显示的点的大小和图例中点的大小都会被设置)
mAdd = (Button) findViewById(R.id.add);
mNewSeries = (Button) findViewById(R.id.new_series);
mNewSeries.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
String seriesTitle = &Series & + (mDataset.getSeriesCount() + 1);//图例
XYSeries series = new XYSeries(seriesTitle);//定义XYSeries
mDataset.addSeries(series);//在XYMultipleSeriesDataset中添加XYSeries
mCurrentSeries =//设置当前需要操作的XYSeries
XYSeriesRenderer renderer = new XYSeriesRenderer();//定义XYSeriesRenderer
mRenderer.addSeriesRenderer(renderer);//将单个XYSeriesRenderer增加到XYMultipleSeriesRenderer
renderer.setPointStyle(PointStyle.CIRCLE);//点的类型是圆形
renderer.setFillPoints(true);//设置点是否实心
mCurrentRenderer =
setSeriesEnabled(true);
//增加一个点后重画图
mAdd.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
double x = 0;
double y = 0;
x = Double.parseDouble(mX.getText().toString());
} catch (NumberFormatException e) {
mX.requestFocus();
y = Double.parseDouble(mY.getText().toString());
} catch (NumberFormatException e) {
mY.requestFocus();
mCurrentSeries.add(x, y);
mX.setText(&&);
mY.setText(&&);
mX.requestFocus();
if (mChartView != null) {
mChartView.repaint();//重画图表
//生成图片保存,注释掉下面的代码不影响图表的生成.
//--&start
Bitmap bitmap = mChartView.toBitmap();
File file = new File(Environment.getExternalStorageDirectory(), &test& + index++ + &.png&);
FileOutputStream output = new FileOutputStream(file);
press(CompressFormat.PNG, 100, output);
} catch (Exception e) {
e.printStackTrace();
protected void onResume() {
super.onResume();
if (mChartView == null) {
LinearLayout layout = (LinearLayout) findViewById(R.id.chart);
mChartView = ChartFactory.getLineChartView(this, mDataset, mRenderer);
mRenderer.setClickEnabled(true);//设置图表是否允许点击
mRenderer.setSelectableBuffer(100);//设置点的缓冲半径值(在某点附件点击时,多大范围内都算点击这个点)
mChartView.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//这段代码处理点击一个点后,获得所点击的点在哪个序列中以及点的坐标.
//--&start
SeriesSelection seriesSelection = mChartView.getCurrentSeriesAndPoint();
double[] xy = mChartView.toRealPoint(0);
if (seriesSelection == null) {
Toast.makeText(XYChartBuilder.this, &No chart element was clicked&, Toast.LENGTH_SHORT)
Toast.makeText(
XYChartBuilder.this,
&Chart element in series index & + seriesSelection.getSeriesIndex()
+ & data point index & + seriesSelection.getPointIndex() + & was clicked&
+ & closest point value X=& + seriesSelection.getXValue() + &, Y=& + seriesSelection.getValue()
+ & clicked point value X=& + (float) xy[0] + &, Y=& + (float) xy[1], Toast.LENGTH_SHORT).show();
mChartView.setOnLongClickListener(new View.OnLongClickListener() {
public boolean onLongClick(View v) {
SeriesSelection seriesSelection = mChartView.getCurrentSeriesAndPoint();
if (seriesSelection == null) {
Toast.makeText(XYChartBuilder.this, &No chart element was long pressed&,
Toast.LENGTH_SHORT);
// no chart element was long pressed, so let something
// else handle the event
Toast.makeText(XYChartBuilder.this, &Chart element in series index &
+ seriesSelection.getSeriesIndex() + & data point index &
+ seriesSelection.getPointIndex() + & was long pressed&, Toast.LENGTH_SHORT);
// the element was long pressed - the event has been
// handled
//这段代码处理放大缩小
//--&start
mChartView.addZoomListener(new ZoomListener() {
public void zoomApplied(ZoomEvent e) {
String type = &out&;
if (e.isZoomIn()) {
type = &in&;
System.out.println(&Zoom & + type + & rate & + e.getZoomRate());
public void zoomReset() {
System.out.println(&Reset&);
}, true, true);
//设置拖动图表时后台打印出图表坐标的最大最小值.
mChartView.addPanListener(new PanListener() {
public void panApplied() {
System.out.println(&New X range=[& + mRenderer.getXAxisMin() + &, & + mRenderer.getXAxisMax()
+ &], Y range=[& + mRenderer.getYAxisMax() + &, & + mRenderer.getYAxisMax() + &]&);
layout.addView(mChartView, new LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT));
boolean enabled = mDataset.getSeriesCount() & 0;
setSeriesEnabled(enabled);
mChartView.repaint();
private void setSeriesEnabled(boolean enabled) {
mX.setEnabled(enabled);
mY.setEnabled(enabled);
mAdd.setEnabled(enabled);
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：487715次
积分：6282
积分：6282
排名：第1108名
原创：59篇
转载：16篇
评论：873条
阅读：125405
(4)(1)(3)(5)(1)(2)(1)(3)(4)(3)(5)(1)(1)(14)(11)(5)(3)(8)achartengine-1.1.0-demo(android绘图开源库demo) - 下载频道
- CSDN.NET
&&&&achartengine-1.1.0-demo(android绘图开源库demo)
achartengine-1.1.0-demo(android绘图开源库demo)
android画各种柱状图，饼图，折线图...功能强大，可以使用
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
您可能还需要
移动开发下载排行20998人阅读
首先看一下示例中类之间的关系:
1.&ChartDemo这个类是整个应用程序的入口,运行之后的效果显示一个list.
2.&IDemoChart接口,这个接口定义了三个方法,
getName()返回值是listitem上显示的标题;
getDesc()返回值是listitem上显示的描述内容.
excute(context)返回值是一个Intent,当点击listitem后跳转到此Intent.
3.&AbstractDemoChart类是一个抽象类,实现接口IDemoChart接口,这个类中封装了构建DataSet和renderer的方法,目的快速构建我们的dataset和renderer.这个类具体提供了哪些方法呢?见下图.至于为什么要进行这样的封装看完4中ChartFactory.get***Intent()方法的参数类型后您就明白了.
AbstractChartDemo.java:&
package org.achartengine.chartdemo.demo.
import java.util.D
import java.util.L
import org.achartengine.chart.PointS
import org.achartengine.model.CategoryS
import org.achartengine.model.MultipleCategoryS
import org.achartengine.model.TimeS
import org.achartengine.model.XYMultipleSeriesD
import org.achartengine.model.XYS
import org.achartengine.renderer.DefaultR
import org.achartengine.renderer.SimpleSeriesR
import org.achartengine.renderer.XYMultipleSeriesR
import org.achartengine.renderer.XYSeriesR
public abstract class AbstractDemoChart implements IDemoChart {
* 构建 XYMultipleSeriesDataset.
* @param titles 每个序列的图例
* @param xValues X轴的坐标
* @param yValues Y轴的坐标
* @return XYMultipleSeriesDataset
protected XYMultipleSeriesDataset buildDataset(String[] titles, List&double[]& xValues,
List&double[]& yValues) {
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
addXYSeries(dataset, titles, xValues, yValues, 0);
//向DataSet中添加序列.
public void addXYSeries(XYMultipleSeriesDataset dataset, String[] titles, List&double[]& xValues,
List&double[]& yValues, int scale) {
int length = titles.
for (int i = 0; i & i++) {
XYSeries series = new XYSeries(titles[i], scale); //这里注意与TimeSeries区别.
double[] xV = xValues.get(i);
double[] yV = yValues.get(i);
int seriesLength = xV.
for (int k = 0; k & seriesL k++) {
series.add(xV[k], yV[k]);
dataset.addSeries(series);
* 构建XYMultipleSeriesRenderer.
* @param colors 每个序列的颜色
* @param styles 每个序列点的类型(可设置三角,圆点,菱形,方块等多种)
* @return XYMultipleSeriesRenderer
protected XYMultipleSeriesRenderer buildRenderer(int[] colors, PointStyle[] styles) {
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
setRenderer(renderer, colors, styles);
protected void setRenderer(XYMultipleSeriesRenderer renderer, int[] colors, PointStyle[] styles) {
//整个图表属性设置
//--&start
renderer.setAxisTitleTextSize(16);//设置轴标题文字的大小
renderer.setChartTitleTextSize(40);//设置整个图表标题文字的大小
renderer.setLabelsTextSize(15);//设置轴刻度文字的大小
renderer.setLegendTextSize(15);//设置图例文字大小
renderer.setPointSize(5f);//设置点的大小(图上显示的点的大小和图例中点的大小都会被设置)
renderer.setMargins(new int[] { 20, 30, 15, 20 });//设置图表的外边框(上/左/下/右)
//以下代码设置没个序列的颜色.
//--&start
int length = colors.
for (int i = 0; i & i++) {
XYSeriesRenderer r = new XYSeriesRenderer();
r.setColor(colors[i]);//设置颜色
r.setPointStyle(styles[i]);
renderer.addSeriesRenderer(r);
* 设置renderer的一些属性.
* @param renderer 要设置的renderer
* @param title 图表标题
* @param xTitle X轴标题
* @param yTitle Y轴标题
* @param xMin X轴最小值
* @param xMax X轴最大值
* @param yMin Y轴最小值
* @param yMax Y轴最大值
* @param axesColor X轴颜色
* @param labelsColor Y轴颜色
protected void setChartSettings(XYMultipleSeriesRenderer renderer, String title, String xTitle,
String yTitle, double xMin, double xMax, double yMin, double yMax, int axesColor,
int labelsColor) {
renderer.setChartTitle(title);
renderer.setXTitle(xTitle);
renderer.setYTitle(yTitle);
renderer.setXAxisMin(xMin);
renderer.setXAxisMax(xMax);
renderer.setYAxisMin(yMin);
renderer.setYAxisMax(yMax);
renderer.setAxesColor(axesColor);
renderer.setLabelsColor(labelsColor);
* 构建和时间有关的XYMultipleSeriesDataset,这个方法与buildDataset在参数上区别是需要List&Date[]&作参数.
* @param titles 序列图例
* @param xValues X轴值
* @param yValues Y轴值
* @return XYMultipleSeriesDataset
protected XYMultipleSeriesDataset buildDateDataset(String[] titles, List&Date[]& xValues,
List&double[]& yValues) {
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
int length = titles.
for (int i = 0; i & i++) {
TimeSeries series = new TimeSeries(titles[i]);//构建时间序列TimeSeries,
Date[] xV = xValues.get(i);
double[] yV = yValues.get(i);
int seriesLength = xV.
for (int k = 0; k & seriesL k++) {
series.add(xV[k], yV[k]);
dataset.addSeries(series);
* 构建单个CategorySeries,可用于生成饼图,注意与buildMultipleCategoryDataset(构建圆环图)相区别.
* @param titles the series titles
* @param values the values
* @return the category series
protected CategorySeries buildCategoryDataset(String title, double[] values) {
CategorySeries series = new CategorySeries(title);
int k = 0;
for (double value : values) {
series.add(&Project & + ++k, value);
* 构建MultipleCategorySeries,可用于构建圆环图(每个环是一个序列)
* @param titles the series titles
* @param values the values
* @return the category series
protected MultipleCategorySeries buildMultipleCategoryDataset(String title,
List&String[]& titles, List&double[]& values) {
MultipleCategorySeries series = new MultipleCategorySeries(title);
int k = 0;
for (double[] value : values) {
series.add(2007 + k + &&, titles.get(k), value);
* 构建DefaultRenderer.
* @param colors 每个序列的颜色
* @return DefaultRenderer
protected DefaultRenderer buildCategoryRenderer(int[] colors) {
DefaultRenderer renderer = new DefaultRenderer();
renderer.setLabelsTextSize(15);
renderer.setLegendTextSize(15);
renderer.setMargins(new int[] { 20, 30, 15, 0 });
for (int color : colors) {
SimpleSeriesRenderer r = new SimpleSeriesRenderer();
r.setColor(color);
renderer.addSeriesRenderer(r);
* 构建XYMultipleSeriesDataset,适用于柱状图.
* @param titles 每中柱子序列的图列
* @param values 柱子的高度值
* @return XYMultipleSeriesDataset
protected XYMultipleSeriesDataset buildBarDataset(String[] titles, List&double[]& values) {
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
int length = titles.
for (int i = 0; i & i++) {
CategorySeries series = new CategorySeries(titles[i]);
double[] v = values.get(i);
int seriesLength = v.
for (int k = 0; k & seriesL k++) {
series.add(v[k]);
dataset.addSeries(series.toXYSeries());
* 构建XYMultipleSeriesRenderer,适用于柱状图.
* @param colors 每个序列的颜色
* @return XYMultipleSeriesRenderer
protected XYMultipleSeriesRenderer buildBarRenderer(int[] colors) {
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
renderer.setAxisTitleTextSize(16);
renderer.setChartTitleTextSize(20);
renderer.setLabelsTextSize(15);
renderer.setLegendTextSize(15);
int length = colors.
for (int i = 0; i & i++) {
SimpleSeriesRenderer r = new SimpleSeriesRenderer();
r.setColor(colors[i]);
renderer.addSeriesRenderer(r);
4.& 其他的以*Chat结尾的类大都继承自AbstractDemoChart这个类实现了接口IDemoChart.我们可以重点看一下execute(context)方法,分析之后发现这个方法中构建Intent的步骤大同小异,第一步构建dataset,第二步构建renderer,第三步调用ChartFactory.get***Intent()方法或ChartFactory.get***View()方法,二者的区别在于一个返回Intent,这个intent可以启动一个特定的activity,另一个返回,对这个可以灵活设置也可以仅作为一部分显示在任何activity上.对于ChartFactory.get***Intent()上的参数activityTitle是指设置显示在activity上的标题.
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,&type)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,&type,
java.lang.String&activityTitle)&
(android.content.Context&context,&dataset,&&renderer,&type)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,
java.lang.String&activityTitle)&
(android.content.Context&context,&dataset,&&renderer)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,
java.lang.String[]&types, java.lang.String&activityTitle)&
(android.content.Context&context,&dataset,&&renderer,
java.lang.String[]&types)&
立方折线图
(android.content.Context&context,&dataset,&&renderer,
float&smoothness)&
立方折线图
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,
float&smoothness)&
立方折线图
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,
float&smoothness, java.lang.String&activityTitle)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,
java.lang.String&activityTitle)&
(android.content.Context&context,&&dataset,&renderer)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,
java.lang.String&activityTitle)&
(android.content.Context&context,&dataset,&&renderer)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,
java.lang.String&activityTitle)&
(android.content.Context&context,&dataset,&&renderer)&
static&android.content.Intent
(android.content.Context&context,&&dataset,&renderer,
java.lang.String&activityTitle)&
(android.content.Context&context,&&dataset,&renderer)&
范围条形图
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,&type,
java.lang.String&activityTitle)&
范围条形图
(android.content.Context&context,&dataset,&&renderer,&type)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,
java.lang.String&activityTitle)&
(android.content.Context&context,&dataset,&&renderer)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,
java.lang.String&format)&
static&android.content.Intent
(android.content.Context&context,&dataset,&&renderer,
java.lang.String&format, java.lang.String&activityTitle)&
(android.content.Context&context,&dataset,&&renderer,
java.lang.String&format)&
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：487716次
积分：6282
积分：6282
排名：第1108名
原创：59篇
转载：16篇
评论：873条
阅读：125405
(4)(1)(3)(5)(1)(2)(1)(3)(4)(3)(5)(1)(1)(14)(11)(5)(3)(8)using Susing System.Collections.Gusing System.Lusing System.Tusing System.Web.Musing Demo.monSnamespace Demo.HIS.MVC.Controllers{
public partial class MainController : BaseController
public ActionResult MasterPage()
return View();
同样在Views文件下的Main文件夹下新建文件MasterPage.aspx，里面包含了整个系统所需的所有JS，就像前面说的这些CSS和JS库只需要在这里加载一次即可，以后的具体功能页都不需要加了。（可以看到加载CSS和JS文件非常多，这是在开发阶段...在交付客户使用的时候可以整理成一个JS然后压缩）：
&%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %&&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml" &&head runat="server"&
&link href="/Scripts/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /&
&link href="/Scripts/ext-ux/css/ux-all.css" rel="stylesheet" type="text/css" /&
&link href="/Content/Site.css" rel="stylesheet" type="text/css" /&
&link href="/Content/IconCls.css" rel="stylesheet" type="text/css" /&
&link href="/Scripts/ext-ux/SuperBoxSelect/superboxselect.css" rel="stylesheet" type="text/css" /&
&link href="/Scripts/ext-ux/TreeGrid/TreeGrid.css" rel="stylesheet" type="text/css" /&
&link href="/Scripts/ext-ux/GridSummary/GridSummary.css" rel="stylesheet" type="text/css" /&
&script src="/Scripts/ext/adapter/ext/ext-base.js" type="text/javascript"&&/script&
&script src="/Scripts/ext/ext-all.js" type="text/javascript"&&/script&
&script src="/Scripts/ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"&&/script&
&script src="/Scripts/RemoteValidator.js" type="text/javascript"&&/script&
&script src="/Scripts/ext-ux/ux-all.js" type="text/javascript"&&/script&
&script src="/Scripts/RowEditorOverride.js" type="text/javascript"&&/script&
&script src="/Scripts/FilterOverride.js" type="text/javascript"&&/script&
&script src="/Scripts/Ext.data.StoreOverride.js" type="text/javascript"&&/script&
&script src="/Scripts/ComboBoxOverride.js" type="text/javascript"&&/script&
&script src="/Scripts/ext-ux/SuperBoxSelect/SuperBoxSelect.js" type="text/javascript"&&/script&
&script src="/Scripts/ext-ux/TreeGrid/TreeGrid.js" type="text/javascript"&&/script&
&script src="/Scripts/ext-ux/GridSummary/GridSummary.js" type="text/javascript"&&/script&
&script src="/Scripts/Ext.form.Action.LoadOverride.js" type="text/javascript"&&/script&
&script src="/Scripts/JsHelper.js" type="text/javascript"&&/script&
&script src="/Scripts/CustomExt.js" type="text/javascript"&&/script&
&script src="/Scripts/DomainControlers.js" type="text/javascript"&&/script&
&script src="/Scripts/Main/MasterPage.aspx.js" type="text/javascript"&&/script&
&title&代码如尿崩MIS&/title&&/head&&body&
&div&&/div&&/body&&/html&
接下来是最主要的MasterPage.aspx.js文件：
Ext.BLANK_IMAGE_URL = '../Scripts/ext/resources/images/default/s.gif';Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'title';var ALL_PAGESIZE_SETTING = 15;//这里设置系统分页数的全局变量function Main_MasterPage() {
// 居顶工具栏
var topBar = new Ext.Toolbar({
region : 'north',
border : false,
split : true,
height : 26,
minSize : 26,
maxSize : 26,
items : [{
xtype : 'tbbutton',
text : "代码如尿崩MIS",
cls : 'x-btn-text-icon',
icon : '/Content/icons/house.png',
disabled : true,
disabledClass : ''
xtype : 'tbbutton',
text : "心脏外科",
cls : 'x-btn-text-icon',
icon : '/Content/icons/layers.png',
disabled : true,
disabledClass : ''
xtype : 'tbbutton',
text : "王二麻",
cls : 'x-btn-text-icon',
icon : '/Content/icons/user.png',
disabled : true,
disabledClass : ''
}, "-&", "-", {
xtype : "tbbutton",
minWidth : 80,
text : "刷新当前页",
cls : "x-btn-text-icon",
icon : "/Content/icons/arrow_refresh.png",
handler : function(btn, e) {
var tab = tabMain.getActiveTab();
tab.removeAll(true);
tab.getUpdater().refresh();
xtype : "tbbutton",
minWidth : 80,
text : "全部关闭",
cls : "x-btn-text-icon",
icon : "/Content/icons/stop.png",
handler : function(btn, e) {
tabMain.items.each(function(item) {
if (item.closable) {
tabMain.remove(item, true);
xtype : "tbbutton",
minWidth : 80,
text : "设置为常用页",
cls : "x-btn-text-icon",
icon : "/Content/icons/asterisk_yellow.png",
handler : function(btn, e) {
xtype : "tbbutton",
minWidth : 80,
text : "修改密码",
cls : "x-btn-text-icon",
icon : "/Content/icons/key.png",
handler : function(btn, e) {
xtype : "tbbutton",
minWidth : 80,
text : "帮助",
cls : "x-btn-text-icon",
icon : "/Content/icons/lightbulb.png",
handler : function(btn, e) {
xtype : "tbbutton",
minWidth : 80,
text : "注销",
cls : "x-btn-text-icon",
icon : "/Content/icons/lock_go.png",
handler : function(btn, e) {
xtype : "tbbutton",
minWidth : 80,
text : "退出",
cls : "x-btn-text-icon",
icon : "/Content/icons/door_out.png",
handler : function(btn, e) {
// 左边的菜单
var menu = new Ext.tree.TreePanel({
title : '功能菜单',
region : "west",
autoScroll : true,
enableTabScroll : true,
collapsible : true,
collapsed : true,
iconCls : 'plugin',
split : true,
rootVisible : false,
lines : false,
width : 220,
minSize : 220,
maxSize : 220,
root : new Ext.tree.AsyncTreeNode({
id : '0',// 注意这个0是约定
level : '0',
expanded : true,
text : '菜单',
leaf : false
// 主显示区
var tabMain = new Ext.TabPanel({
id : "Main_MasterPage_TabMain",
region : "center",
autoScroll : true,
enableTabScroll : true,
activeTab : 0,
onTitleDbClick : function(e, target, o) {
var t = this.findTargets(e);
if (t.item && t.item.closable) {
if (t.item.fireEvent('beforeclose', t.item) !== false) {
t.item.fireEvent('close', t.item);
this.remove(t.item);
items : [new Ext.Panel({
id : 'tab-0001',
title : '首页',
autoScroll : true,
layout : 'fit',
border : false,
iconCls : 'house',
autoLoad : {
url : '/Main/Index',
scope : this,
scripts : true,
text : '页面加载中,请稍候....'
// 居底工具栏
var footBar = new Ext.ux.StatusBar({
region : "south",
items : ["-&", "弦哥版权所有"]
// 创建框架
new Ext.Viewport({
id : "Main_MasterPage_ViewPort",
layout : 'border',
items : [tabMain, topBar, footBar, menu]
});}Ext.onReady(function() {
Main_MasterPage();
上面的代码基本就是个框架布局没啥好说的，唯一需要注意的是下面的代码 比如我们要在tab里加一个叫&首页&的子页面（因为没有菜单，所以暂时把tab里的子页写死）：
new Ext.Panel({
id : 'tab-0001',
title : '首页',
autoScroll : true,
layout : 'fit',
border : false,
iconCls : 'house',
autoLoad : {
url : '/Main/Index',
scope : this,
scripts : true,
text : '页面加载中,请稍候....'
注意autoLoad属性，这样实现了在单页中动态渲染了需要加载的子页面，url：'/Main/Index'就是要请求子页面的URL。
下面我们简单实现一下/Main/Index这个子页：
新建Index.cs文件
using Susing System.Collections.Gusing System.Lusing System.Tusing System.Web.Musing Demo.monSnamespace Demo.HIS.MVC.Controllers{
public partial class MainController : BaseController
public ActionResult Index()
return View();
新建文件Index.aspx，虽然我们将在这个子页实现一些EXTJS的功能，但是这里除了引用Index.aspx.js这个本页对应的js外，无需引用其他任何CSS和JS库
&%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %&&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml" &&head runat="server"&
&title&Index&/title&
&script src="/Scripts/Main/Index.aspx.js" type="text/javascript"&&/script&&/head&&body&
&/div&&/body&&/html&
最后是Index.aspx.js的代码，简单实现一个EXT按钮和提示框来验证我们的load加载方式：
function Main_Index() {
var btn = new Ext.Button({
text : '我是一个Ext按钮',
handler : function() {
Ext.MessageBox.alert('提示框', '代码如尿崩，谁与我争疯！');
var panel = new Ext.Panel({
title : '一个panel',
items : [btn]
JsHelper.ExtTabDoLayout(panel);// 注意这里把panel组件加到当前的tabpanel里}Main_Index();// 执行方法
最后效果如下：
这两篇关于EXT的内容都比较简单，没有涉及到EXTJS与后台Asp.net MVC的交互，下篇准备开始正经介绍EXTJS与后台的各种复杂交互，这里向大家征求一下意见，后面的篇章我想有两种方式去写：
第一种:先把MIS中的EXT结合后台的每个典型UI场景（如：下拉框绑定，表格绑定，表单提交等...）独立的系统的讲
第二种：直接按业务应用功能场景实现(如：字典管理，用户管理，角色管理，菜单管理...等，计划是完整的实现整个权限管理)去讲，这样虽然也会涉及到所有的典型UI场景，但各种UI场景设计交织在一起，比较复杂，我也不可能讲的太细，怕大家看不明白...
希望大家留言。
