博客园_luluping

IIS Server Application Unavailable 解决方法

2012-02-07T15:17:00Z

新服务器发布网站时，遇到如下情况：

只有HTML能正常访问，其他诸如WebService,WCF等都不能访问，显示：Server Application Unavailable 的错误。

进入“事件查看器”，写明：没有权限访问System.Web。

但是我已经将Windows的文件夹的权限的用户设为了与访问该网站的用户的权限一致。

另外网上所传的新建应用程序池也不行。

最后，我的解决办法是：应用程序池的属性-》标识-》预定义账户-》改为“本地系统”，遇到安全提示不用去理他。

本文链接

WPF实现MDI窗体的方法

2012-02-01T13:43:00Z

第一:新建一个类（Class）

Win32Native.cs

代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace WpfApplication1
{
    public class Win32Native
    {
        [System.Runtime.InteropServices.DllImport("user32.dll", EntryPoint = "SetParent")]
        public extern static IntPtr SetParent(IntPtr childPtr, IntPtr parentPtr);
    }
}

第二:新建两个窗体:

Window1.xaml

Window2.xaml

第三:Window1.xaml.cs中添加引用

using System.Windows.Interop;

第四:在Window1窗体中放上一个Button1

其事件如下:

private void button1_Click(object sender, RoutedEventArgs e)
{
Window2 w2 = new Window2();
w2.Show();

WindowInteropHelper parentHelper = new WindowInteropHelper(this);
WindowInteropHelper childHelper = new WindowInteropHelper(w2);

Win32Native.SetParent(childHelper.Handle, parentHelper.Handle);

testMdiWindow.WindowState = WindowState.Maximized;//加上这句可实现窗口加载时最大化，注意语句位置
}

WinForms实现方法较简单一些，

private void button1_Click(object sender, RoutedEventArgs e)
{
    Window2 w2 = new Window2();
    w2.MdiParent = this;
    w2.Show();

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/dotkit/archive/2009/11/11/4799055.aspx

本文链接

如何用C#动态编译、执行代码

2011-12-06T01:51:00Z

在开始之前，先熟悉几个类及部分属性、方法：CSharpCodeProvider、ICodeCompiler、CompilerParameters、CompilerResults、Assembly。

　　一、CSharpCodeProvider
　　　　提供对C#代码生成器和代码编译器的实例的访问。如果要动态生成VB代码，可以使用VBCodeProvider。

　　　　CreateCompiler()：获取编译器的实例。

　　二、ICodeCompiler
　　　　定义用于调用源代码编译的接口或使用指定编译器的CodeDOM树。每种编译方法都接受指示编译器的CompilerParameters对象，并返回指示编译结果的CompilerResults对象。

　　　　CompilerAssemblyFromSource(CompilerParameters option, string source)：使用指定的编译器，从包含源代码的字符串设置编译程序集。

　　三、CompilerParameters
　　　　表示用于调用编译器的参数。

　　　　ReferencedAssemblies：获取当前项目所引用的程序集。Add方法为程序集添加引用。
　　　　GenerateExecutable：获取或设置一个值，该值指示是否生成可执行文件。若此属性为false，则生成DLL，默认是false。
　　　　GenerateInMemory：获取或设置一个值，该值指示是否在内存中生成输出。

　　四、CompilerResults
　　　　表示从编译器返回的编译结果。

　　　　CompiledAssembly：获取或设置以编译的程序集，Assembly类型。

　　五、Assembly
　　　　就是程序集了（不知道如何描述了）。

　　大致了解了以上知识之后，就可以使用C#动态的编译并执行代码了，一下是一段示例程序：

using System;
using System.Reflection;
using System.Globalization;
using Microsoft.CSharp;
using System.CodeDom;
using System.CodeDom.Compiler;
using System.Text;

namespace ConsoleApplication1
{
    publicclass Program
      {
        staticvoid Main(string[] args)
          {
            // 1.CSharpCodePrivoder
              CSharpCodeProvider objCSharpCodePrivoder =new CSharpCodeProvider();

            // 2.ICodeComplier
              ICodeCompiler objICodeCompiler = objCSharpCodePrivoder.CreateCompiler();

            // 3.CompilerParameters
              CompilerParameters objCompilerParameters =new CompilerParameters();
              objCompilerParameters.ReferencedAssemblies.Add("System.dll");
              objCompilerParameters.GenerateExecutable =false;
              objCompilerParameters.GenerateInMemory =true;

            // 4.CompilerResults
              CompilerResults cr = objICodeCompiler.CompileAssemblyFromSource(objCompilerParameters, GenerateCode());

            if (cr.Errors.HasErrors)
              {
                  Console.WriteLine("编译错误：");
                foreach (CompilerError err in cr.Errors)
                  {
                      Console.WriteLine(err.ErrorText);
                  }
              }
            else
              {
                // 通过反射，调用HelloWorld的实例
                  Assembly objAssembly = cr.CompiledAssembly;
                object objHelloWorld = objAssembly.CreateInstance("DynamicCodeGenerate.HelloWorld");
                  MethodInfo objMI = objHelloWorld.GetType().GetMethod("OutPut");

                  Console.WriteLine(objMI.Invoke(objHelloWorld, null));
              }

              Console.ReadLine();
          }

        staticstring GenerateCode()
          {
              StringBuilder sb =new StringBuilder();
              sb.Append("using System;");
              sb.Append(Environment.NewLine);
              sb.Append("namespace DynamicCodeGenerate");
              sb.Append(Environment.NewLine);
              sb.Append("{");
              sb.Append(Environment.NewLine);
              sb.Append("      public class HelloWorld");
              sb.Append(Environment.NewLine);
              sb.Append("      {");
              sb.Append(Environment.NewLine);
              sb.Append("          public string OutPut()");
              sb.Append(Environment.NewLine);
              sb.Append("          {");
              sb.Append(Environment.NewLine);
              sb.Append("               return \"Hello world!\";");
              sb.Append(Environment.NewLine);
              sb.Append("          }");
              sb.Append(Environment.NewLine);
              sb.Append("      }");
              sb.Append(Environment.NewLine);
              sb.Append("}");

            string code = sb.ToString();
              Console.WriteLine(code);
              Console.WriteLine();

            return code;
          }
      }
}

本文链接

ExtJS 4应用架构设计

2011-11-24T12:44:00Z

应用的可扩展性、可维护性和灵活性取决于应用架构的质量。不幸的是，这往往被视为马后炮。概念设计和原型变成了大规模的应用，许多应用的基础基本就是示例代码的复制与粘贴，这很诱人，因为这可以让你在项目在开始阶段有一个快速的进度。然而，节省下来的时间相对于项目后期的维护、扩展甚至重构应用的时间来说，算不得什么。比较好的的方式是写一个可靠的架构，在实施前编写好遵循的约定和定义应用的视图、模型、存储和控制器等。在这篇文章，我们将会看到一个受欢迎的应用并讨论如何构建用户接口，从而创建可靠的架构。
代码结构
应用程序架构体系会为实际类和框架大妈提供结构和一致性。建立一个好的架构有以下主要好处：
■ 每个应用的工作方式是相同的，因而你只需要学习一次。
■ 在应用之间很容易分享代码，因为工作方式是相同的。
■ 你可以使用ExtJS的生成工具为你的应用程序创建经过优化的发布版本。
在ExtJS 4创建你的应用时，应该考虑一下我们定义的约定，尤其是统一的目录结构。这个结构要求所有类文件都放到app目录下，在该目录下，可根据命名空间划建立models、views、controllers和stores等4个子目录。

虽然ExtJS 4提供了如何构建你的应用的最佳做法，但是你也可以根据自己需要修改我们建议的文件和类的命名约定，例如，你可以为你的控制器在“Controller”前加上前缀，如“Users”修改为“UsersController”。在这种情形下，记得给所有的控制器文件和类加前缀。最重要的一点是，要在开始编写应用程序前定义好这些约定并遵守它。这样，你就可以在任何需要的地方调用这些类。我们强烈建议要遵守控制器、模型、Store、视图这4个文件夹的命名约定，这可以确保你可以使用SDK Tools beta对应用进行优化。
寻找平衡点
视图
将应用程序的UI分割成视图是好的开始。通常做法是，你提供线框，而设计师创建UI实体模型。尝试一下使用以下模型，让我们的设计师如何使用ExtJS重建（非常有吸引力）Pandora应用。

我们需要在视图粒度与通用性之间寻求一个平衡。让我们看看当划分太多视图的时候会发生什么。

将UI划分成太多小的视图将会让视图在控制器中变得难以管理、引用和控制。另外，由于每个视图都有其自己的文件，创建过多的视图会让定义UI块或视图逻辑时很难找到视图文件。
另一方面，我们不希望视图变得太通用，因为这样在修改时会失去灵活性。

在这种情况下，每个视图已经过于简化。当视图的几个部件需要自定义视图逻辑的时候，视图类最终会有太多的负担，产生的视图类变得很难维护。另外，当设计师考虑改变UI时，我们不得不重构视图定义和视图逻辑，这是相当烦人的事。
当我们可以轻松的在页面上重新排列视图，热切不需要每次都重构它们的时候，说明已经取得了平衡。例如，我们可以把广告作为独立视图，这样，我就可以很容器移动它，甚至删除它。

在这一版本，我们根据视图的任务来划分UI。一旦你对使用视图组合UI有整体思路，那么，你就可以在实现它们时对其粒度作出调整。有时候，你会觉得两个视图应该成为一个，或是视图太通用，需要将其划分成多个视图，这是一个良好的开端的基础。我相信我们已经做到了这一点。
模型
现在我们已经有了视图的基本结构，是时候考虑模型的问题了。通过考察UI中动态数据的类型，我们可以获得应用中所需的不同模型。

我们已经决定只使用两个模型：Song和Station。我们可以定义多两个模型：Artist和Album。然而，与视图类似，我们并不想定义模型时也变得太通用。在当前情况下，我们并不需要将artist和album信息独立出来，因为当前应用不允许用户根据指定的artist选择song。相反，数据是根据station组织的，song是重点，而artist和album是song的属性。这意味着我们不能将song、artist和album结合到一个模型。这可以大大简化应用的数据边界。这也能简化在服务器端的API，因而我们不需要加载artists和albums。因而，对于这个示例，只需要2个模型：Song和Station。
Stores
现在我们需要考虑如何在应用中使用模型，也就是如何设计Store的问题。

要搞清楚需要使用那些Store是比较容易的。一个好的策略是先确定页面上所有需要绑定数据的组件。在当前情况下，我们需要列出用户收喜爱stations，一个显示近期播放过的歌曲的scroller，一个搜索区域以显示搜索结果。每一个这样的视图度需要绑定一个Store。
控制器
有几种方法可以让你通过应用控制器发布应用的响应。让我们开始考虑当前例子需要那些控制器。

这里有2个基本控制器：SongController和StationController。ExtJS 4允许你使用一个控制同时其控制几个视图。StationController要处理的事情包括创建新的stations，以及当用户喜爱的station加载后，将其应用到StationList视图。SongController负责管理SongInfo视图和根据用户的liking、disliking、暂停和跳过操作更新RecentSong Store。控制器可通过应用事件的触发和监听实现相互之间的交互。当我们可以创建余下的控制器，一个用于管理playback，另外一个用于搜索stations，我想我们已经找到了好的划分响应的方法。
三思而后行
我们分享我们的想法，重点在于希望有助于你写代码前的应用架构的规划。我们期望通过应用程序的细节讨论有助于你建立更灵活的更容易维护架构。

本文链接

extjs4 tree

2011-11-09T15:30:00Z

一、树面板简单示例

Javascript代码

var tree = Ext.create('Ext.tree.Panel', {
title: '树面板简单示例',
width : 150,
height : 100,
renderTo: Ext.getBody(),
root: {
text: '树根',//节点名称
expanded: true,//默认展开根节点
children: [{
text: '节点一',//节点名称
leaf: true//true说明为叶子节点
}, {
text: '节点二',//节点名称
leaf: true//true说明为叶子节点
}]
}
});

var tree = Ext.create('Ext.tree.Panel', {
	title: '树面板简单示例',
	width : 150,
	height : 100,
	renderTo: Ext.getBody(),
	root: {
	    text: '树根',//节点名称
	    expanded: true,//默认展开根节点
	    children: [{
	        text: '节点一',//节点名称
	        leaf: true//true说明为叶子节点
	    }, {
	        text: '节点二',//节点名称
	        leaf: true//true说明为叶子节点
	    }]
	}
});

二、多列树示例

Javascript代码

var tree = Ext.create('Ext.tree.Panel', {
title: 'TreeGrid（多列树示例）',
renderTo: Ext.getBody(),
width : 200,
height : 120,
fields: ['name', 'description'],
columns: [{
xtype: 'treecolumn',//树状表格列
text: '名称',
dataIndex: 'name',
width: 100,
sortable: true
}, {
text: '描述',
dataIndex: 'description',
flex: 1,
sortable: true
}],
root: {
name: '树根',
description: '树根的描述',
expanded: true,
children: [{
name: '节点一',
description: '节点一的描述',
leaf: true
}, {
name: '节点二',
description: '节点二的描述',
leaf: true
}]
}
});

var tree = Ext.create('Ext.tree.Panel', {
    title: 'TreeGrid（多列树示例）',
    renderTo: Ext.getBody(),
    width : 200,
    height : 120,
    fields: ['name', 'description'],
    columns: [{
        xtype: 'treecolumn',//树状表格列
        text: '名称',
        dataIndex: 'name',
        width: 100,
        sortable: true
    }, {
        text: '描述',
        dataIndex: 'description',
        flex: 1,
        sortable: true
    }],
    root: {
        name: '树根',
        description: '树根的描述',
        expanded: true,
        children: [{
            name: '节点一',
            description: '节点一的描述',
            leaf: true
        }, {
            name: '节点二',
            description: '节点二的描述',
            leaf: true
        }]
    }
});

三、树面板中的复选框示例

Javascript代码

var tree = Ext.create('Ext.tree.Panel', {
title: '复选框示例',
width : 150,
height : 100,
renderTo: Ext.getBody(),
root: {
text: '树根',//节点名称
expanded: true,//默认展开根节点
children: [{
text: '节点一',//节点名称
checked : true,//默认选中
leaf: true//true说明为叶子节点
}, {
text: '节点二',//节点名称
checked : false,//默认不选中
leaf: true//true说明为叶子节点
}]
}
});

本文链接

extjs 4 grid

2011-11-09T15:29:00Z

一、grid的例：

Javascript代码

//配置表格列
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "组长", width: 50, dataIndex: 'leader',
xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
trueText: '是',
falseText: '否'
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日'//日期格式化字符串
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000'//数字格式化字符串
}

//配置表格列
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "组长", width: 50, dataIndex: 'leader', 
	xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
	trueText: '是',
	falseText: '否'
},
{header: "生日", width: 100, dataIndex: 'birthday', 
	xtype : 'datecolumn',//Ext.grid.column.Date日期列
	format : 'Y年m月d日'//日期格式化字符串
},
{header: "薪资", width: 50, dataIndex: 'salary', 
	xtype: 'numbercolumn',//Ext.grid.column.Number数字列
	format:'0,000'//数字格式化字符串
}

Javascript代码

xtype: 'actioncolumn',//Ext.grid.column.Action动作列
items: [{
icon: 'images/edit.gif',//指定编辑图标资源的URL
handler: function(grid, rowIndex, colIndex) {
//获取被操作的数据记录
var rec = grid.getStore().getAt(rowIndex);
alert("编辑 " + rec.get('name'));
}
},{
icon: 'images/del.gif',//指定编辑图标资源的URL
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("删除 " + rec.get('name'));
}
},{
icon: 'images/save.gif',//指定编辑图标资源的URL
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("保存 " + rec.get('name'));
}
}]

xtype: 'actioncolumn',//Ext.grid.column.Action动作列
items: [{
    icon: 'images/edit.gif',//指定编辑图标资源的URL 
    handler: function(grid, rowIndex, colIndex) {
    	//获取被操作的数据记录
        var rec = grid.getStore().getAt(rowIndex);
        alert("编辑 " + rec.get('name'));
    }
},{
    icon: 'images/del.gif',//指定编辑图标资源的URL 
    handler: function(grid, rowIndex, colIndex) {
        var rec = grid.getStore().getAt(rowIndex);
        alert("删除 " + rec.get('name'));
    }                
},{
    icon: 'images/save.gif',//指定编辑图标资源的URL 
    handler: function(grid, rowIndex, colIndex) {
        var rec = grid.getStore().getAt(rowIndex);
        alert("保存 " + rec.get('name'));
    }                
}]

Javascript代码

{
header: "描述", width: 100,
xtype: 'templatecolumn',//Ext.grid.column.Template数字列
tpl : '{name}<tpl if="leader == false">不</tpl>是组长'
}

{
	header: "描述", width: 100,
	xtype: 'templatecolumn',//Ext.grid.column.Template数字列
	tpl : '{name}<tpl if="leader == false">不</tpl>是组长'
}

Javascript代码

Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35})

Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35})

二、自定义渲染函数示例：

Javascript代码

//定义渲染函数，格式化性别显示
function formatSex(value){
return value=='man'?'男':'<font color=red>女</font>';
}
//定义渲染函数，格式化年龄显示
function formatAge(value,metadata){
if(value < 30){ //年龄小于30的设置背景颜色为#CCFFFF
metadata.style = 'background-color:#CCFFFF;';
}
return value;
}

//定义渲染函数，格式化性别显示
function formatSex(value){ 		
	return value=='man'?'男':'<font color=red>女</font>';
}
//定义渲染函数，格式化年龄显示
function formatAge(value,metadata){ 		
	if(value < 30){  //年龄小于30的设置背景颜色为#CCFFFF
		metadata.style = 'background-color:#CCFFFF;';
	}
	return value;
}

Javascript代码

columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'id'},
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex},
{header: "生日", width: 100, dataIndex: 'birthday',
//格式化生日显示
renderer:Ext.util.Format.dateRenderer('Y年m月d日') },
{header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge}
]

columns: [//配置表格列
				{header: "id", width: 30, dataIndex: 'id'},
				{header: "姓名", width: 50, dataIndex: 'name'},
				{header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex},
				{header: "生日", width: 100, dataIndex: 'birthday', 
					//格式化生日显示
renderer:Ext.util.Format.dateRenderer('Y年m月d日')				},
				{header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge}
			]

三、Ext.selection.CellModel（单元格选择模式）示例

Javascript代码

//创建表格数据
var datas = [
[100,'张三',24], [200,'李四',30], [300,'王五',29]
];
//创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel',{
title : '单元格选择模式示例',
renderTo: Ext.getBody(),
width:200,
height:170,
frame:true,
selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel
tbar : [{
text : '取得所选单元格',
handler : function(){
var cell = grid.getSelectionModel().getCurrentPosition();
alert(Ext.JSON.encode(cell));
}
}],
store: {//配置数据源
fields: ['id','name','age'],//定义字段
proxy: {
type: 'memory',//Ext.data.proxy.Memory内存代理
data : datas,//读取内嵌数据
reader : 'array'//Ext.data.reader.Array解析器
},
autoLoad: true//自动加载
},
columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'id', sortable: true},
{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
{header: "年龄", width: 80, dataIndex: 'age', sortable: true}
]
});

//创建表格数据
var datas = [
	[100,'张三',24], [200,'李四',30], [300,'王五',29]
];
//创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel',{
	title : '单元格选择模式示例',
	renderTo: Ext.getBody(),
	width:200,
	height:170,
	frame:true,
	selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel
	tbar : [{
		text : '取得所选单元格',
		handler : function(){
			var cell = grid.getSelectionModel().getCurrentPosition();
			alert(Ext.JSON.encode(cell));
		}
	}],
	store: {//配置数据源
        fields: ['id','name','age'],//定义字段
        proxy: {
            type: 'memory',//Ext.data.proxy.Memory内存代理
            data : datas,//读取内嵌数据
            reader : 'array'//Ext.data.reader.Array解析器
        },
        autoLoad: true//自动加载
    },
	columns: [//配置表格列
		{header: "id", width: 30, dataIndex: 'id', sortable: true},
		{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
		{header: "年龄", width: 80, dataIndex: 'age', sortable: true}
	]
});

四、Ext.selection.RowModel（行选择模式）示例－－主要相关代码

Javascript代码

simpleSelect : true,//启用简单选择功能
multiSelect : true,//支持多选
selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
tbar : [{
text : '取得所选行',
handler : function(){
var msg = '';
var rows = grid.getSelectionModel().getSelection();
for(var i = 0; i < rows.length; i++){
msg = msg + rows[i].get('name') + '\n';
}
alert(msg);
}
}]

simpleSelect : true,//启用简单选择功能 
multiSelect : true,//支持多选
selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
tbar : [{
	text : '取得所选行',
	handler : function(){
		var msg = '';
		var rows = grid.getSelectionModel().getSelection();
		for(var i = 0; i < rows.length; i++){
			msg = msg + rows[i].get('name') + '\n';
		}
		alert(msg);
	}
}]

五、Ext.selection.CheckboxModel（复选框选择模式）示例－－关键代码

Javascript代码

//注册复选框选择模式别名为selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');

//注册复选框选择模式别名为selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');

Javascript代码

multiSelect : true,//支持多选
selModel: {
selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel
},
tbar : [{
text : '取得所选行',
handler : function(){
var msg = '';
var rows = grid.getSelectionModel().getSelection();
for(var i = 0; i < rows.length; i++){
msg = msg + rows[i].get('name') + '\n';
}
alert(msg);
}
}]

multiSelect : true,//支持多选
			selModel: {
				selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel
			},
			tbar : [{
				text : '取得所选行',
				handler : function(){
					var msg = '';
					var rows = grid.getSelectionModel().getSelection();
					for(var i = 0; i < rows.length; i++){
						msg = msg + rows[i].get('name') + '\n';
					}
					alert(msg);
				}
			}]

六、grid中的features使用
Ext.grid.feature.RowBody示例－－关键代码

Javascript代码

features: [Ext.create('Ext.grid.feature.RowBody',{
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();//获取表格的列数
return {
rowBody: record.get('introduce'),//指定行体内容
rowBodyCls: 'rowbodyColor',//指定行体样式
rowBodyColspan: colspan//指定行体跨列的列数
};
}
})]

features: [Ext.create('Ext.grid.feature.RowBody',{
	getAdditionalData: function(data, idx, record, orig) {
	    var headerCt = this.view.headerCt,
	        colspan  = headerCt.getColumnCount();//获取表格的列数
	
	    return {
	        rowBody: record.get('introduce'),//指定行体内容
	        rowBodyCls: 'rowbodyColor',//指定行体样式
	        rowBodyColspan: colspan//指定行体跨列的列数
	        };
	    }
	})]

Ext.grid.feature.Summary示例－－关键代码

Javascript代码

features: [{
ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性
}],
columns: [//配置表格列
{header: "姓名", flex: 1, dataIndex: 'name',
summaryType: 'count',//求数量
summaryRenderer: function(value){
return '员工总数：'+value
}
},
{header: "薪资", flex: 1, dataIndex: 'salary',
summaryType: 'average',//求平均值
summaryRenderer: function(value){
return '平均薪资：'+value
}
}
]

features: [{
	ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性
}],
columns: [//配置表格列
	{header: "姓名", flex: 1, dataIndex: 'name', 
		summaryType: 'count',//求数量
		summaryRenderer: function(value){
			return '员工总数：'+value
		}
	},
	{header: "薪资", flex: 1, dataIndex: 'salary', 
		summaryType: 'average',//求平均值
		summaryRenderer: function(value){
			return '平均薪资：'+value
		}
	}
]

Ext.grid.feature.Grouping示例－－关键代码

Javascript代码

features: [Ext.create('Ext.grid.feature.Grouping', {
groupByText : '用本字段分组',
showGroupsText : '显示分组',
groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
startCollapsed: true //设置初始分组是否收起
})],
columns: [//配置表格列
{header: "姓名", flex: 1, dataIndex: 'name'},
{header: "性别", flex: 1, dataIndex: 'sex'},
{header: "年龄", flex: 1, dataIndex: 'age'}
]

features: [Ext.create('Ext.grid.feature.Grouping', {
	groupByText : '用本字段分组',
	showGroupsText : '显示分组',
    groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
    startCollapsed: true //设置初始分组是否收起 
})],
columns: [//配置表格列
	{header: "姓名", flex: 1, dataIndex: 'name'},
	{header: "性别", flex: 1, dataIndex: 'sex'},
	{header: "年龄", flex: 1, dataIndex: 'age'}
]

Ext.grid.feature.GroupingSummary示例－－关键代码

Javascript代码

features: [Ext.create('Ext.grid.feature.GroupingSummary', {
groupByText : '用本字段分组',
showGroupsText : '显示分组',
groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
startCollapsed: true //设置初始分组是否收起
})],
columns: [//配置表格列
{header: "姓名", width: 100, dataIndex: 'name',
summaryType: 'count',//求数量
summaryRenderer: function(value){
return '员工总数：'+value
}
},
{header: "性别", width: 50, dataIndex: 'sex'},
{header: "年龄", width: 110, dataIndex: 'age',
summaryType: 'average',//求数量
summaryRenderer: function(value){
return '平均年龄：'+value
}
}
]

features: [Ext.create('Ext.grid.feature.GroupingSummary', {
	groupByText : '用本字段分组',
	showGroupsText : '显示分组',
    groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
    startCollapsed: true //设置初始分组是否收起 
})],
columns: [//配置表格列
	{header: "姓名", width: 100, dataIndex: 'name', 
		summaryType: 'count',//求数量
		summaryRenderer: function(value){
			return '员工总数：'+value
		}
	},
	{header: "性别", width: 50, dataIndex: 'sex'},
	{header: "年龄", width: 110, dataIndex: 'age', 
		summaryType: 'average',//求数量
		summaryRenderer: function(value){
			return '平均年龄：'+value
		}
	}
]

七、Ext.grid.plugin.CellEditing示例－－关键代码

Javascript代码

plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1//设置鼠标单击1次进入编辑状态
})
],
selType: 'cellmodel',//设置为单元格选择模式
columns: [//配置表格列
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
{header: "姓名", width: 50, dataIndex: 'name',
editor: {//文本字段
xtype:'textfield',
allowBlank:false
}
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日',//日期格式化字符串
editor: {//日期字段
xtype:'datefield',
allowBlank:false
}
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000',//数字格式化字符串
editor: {//数字字段
xtype:'numberfield',
allowBlank:false
}
}
]

plugins: [
	Ext.create('Ext.grid.plugin.CellEditing', {
	    clicksToEdit: 1//设置鼠标单击1次进入编辑状态
	})
],
selType: 'cellmodel',//设置为单元格选择模式
columns: [//配置表格列
  Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
  {header: "姓名", width: 50, dataIndex: 'name',
		editor: {//文本字段
            xtype:'textfield',
            allowBlank:false
        }
	},
	{header: "生日", width: 100, dataIndex: 'birthday', 
		xtype : 'datecolumn',//Ext.grid.column.Date日期列
		format : 'Y年m月d日',//日期格式化字符串
		editor: {//日期字段
            xtype:'datefield',
            allowBlank:false
        }
	},
	{header: "薪资", width: 50, dataIndex: 'salary', 
		xtype: 'numbercolumn',//Ext.grid.column.Number数字列
		format:'0,000',//数字格式化字符串
		editor: {//数字字段
            xtype:'numberfield',
            allowBlank:false
        }
	}
]

八、Ext.grid.plugin.RowEditing示例－－关键代码

Javascript代码

plugins: [
//行编辑模式
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
selType: 'rowmodel',//设置为单元格选择模式
columns: [//配置表格列
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
{header: "姓名", width: 50, dataIndex: 'name',
editor: {//文本字段
xtype:'textfield',
allowBlank:false
}
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日',//日期格式化字符串
editor: {//日期字段
xtype:'datefield',
allowBlank:false
}
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000',//数字格式化字符串
editor: {//数字字段
xtype:'numberfield',
allowBlank:false
}
}
]

plugins: [
    //行编辑模式
	Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
    })
],
selType: 'rowmodel',//设置为单元格选择模式
columns: [//配置表格列
    Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
	{header: "姓名", width: 50, dataIndex: 'name',
		editor: {//文本字段
            xtype:'textfield',
            allowBlank:false
        }
	},
	{header: "生日", width: 100, dataIndex: 'birthday', 
		xtype : 'datecolumn',//Ext.grid.column.Date日期列
		format : 'Y年m月d日',//日期格式化字符串
		editor: {//日期字段
            xtype:'datefield',
            allowBlank:false
        }
	},
	{header: "薪资", width: 50, dataIndex: 'salary', 
		xtype: 'numbercolumn',//Ext.grid.column.Number数字列
		format:'0,000',//数字格式化字符串
		editor: {//数字字段
            xtype:'numberfield',
            allowBlank:false
        }
	}
]

九、Ext.grid.plugin.DragDrop示例－－关键代码

Javascript代码

viewConfig: {
plugins: [
//行编辑模式
Ext.create('Ext.grid.plugin.DragDrop',{
dragGroup: 'grid1',//拖拽组名称
dropGroup: 'grid2'//拖放组名称
})
]
}

viewConfig: {
    plugins: [
        //行编辑模式
		Ext.create('Ext.grid.plugin.DragDrop',{
			dragGroup: 'grid1',//拖拽组名称
			dropGroup: 'grid2'//拖放组名称
		})
	]
}

十、Ext.grid.property.Grid示例

Javascript代码

//创建属性表格
var grid = new Ext.grid.property.Grid({
title: 'Ext.grid.property.Grid示例',
width: 300,
height: 200,
renderTo: Ext.getBody(),
//自定义属性编辑器
customEditors : {
"性别" : new Ext.form.ComboBox({
editable : false,
displayField:'sex',
mode: 'local',
triggerAction: 'all',
store:new Ext.data.SimpleStore({
fields: ['sex'],
data : [['男'],['女']]
})
}),
"出生日期": new Ext.form.DateField({
format : 'Y年m月d日',
selectOnFocus:true,
allowBlank : false
})
},
//自定义渲染函数
customRenderers: {
//格式化布尔值显示
"是否已婚": function(v){
return v?'是':'否';
},
//格式化日期显示
"出生日期": Ext.util.Format.dateRenderer('Y年m月d日')
},
source: {
"员工名称" : "张三",
"出生日期" : Ext.Date.parse('10/15/2006', 'm/d/Y'),
"性别" : '男',
"是否已婚" : false,
"年龄" : 29
}
});

本文链接

extjs4 数据实体模型

2011-11-09T15:27:00Z

1、创建Ext.data.Model数据实体模型

Javascript代码

//注册用户数据模型User
Ext.regModel('User', {
fields: [//定义模型字段
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'}
]
});
//创建User模型的实体对象
var user = Ext.ModelMgr.create({
name : 'tom',
age : 24,
phone: '555-555-5555'
}, 'User');
//获取员工姓名
alert(user.get('name'));

//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int'},
        {name: 'phone', type: 'string'}
    ]
});
//创建User模型的实体对象
var user = Ext.ModelMgr.create({
    name : 'tom',
    age  : 24,
    phone: '555-555-5555'
}, 'User');
//获取员工姓名
alert(user.get('name'));

2、在模型中进行数据验证

Javascript代码

//定义默认的验证提示信息
Ext.data.validations.presenceMessage = '必须是有效值。';
Ext.data.validations.lengthMessage = '长度错误。';
Ext.data.validations.formatMessage = '格式错误。';
Ext.data.validations.inclusionMessage = '没有包括在可接受的数据中。';
Ext.data.validations.exclusionMessage = '不是可接受的值。';
//自定义数值范围验证
Ext.apply(Ext.data.validations,{
number : function(config, value){
if (value === undefined) {
return false;
}
var min = config.min,
max = config.max;
if ((min && value < min) || (max && value > max)) {
return false;
} else {
return true;
}
},
numberMessage : '数值范围错误。'
});
//注册用户数据模型User
Ext.regModel('User', {
fields: [//定义模型字段
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'gender', type: 'string'},
{name: 'username', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
],
validations: [
{type: 'presence', field: 'age'},
{type: 'number', field: 'age', min : 30},
{type: 'length', field: 'name', min: 2},
{type: 'inclusion', field: 'gender', list: ['男', '女']},
{type: 'exclusion', field: 'username', list: ['admin@xx.xx', 'user@xx.xx']},
{type: 'format', field: 'username',
//校验用户名是否为电子邮件格式
matcher: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/
}
]
});
//创建User模型的实体对象
var user = Ext.ModelMgr.create({
name : 'tom',
age : 24,
gender : 'man',
username: 'abc'
}, 'User');
//执行数据验证
var errors = user.validate();
//获取验证信息
var message = [];
errors.each(function(v){
message.push(v.field+' : '+v.message)
});
alert(message.join('\n'));

//定义默认的验证提示信息
Ext.data.validations.presenceMessage = '必须是有效值。';
Ext.data.validations.lengthMessage = '长度错误。';
Ext.data.validations.formatMessage = '格式错误。';
Ext.data.validations.inclusionMessage = '没有包括在可接受的数据中。';
Ext.data.validations.exclusionMessage = '不是可接受的值。';

//自定义数值范围验证
Ext.apply(Ext.data.validations,{
	number : function(config, value){
		if (value === undefined) {
            return false;
        }
        var min    = config.min,
            max    = config.max;
    
        if ((min && value < min) || (max && value > max)) {
            return false;
        } else {
            return true;
        }
	},
	numberMessage : '数值范围错误。'
});

//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
         {name: 'name',     type: 'string'},
         {name: 'age',      type: 'int'},
         {name: 'phone',    type: 'string'},
         {name: 'gender',   type: 'string'},
         {name: 'username', type: 'string'},
         {name: 'alive',    type: 'boolean', defaultValue: true}
    ],
    validations: [
        {type: 'presence',  field: 'age'},
        {type: 'number',  field: 'age', min : 30},
        {type: 'length',    field: 'name', min: 2},
        {type: 'inclusion', field: 'gender',   list: ['男', '女']},
        {type: 'exclusion', field: 'username', list: ['admin@xx.xx', 'user@xx.xx']},
        {type: 'format',    field: 'username',
        	//校验用户名是否为电子邮件格式
        	matcher: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/
        }
    ]
});
//创建User模型的实体对象
var user = Ext.ModelMgr.create({
    name : 'tom',
    age  : 24,
    gender : 'man',
    username: 'abc'
}, 'User');
//执行数据验证
var errors = user.validate();
//获取验证信息
var message = [];
errors.each(function(v){
	message.push(v.field+' : '+v.message)
});
alert(message.join('\n'));

3、在模型中通过代理加载数据

Javascript代码

//注册用户数据模型User
Ext.regModel('User', {
fields: [//定义模型字段
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'id', type: 'int'}
],
//配置数据代理
proxy: {
type : 'ajax',
url : 'userServer.jsp'
}
});
var user = Ext.ModelManager.getModel('User');
//通过代理读取数据
user.load(1, {
success: function(rec) {
alert(rec.get('name'));
}
});

//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
            {name: 'name', type: 'string'},
            {name: 'age', type: 'int'},
            {name: 'id', type: 'int'}
    ],
    //配置数据代理
    proxy: {
    	type : 'ajax',
        url : 'userServer.jsp'
    }
});
var user = Ext.ModelManager.getModel('User');
//通过代理读取数据
user.load(1, {
    success: function(rec) {
    	alert(rec.get('name'));
    }
});

Jsp代码

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<%
String userId = request.getParameter("id");
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write("{id : "+userId+", name: 'user"+userId+"'}");
%>

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<%
String userId = request.getParameter("id");
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write("{id : "+userId+", name: 'user"+userId+"'}");
%>

4、模型间的一对多关系

Javascript代码

//注册用户数据模型User
Ext.regModel('User', {
fields: [//定义模型字段
{name: 'name', type: 'string'},//用户名称
{name: 'id', type: 'int'}//用户id
],
//User与Product是一对多关系
hasMany: {model: 'Product', name:'getProducts',autoLoad : false},
proxy: {
type : 'ajax',
url : 'userServer.jsp'
}
});
//注册产品数据模型Product
Ext.regModel('Product', {
fields: [//定义模型字段
{name: 'id', type: 'int'},//产品id
{name: 'title', type: 'string'},//产品名称
{name: 'user_id', type: 'int'}//用户id
],
proxy: {
type : 'ajax',
url : 'ProductServer1.jsp',
reader: {
type: 'json',
root: 'products'
}
}
});
//创建User实例
var user = Ext.ModelManager.getModel('User');
//读取id为1的User实例
user.load(1, {
success: function(rec) {
//获取user_id为1的产品Store
var products = rec.getProducts();
//加载user_id为1的产品数据
products.load({
callback : function(records, operation, success){
var msg = [];
for(var i = 0; i < records.length; i++){
var rec = records[i];
msg.push('产品名称：'+rec.get('title')+' 用户id：'+rec.get('user_id'));
}
alert(msg.join('\n'));
}
});
}
});

//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
            {name: 'name', type: 'string'},//用户名称
            {name: 'id', type: 'int'}//用户id
    ],
    //User与Product是一对多关系
    hasMany: {model: 'Product', name:'getProducts',autoLoad : false},
    proxy: {
    	type : 'ajax', 
        url : 'userServer.jsp'
    }
});
//注册产品数据模型Product
Ext.regModel('Product', {
    fields: [//定义模型字段
            {name: 'id', type: 'int'},//产品id
            {name: 'title', type: 'string'},//产品名称
            {name: 'user_id', type: 'int'}//用户id
    ],
    proxy: {
    	type : 'ajax',
        url : 'ProductServer1.jsp',
	    reader: {
            type: 'json',
            root: 'products'
        }
    }
});
//创建User实例
var user = Ext.ModelManager.getModel('User');
//读取id为1的User实例
user.load(1, {
    success: function(rec) {
    	//获取user_id为1的产品Store
    	var products = rec.getProducts();
    	//加载user_id为1的产品数据
    	products.load({
    		callback : function(records, operation, success){
    			var msg = [];
    			for(var i = 0; i < records.length; i++){
    				var rec = records[i];
    				msg.push('产品名称：'+rec.get('title')+' 用户id：'+rec.get('user_id'));
    			}
    			alert(msg.join('\n'));
    		}
    	});
    }
});

ProductServer1.jsp

Jsp代码

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page import="net.sf.json.JSONArray" %>
<%
String filter = request.getParameter("filter");
JSONArray filters = JSONArray.fromObject(filter);
int userId = filters.getJSONObject(0).getInt("value");
response.setContentType("application/json;charset=UTF-8");
String result = "{products:[{id : 1, title: '产品1', user_id : "+userId+"}, {id : 2, title: '产品2', user_id : "+userId+"}]}";
System.out.println("result="+result);
response.getWriter().write(result);
%>

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page import="net.sf.json.JSONArray" %>
<%
String filter = request.getParameter("filter");
JSONArray filters = JSONArray.fromObject(filter);
int userId = filters.getJSONObject(0).getInt("value");
response.setContentType("application/json;charset=UTF-8");
String result = "{products:[{id : 1, title: '产品1', user_id : "+userId+"}, {id : 2, title: '产品2', user_id : "+userId+"}]}";
System.out.println("result="+result);
response.getWriter().write(result);
%>

5、模型间的多对一关系

Javascript代码

//注册分类数据模型Category
Ext.regModel('Category', {
fields: [//定义模型字段
{name: 'type', type: 'string'},//产品类型名称
{name: 'id', type: 'int'}//产品类型id
],
proxy: {
type : 'ajax',
url : 'CategoryServer.jsp'
}
});
//注册产品数据模型Product
Ext.regModel('Product', {
fields: [//定义模型字段
{name: 'id', type: 'int'},//产品id
{name: 'title', type: 'string'},//产品名称
{name: 'category_id', type: 'int'}//用户id
],
belongsTo : 'Category'
});
//创建product实例
var product = new Product({
id: 100,
category_id: 1,
title: '产品1'
});
product.getCategory(function(category, operation){
//获取类型名称
alert(category.get('type'));
});

//注册分类数据模型Category
Ext.regModel('Category', {
    fields: [//定义模型字段
            {name: 'type', type: 'string'},//产品类型名称
            {name: 'id', type: 'int'}//产品类型id
    ],
    proxy: {
    	type : 'ajax', 
        url : 'CategoryServer.jsp'
    }
});
//注册产品数据模型Product
Ext.regModel('Product', {
    fields: [//定义模型字段
            {name: 'id', type: 'int'},//产品id
            {name: 'title', type: 'string'},//产品名称
            {name: 'category_id', type: 'int'}//用户id
    ],
    belongsTo : 'Category'
});
//创建product实例
var product = new Product({
    id: 100,
    category_id: 1,
    title: '产品1'
});
product.getCategory(function(category, operation){
	//获取类型名称
	alert(category.get('type'));
});

Jsp代码

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String categoryId = request.getParameter("id");
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write("{id : "+categoryId+", type: '产品类型"+categoryId+"'}");
%>

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String categoryId = request.getParameter("id");
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write("{id : "+categoryId+", type: '产品类型"+categoryId+"'}");
%>

6、Ext.data.proxy.Memory示例

Javascript代码

//创建数据模型
Ext.regModel('User', {
fields: ['id','name','age']
});
//定义内存数据变量
var userData = {
users : [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 30 },
{ id: 3, name: '王五', age: 40 }
]
};
//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
model : 'User',
reader: {
root: 'users'
},
data : userData
});
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){ //load方法的回调函数
var totalRecords = result.resultSet.total;
alert('读取内存数据，记录总是：'+totalRecords);
}

//创建数据模型
Ext.regModel('User', {
    fields: ['id','name','age']
});

//定义内存数据变量
var userData = {
    users : [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 30 },
        { id: 3, name: '王五', age: 40 }
    ]
};	

//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
	model : 'User',
	reader: {
        root: 'users'
    },
	data : userData
}); 		

//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){ 		//load方法的回调函数
	var totalRecords = result.resultSet.total;
	alert('读取内存数据，记录总是：'+totalRecords);
}

7、Ext.data.proxy.Ajax示例

Javascript代码

//创建数据模型
Ext.regModel('Person', {
fields: ['name','age']
});
//创建Ajax代理
var ajaxProxy = new Ext.data.proxy.Ajax({
url : 'personServer.jsp',
model: 'Person',
reader: 'json'
});
//创建请求参数对象
var operation = new Ext.data.Operation({
action: 'read'//设置请求动作为read
});
//读取数据
ajaxProxy.doRequest(operation,callBack);
//doRequest方法的回调函数
function callBack(operation){
//获取原始响应数据
var responseText = operation.response.responseText;
//获得记录总数
var totalRecords = operation.resultSet.totalRecords;
//获得记录数组
var records = operation.resultSet.records;
alert('使用Ajax代理读取远程数据，记录总是：'+totalRecords);
}

//创建数据模型
Ext.regModel('Person', {
    fields: ['name','age']
});
//创建Ajax代理
var ajaxProxy = new Ext.data.proxy.Ajax({
	url : 'personServer.jsp',
	model: 'Person',
    reader: 'json'
});
//创建请求参数对象
var operation = new Ext.data.Operation({
    action: 'read'//设置请求动作为read
});
//读取数据
ajaxProxy.doRequest(operation,callBack);
//doRequest方法的回调函数
function callBack(operation){
	//获取原始响应数据
	var responseText = operation.response.responseText;
	//获得记录总数
	var totalRecords = operation.resultSet.totalRecords;
	//获得记录数组
	var records = operation.resultSet.records;
	
	alert('使用Ajax代理读取远程数据，记录总是：'+totalRecords);
}

Jsp代码

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
response.setContentType("application/json;charset=UTF-8");
String result = "[{name: '张三', age : 20}, {name: '李四', age : 30}]";
response.getWriter().write(result);
%>

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
	response.setContentType("application/json;charset=UTF-8");
	String result = "[{name: '张三', age : 20}, {name: '李四', age : 30}]";
	response.getWriter().write(result);
%>

8、Ext.data.reader.Json示例

Javascript代码

//JSON格式的用户及订单信息
var userData = {
"total" : 2000,
"users": [{
"id": 123,
"name": "张三",
"orders": [{
"id": 50,
"total" : 100
}]
}]
}
//定义用户User模型
Ext.regModel("User", {
fields: [ 'id', 'name' ],
hasMany: 'Order'//定义User与Order之间的一对多关系
});
//定义订单Order模型
Ext.regModel("Order", {
fields: [ 'id', 'total' ],
belongsTo: 'User'//定义Order与User之间的多对一关系
});
//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
model : 'User',
reader: {
type: 'json',//Ext.data.reader.Json读取器
root: 'users'
},
data : userData
});
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){
//获取总记录数
var count = result.resultSet.total;
//获取第一个用户信息
var user = result.resultSet.records[0];
//获取该用户的第一个账单信息
var order = user.orders().getAt(0);
alert('总记录数：'+count+
'\n姓名：'+user.get('name')+
'\n账单金额：'+order.get('total'));
}

//JSON格式的用户及订单信息
var userData = {
	"total" : 2000,
	"users": [{
		"id": 123,
		"name": "张三",
		"orders": [{
			"id": 50,
			"total" : 100
		}]
	}]
}
//定义用户User模型
Ext.regModel("User", {
    fields: [ 'id', 'name' ],
    hasMany: 'Order'//定义User与Order之间的一对多关系
});
//定义订单Order模型
Ext.regModel("Order", {
    fields: [ 'id', 'total' ],
    belongsTo: 'User'//定义Order与User之间的多对一关系
});

//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
	model : 'User',
	reader: {
        type: 'json',//Ext.data.reader.Json读取器
        root: 'users'
    },
	data : userData
}); 
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){
	//获取总记录数
	var count = result.resultSet.total;
	//获取第一个用户信息
	var user = result.resultSet.records[0];
	//获取该用户的第一个账单信息
	var order = user.orders().getAt(0);
	alert('总记录数：'+count+
		  '\n姓名：'+user.get('name')+
		  '\n账单金额：'+order.get('total'));
}

9、读取复杂的JSON数据

Javascript代码

//JSON格式的用户及订单信息
var userData = {
"users": [{
"searchDate" : "2011-04-24",//查询时间
"role" : "admin",//查询人角色
"info" : {
"id": 123,
"name": "张三"
}
}]
}
//定义用户User模型
Ext.regModel("User", {
fields: [ 'id', 'name' ]
});
//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
model : 'User',
reader: {
type: 'json',//Ext.data.reader.Json读取器
root: 'users',
record : 'info'//定位有效数据的位置
},
data : userData
});
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){
//获取第一个用户信息
var user = result.resultSet.records[0];
alert('姓名：'+user.get('name'));
}

//JSON格式的用户及订单信息
var userData = {
	"users": [{
		"searchDate" : "2011-04-24",//查询时间
		"role" : "admin",//查询人角色
		"info" : {
			"id": 123,
			"name": "张三"
		}
	}]
}
//定义用户User模型
Ext.regModel("User", {
    fields: [ 'id', 'name' ]
});

//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
	model : 'User',
	reader: {
        type: 'json',//Ext.data.reader.Json读取器
        root: 'users',
        record : 'info'//定位有效数据的位置
    },
	data : userData
}); 
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){
	//获取第一个用户信息
	var user = result.resultSet.records[0];
	alert('姓名：'+user.get('name'));
}

10、Ext.data.Store示例

Javascript代码

//定义用户User模型
Ext.regModel("User", {
fields: ['name', 'age' ],
proxy: {
type: 'memory'
}
});
//创建数据集对象
var myStore = new Ext.data.Store({
autoLoad: true,
data : [{name: '张三', age : 20},
{name: '李四', age : 30}],
model: 'User'
});
//遍历Store中的记录
var msg = ['遍历Store中的记录：'];
myStore.each(function(rec){
msg.push('姓名:'+rec.get('name')+' 年龄:'+rec.get('age'));
});
alert(msg.join('\n'));

//定义用户User模型
Ext.regModel("User", {
    fields: ['name', 'age' ],
    proxy: {
        type: 'memory'
    }
});
//创建数据集对象
var myStore = new Ext.data.Store({
	autoLoad: true,
	data : [{name: '张三', age : 20}, 
            {name: '李四', age : 30}],
    model: 'User'
});
//遍历Store中的记录
var msg = ['遍历Store中的记录：'];
myStore.each(function(rec){
	msg.push('姓名:'+rec.get('name')+' 年龄:'+rec.get('age'));
});
alert(msg.join('\n'));

11、Ext.data.ArrayStore示例

Javascript代码

//定义用户User模型
Ext.regModel("User", {
fields: ['name', 'age' ],
proxy: 'memory'
});
//创建ArrayStore数据集对象
var myStore = new Ext.data.ArrayStore({
autoLoad: true,
data : [['张三',20],['李四',30]],//数组数据
model: 'User'
});
//遍历Store中的记录
var msg = ['遍历ArrayStore中的记录：'];
myStore.each(function(rec){
msg.push('姓名:'+rec.get('name')+' 年龄:'+rec.get('age'));
});
alert(msg.join('\n'));

本文链接

extjs4 模板值和模板

2011-11-09T15:25:00Z

1、append方法

Javascript代码

var tpl = new Ext.Template(//定义模板
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90>姓名</td><td width=90>{0}</td></tr>',
'<tr><td>年龄</td><td>{1}</td></tr>',
'<tr><td>性别</td><td>{2}</td></tr>',
'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',['小王',25,'男']);

var tpl = new Ext.Template(//定义模板
	'<table  border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90>姓名</td><td width=90>{0}</td></tr>',
	'<tr><td>年龄</td><td>{1}</td></tr>',
	'<tr><td>性别</td><td>{2}</td></tr>',
	'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',['小王',25,'男']);

2、overwrite方法：

Javascript代码

var tpl = new Ext.Template(//定义模板
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90>姓名</td><td width=90>{name}</td></tr>',
'<tr><td>年龄</td><td>{age}</td></tr>',
'<tr><td>性别</td><td>{sex}</td></tr>',
'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.overwrite('tpl-table',{name:'小王',age:25,sex:'男'});

var tpl = new Ext.Template(//定义模板
	'<table  border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90>姓名</td><td width=90>{name}</td></tr>',
	'<tr><td>年龄</td><td>{age}</td></tr>',
	'<tr><td>性别</td><td>{sex}</td></tr>',
	'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.overwrite('tpl-table',{name:'小王',age:25,sex:'男'});

3、模板中使用格式化函数：

Javascript代码

//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template([
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90>员工姓名</td>',
//{userName:capitalize}使用标准字符串格式化函数，字符串首字母大写
'<td width=120>{userName:capitalize}</td></tr>',
'<tr><td width=90>工作日期</td>',
//{WorkDate:this.cusFormat()}使用自定义格式化函数
'<td width=120>{WorkDate:this.cusFormat()}</td></tr>',
'</table>'
]);
//定义模板数据
var tplData = {
userName : 'tom',
WorkDate : new Date(2002,7,1)
}
//模板的自定义格式化函数
tpl.cusFormat = function(date,o){
return Ext.Date.format(date,'Y年m月d');
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template([
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90>员工姓名</td>',
	//{userName:capitalize}使用标准字符串格式化函数，字符串首字母大写
	'<td width=120>{userName:capitalize}</td></tr>',
	'<tr><td width=90>工作日期</td>',
	//{WorkDate:this.cusFormat()}使用自定义格式化函数
	'<td width=120>{WorkDate:this.cusFormat()}</td></tr>',
	'</table>'
]);
//定义模板数据
var tplData = {
	userName : 'tom',
	WorkDate : new Date(2002,7,1)
}
//模板的自定义格式化函数
tpl.cusFormat = function(date,o){
	return Ext.Date.format(date,'Y年m月d');
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

4、使用自定义格式化函数解析多层json对象

Javascript代码

//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90 >姓名</td>',
'<td width=120>{name}</td></tr>',
'<tr><td width=90 >年龄</td>',
'<td width=120>{age}</td></tr>',
'<tr><td width=90 >身高</td>',
'<td width=120>{stature:this.parseJson}</td></tr>',
'</table>'
);
//定义模板数据
var tplData = {
name : 'tom',
age : 24,
stature : {
num : 170,
unit : 'cm'
}
}
//通过自定义格式化函数解析json对象
tpl.parseJson = function(json){
return json.num + json.unit;
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90 >姓名</td>',
	'<td width=120>{name}</td></tr>',
	'<tr><td width=90 >年龄</td>',
	'<td width=120>{age}</td></tr>',
	'<tr><td width=90 >身高</td>',
	'<td width=120>{stature:this.parseJson}</td></tr>',
	'</table>'
);
//定义模板数据
var tplData = {
	name : 'tom',
	age : 24,
	stature : {
		num : 170,
		unit : 'cm'
	}
}
//通过自定义格式化函数解析json对象
tpl.parseJson = function(json){
	return json.num + json.unit;
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

5、使用tpl标签和for运算符

Javascript代码

//定义模板，使用tpl标签和for运算符
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90 >姓名</td><td width=90 >年龄</td></tr>',
'<tpl for=".">',
'<tr><td>{name}</td><td>{age}</td></tr>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = [
{name:'张三',age:20},
{name:'李四',age:25},
{name:'王五',age:27},
{name:'赵六',age:26}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

//定义模板，使用tpl标签和for运算符
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90 >姓名</td><td width=90 >年龄</td></tr>',
	'<tpl for=".">',
	'<tr><td>{name}</td><td>{age}</td></tr>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = [
	{name:'张三',age:20},
	{name:'李四',age:25},
	{name:'王五',age:27},
	{name:'赵六',age:26}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

6、使用parent在子模板中访问父对象

Javascript代码

//定义模板，使用parent在子模板中访问父对象
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90 >姓名</td><td width=90 >年龄</td><td width=90 >公司</td></tr>',
'<tpl for="emps">',
'<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = {
companyName : 'ACB公司',
emps:[
{name:'张三',age:20},
{name:'李四',age:25},
{name:'王五',age:27},
{name:'赵六',age:26}
]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

//定义模板，使用parent在子模板中访问父对象
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90 >姓名</td><td width=90 >年龄</td><td width=90 >公司</td></tr>',
	'<tpl for="emps">',
	'<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = {
	companyName : 'ACB公司',
	emps:[
		{name:'张三',age:20},
		{name:'李四',age:25},
		{name:'王五',age:27},
		{name:'赵六',age:26}
	]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

7、数组索引与简单数学运算

Javascript代码

//定义模板，数组索引与简单数学运算
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',
'<tpl for=".">',
'<tr><td>{#}</td><td>{name}</td><td>{wage * .9}</td></tr>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = [
{name : '张三',wage : 1000},
{name : '李四',wage : 1200},
{name : '王五',wage : 900},
{name : '赵六',wage : 1500}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

//定义模板，数组索引与简单数学运算
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',
	'<tpl for=".">',
	'<tr><td>{#}</td><td>{name}</td><td>{wage * .9}</td></tr>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = [
		{name : '张三',wage : 1000},
		{name : '李四',wage : 1200},
		{name : '王五',wage : 900},
		{name : '赵六',wage : 1500}
	]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

8、自动渲染简单数组

Javascript代码

//定义模板，自动渲染简单数组
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td>序号</td><td width=90 >姓名</td></tr>',
'<tpl for=".">',
'<tr><td>{#}</td><td>{.}</td></tr>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = ['张三','李四','王五','赵六']
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

//定义模板，自动渲染简单数组
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td>序号</td><td width=90 >姓名</td></tr>',
	'<tpl for=".">',
	'<tr><td>{#}</td><td>{.}</td></tr>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = ['张三','李四','王五','赵六']
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

9、基本的条件逻辑判断

Javascript代码

//定义模板，基本的条件逻辑判断
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',
'<tpl for=".">',
'<tpl if="wage > 1000">',
'<tr><td>{#}</td><td>{name}</td><td>{wage}</td></tr>',
'</tpl>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = [
{name : '张三',wage : 1000},
{name : '李四',wage : 1200},
{name : '王五',wage : 900},
{name : '赵六',wage : 1500}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

//定义模板，基本的条件逻辑判断
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',
	'<tpl for=".">',
	'<tpl if="wage &gt; 1000">',
	'<tr><td>{#}</td><td>{name}</td><td>{wage}</td></tr>',
	'</tpl>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = [
		{name : '张三',wage : 1000},
		{name : '李四',wage : 1200},
		{name : '王五',wage : 900},
		{name : '赵六',wage : 1500}
	]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

10、在模板中执行任意代码

Css代码

<style type="text/css">
.even { background-color: #CCFFFF; }
.odd { background-color: #FFFFFF; }
.title {text-align: center;}
</style>

<style type="text/css">
	.even { background-color: #CCFFFF; }
	.odd { background-color: #FFFFFF; }
	.title {text-align: center;}
  </style>

Javascript代码

//定义模板，在模板中执行任意代码
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0 class=title>',
'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td><td width=90 >奖金</td></tr>',
'<tpl for="emps">',
'<tr class="{[xindex % 2 == 0 ? "even" : "odd"]}">',
'<td>{[xindex]}</td><td>{[values.name]}</td>',
'<td>{[values.wage * parent.per]}</td>',
'<td>{[Math.round(values.wage * parent.per / xcount)]}</td></tr>',
'</tpl>',
'<tr><td>发薪时间</td><td colspan=3>{[fm.date(new Date,"Y年m月d日")]}</td></tr>',
'<tr><td>工资总计</td><td colspan=3>{[this.avgWage(values)]}</td></tr>',
'</table>'
);
//模板的自定义格式化函数，用于计算工资总计
tpl.avgWage = function (o) {
var sum = 0;
var length = o.emps.length;
for(var i = 0 ; i <length ; i++){
sum += o.emps[i].wage;
}
return sum * o.per;
}
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = {
per : 0.9,
emps : [
{name : '张三',wage : 1000},
{name : '李四',wage : 1200},
{name : '王五',wage : 900},
{name : '赵六',wage : 1500}
]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

//定义模板，在模板中执行任意代码
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0 >',
	'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td><td width=90 >奖金</td></tr>',
	'<tpl for="emps">',
	'<tr even" : "odd"]}">',
	'<td>{[xindex]}</td><td>{[values.name]}</td>',
	'<td>{[values.wage * parent.per]}</td>',
	'<td>{[Math.round(values.wage * parent.per / xcount)]}</td></tr>',
	'</tpl>',
	'<tr><td>发薪时间</td><td colspan=3>{[fm.date(new Date,"Y年m月d日")]}</td></tr>',
	'<tr><td>工资总计</td><td colspan=3>{[this.avgWage(values)]}</td></tr>',
	'</table>'
);
//模板的自定义格式化函数，用于计算工资总计
tpl.avgWage = function (o) {
	var sum = 0;
	var length = o.emps.length;
	for(var i = 0 ; i <length ; i++){
		sum += o.emps[i].wage;
	}
	return sum * o.per;
}
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = {
	per : 0.9,
	emps : [
		{name : '张三',wage : 1000},
		{name : '李四',wage : 1200},
		{name : '王五',wage : 900},
		{name : '赵六',wage : 1500}
	]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

11、使用模板成员函数

Javascript代码

//定义模板，在模板中使用模板成员函数
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0 class=title>',
'<tr><td width=90 >姓名</td><td width=90 >工资</td></tr>',
'<tpl for=".">',
'<tpl if="this.check(wage)">',
'<tr><td>{name}</td>',
'<td>{[this.format(values.wage)]}</td>',
'</tpl></tpl>',
'</table>',
{
//定义模板成员函数
check : function(wage) {
if(wage > 1000){
return true;
}else {
return false
}
},
//定义模板成员函数
format : function(wage) {
if(wage > 1300){
return '<font color=red>'+wage+'</font>';
}else {
return '<font color=blue>'+wage+'</font>';
}
}
}
);
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = [
{name : '张三',wage : 1000},
{name : '李四',wage : 1200},
{name : '王五',wage : 900},
{name : '赵六',wage : 1500}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

//定义模板，在模板中使用模板成员函数
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0 >',
	'<tr><td width=90 >姓名</td><td width=90 >工资</td></tr>',
	'<tpl for=".">',
	'<tpl if="this.check(wage)">',
	'<tr><td>{name}</td>',
	'<td>{[this.format(values.wage)]}</td>',
	'</tpl></tpl>',
	'</table>',
	{
		//定义模板成员函数
		check : function(wage) {
			if(wage > 1000){
				return true;
			}else {
				return false
			}
		},
		//定义模板成员函数
		format : function(wage) {
			if(wage > 1300){
				return '<font color=red>'+wage+'</font>';
			}else {
				return '<font color=blue>'+wage+'</font>';
			}
			
		}
	}
);
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = [
		{name : '张三',wage : 1000},
		{name : '李四',wage : 1200},
		{name : '王五',wage : 900},
		{name : '赵六',wage : 1500}
	]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

12、在Extjs组件中使用模板

Css代码

<style type="text/css">
.even { background-color: #CCFFFF; }
.odd { background-color: #FFFFFF; }
</style>

<style type="text/css">
	.even { background-color: #CCFFFF; }
	.odd { background-color: #FFFFFF; }
</style>

Javascript代码

//定义组合框模板
var itemTpl = new Ext.XTemplate(
'<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">',
'{#} ：{[this.check(values)]}</div>',
{
check : function (values) {
if(values.value > 2 ){
return "<font color=red>"+values.item+"</font>";
}else {
return "<font color=blue>"+values.item+"</font>";
}
}
}
);
//创建数据模型
Ext.regModel('ItemInfo', {
fields: ['item','value']
});
new Ext.form.Panel({
title:'在Extjs组件中使用模板',
renderTo: Ext.getBody(),
bodyPadding: 5,
height : 100,
frame : true,
width : 350,
items : [{
xtype : 'combo',
fieldLabel:'邮政编码',
displayField:'item',
valueField:'value',
labelSeparator :'：',//分隔符
listConfig : {
itemTpl : itemTpl
},
editable : false,
queryMode: 'local',
triggerAction: 'all',
store : new Ext.data.Store({
model : 'ItemInfo',
fields: ['item','value'],
data : [{item:'条目1',value:1},
{item:'条目2',value:2},
{item:'条目3',value:3},
{item:'条目4',value:4},
{item:'条目5',value:5},
{item:'条目6',value:6}]
})
}]
});

//定义组合框模板
var itemTpl = new Ext.XTemplate(
	'<div even" : "odd"]}">',
	'{#} ：{[this.check(values)]}</div>',
	{
		check : function (values) {
			if(values.value > 2 ){
				return "<font color=red>"+values.item+"</font>";
			}else {
				return "<font color=blue>"+values.item+"</font>";
			}
		}
	}
);
//创建数据模型
Ext.regModel('ItemInfo', {
    fields: ['item','value']
});

new Ext.form.Panel({
	title:'在Extjs组件中使用模板',
	renderTo: Ext.getBody(),
	bodyPadding: 5,
	height : 100,
	frame : true,
	width : 350,
	items : [{
		xtype : 'combo',
		fieldLabel:'邮政编码',
		displayField:'item',
		valueField:'value',
		labelSeparator :'：',//分隔符
		listConfig : {
			itemTpl : itemTpl
		},
		editable : false,
		queryMode: 'local',
		triggerAction: 'all',
		store : new Ext.data.Store({
			model : 'ItemInfo',
			fields: ['item','value'],
			data : [{item:'条目1',value:1},
			        {item:'条目2',value:2},
			        {item:'条目3',value:3},
			        {item:'条目4',value:4},
			        {item:'条目5',value:5},
			        {item:'条目6',value:6}]
		})
	}]
});

13、Ext.view.View示例

Javascript代码

var inputForm = Ext.create('Ext.form.Panel',{
bodyPadding: 5,
width : 490,
flex : 2,
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 60,//标签宽度
width : 150,//字段宽度
msgTarget : 'side',
allowBlank : false,
labelAlign : 'right'
},
layout: {//设置容器字段布局
type: 'hbox',
align: 'middle'//垂直居中
},
defaultType: 'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'产品名称',
name : 'productName'
},{
fieldLabel:'数量',
xtype : 'numberfield',
name : 'productNum'
},{
fieldLabel:'金额',
xtype : 'numberfield',
name : 'productPrice'
}],
fbar : [{
text : '添加',
handler : function(){
if(inputForm.getForm().isValid()){
var data = inputForm.getForm().getValues();
var product = Ext.ModelMgr.create(data, 'ProductInfo');
productStore.add(product);
inputForm.getForm().reset();
}
}
}]
});
//创建数据模型
Ext.regModel('ProductInfo', {
fields: ['productName','productNum','productPrice']
});
//创建产品数据源
var productStore = Ext.create('Ext.data.Store',{
autoLoad : true,
data : [],
model : 'ProductInfo',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'datas'
}
}
});
//定义模板
var productTpl = new Ext.XTemplate(
'<table border=1 cellspacing=0 cellpadding=0 width=100%>',
'<tr><td width=160>产品名称</td><td width=75>数量</td><td width=75>金额</td></tr>',
'<tpl for=".">',
'<tr><td>{productName}</td><td>{productNum}</td><td>{productPrice}</td></tr>',
'</tpl>',
'</table>'
);
//产品数据视图
var productView = Ext.create('Ext.view.View',{
store: productStore,
tpl: productTpl,
deferEmptyText : false,
itemSelector:'div.thumb-wrap',
emptyText: '请录入商品'
});
//产品面板
var productViewPanel = Ext.create('Ext.panel.Panel',{
autoScroll:true,
width : 490,
flex : 3,
layout : 'fit',
bodyStyle:'background-color:#FFFFFF',
items: productView
});
Ext.create('Ext.panel.Panel',{
renderTo: document.body,
frame:true,
width : 500,
height: 200,
layout:'vbox',
title:'产品录入',
items: [inputForm, productViewPanel]
});

本文链接

extjs4 事件处理

2011-11-09T15:22:00Z

一、addListener方法

Javascript代码

var button = Ext.get('btn');
button.addListener('click',hello1);//绑定事件处理函数
button.addListener('click',hello2);

var button = Ext.get('btn');
button.addListener('click',hello1);//绑定事件处理函数
button.addListener('click',hello2);

二、ExtJS支持的自定义事件

Javascript代码

//创建Person类
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.sayNum = 0;
this.say = function(){
if(this.sayNum < 2){
this.sayNum += 1;
alert('I am '+name);
}else{
this.sayNum = 0;//触发自定义事件后计数器归零
this.fireEvent('onSay',this);//激发自定义事件
}
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom',3);//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function handler(){
alert('发生了自定义事件');
});

//创建Person类
var Person = Ext.extend(Ext.util.Observable,{
	constructor : function(name){
	   this.name = name;
	   this.sayNum = 0;
	   this.say = function(){
			if(this.sayNum < 2){
				this.sayNum += 1;
				alert('I am '+name);
			}else{
				this.sayNum = 0;//触发自定义事件后计数器归零
				this.fireEvent('onSay',this);//激发自定义事件
			}
	   }
	   this.addEvents({//加入自定义事件
		  "onSay" : true
	   });
	}
});
var per = new Person('tom',3);//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function handler(){
	alert('发生了自定义事件');
});

Html代码

<input type='button' value='say' onclick='per.say()'>

<input type='button' value='say' onclick='per.say()'>

自定义事件的另外一个例子：

Javascript代码

//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.say = function(){
this.fireEvent('onSay',this.name);//激发自定义事件
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function(name){
alert("I'am " + name);
});

//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
	constructor : function(name){
	   this.name = name;
	   this.say = function(){
			this.fireEvent('onSay',this.name);//激发自定义事件
	   }
	   this.addEvents({//加入自定义事件
		  "onSay" : true
	   });
	}
});
var per = new Person('tom');//创建对象

//为自定义事件绑定处理函数
per.addListener('onSay',function(name){
	alert("I'am " + name);
});

拦截器使用示例Observable.capture，与上面例子不同的地方是“var per = new Person('tom');//创建对象”代码之后的内容替换为：

Javascript代码

per.addListener('onSay',handler);//为自定义事件绑定处理函数
function handler(){//事件处理函数
alert('发生了自定义事件');
}
//为per对象添加拦截器
Ext.util.Observable.capture(per,captureFunction);
//拦截函数
function captureFunction(eventName){
if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行
alert("拦截事件：“"+eventName+"”。");
return false;
}
return true;
}

per.addListener('onSay',handler);//为自定义事件绑定处理函数
function handler(){//事件处理函数
	alert('发生了自定义事件');
}
//为per对象添加拦截器
Ext.util.Observable.capture(per,captureFunction);
//拦截函数
function captureFunction(eventName){
	if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行
		alert("拦截事件：“"+eventName+"”。");
		return false;
	}
	return true;
}

三、addManagedListener受管事件监听器：

Javascript代码

function createFn(){
alert('新建');
}
function openFn(){
alert('打开');
}
function saveFn(){
alert('保存');
}
Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
renderTo: Ext.getBody(),
bodyPadding: 5,
width:300,
items : [
{text:'新建',id:'createBtn',iconCls:'newIcon'},
{text:'打开',id:'openBtn',iconCls:'openIcon'},
{text:'保存',id:'saveBtn',iconCls:'saveIcon'},
{text:'销毁新建按钮',handler : function(){
//销毁新建按钮
Ext.getCmp('createBtn').destroy();
}}
]
});
var createBtn = Ext.getCmp('createBtn');
createBtn.on('click',createFn);
//以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁
//了则事件绑定同时解除。
createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);

function createFn(){
	alert('新建');
}
function openFn(){
	alert('打开');
}
function saveFn(){
	alert('保存');
}
Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
	renderTo: Ext.getBody(),
	bodyPadding: 5,
	width:300,
	items : [
	    {text:'新建',id:'createBtn',iconCls:'newIcon'},
		{text:'打开',id:'openBtn',iconCls:'openIcon'},
		{text:'保存',id:'saveBtn',iconCls:'saveIcon'},
		{text:'销毁新建按钮',handler : function(){
			//销毁新建按钮
			Ext.getCmp('createBtn').destroy();
		}}
	]
});
var createBtn = Ext.getCmp('createBtn');
createBtn.on('click',createFn);
//以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁
//了则事件绑定同时解除。
createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);

四、relayEvents传播分发事件：

Javascript代码

//创建Employee工人类
var Employee = Ext.extend(Ext.util.Observable,{
constructor : function(config){
this.name = config.name;
this.eat = function(){
this.fireEvent('startEat',this);//激发开始吃饭事件
this.fireEvent('finishEat',this);//激发结束吃饭事件
}
this.addEvents({//加入自定义事件
"startEat" : true,//开始吃饭事件
"finishEat" : true//结束吃饭事件
});
Employee.superclass.constructor.call(this, config)
}
});
//定义Waiter服务员类
var Waiter = Ext.extend(Ext.util.Observable,{
constructor : function(config){
Waiter.superclass.constructor.call(this, config);
}
});
//创建员工对象
var emp = new Employee({name:'tom'});
//为自定义事件绑定处理函数
emp.addListener('startEat',function(){
alert(this.name + '开始吃饭了。');
});
emp.addListener('finishEat',function (){
alert(this.name + '吃完饭，可以收拾盘子了。');
});
//创建服务员对象
var waiter = new Waiter();
//使服务员对象与员工对象的finishEat事件进行关联
//也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，
//然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。
waiter.relayEvents(emp, ['finishEat']);
waiter.on('finishEat',function(){
alert('服务员开始收拾盘子。');
});

//创建Employee工人类
var Employee = Ext.extend(Ext.util.Observable,{
	constructor : function(config){
	   this.name = config.name;
	   this.eat = function(){
			this.fireEvent('startEat',this);//激发开始吃饭事件
			this.fireEvent('finishEat',this);//激发结束吃饭事件
	   }
	   this.addEvents({//加入自定义事件
		  "startEat" : true,//开始吃饭事件
		  "finishEat" : true//结束吃饭事件
	   });
	   Employee.superclass.constructor.call(this, config)
	}
});

//定义Waiter服务员类
var Waiter = Ext.extend(Ext.util.Observable,{
	constructor : function(config){
		Waiter.superclass.constructor.call(this, config);
	}
});
//创建员工对象
var emp = new Employee({name:'tom'});
//为自定义事件绑定处理函数
emp.addListener('startEat',function(){
	alert(this.name + '开始吃饭了。');
});
emp.addListener('finishEat',function (){
	alert(this.name + '吃完饭，可以收拾盘子了。');
});
//创建服务员对象
var waiter = new Waiter();
//使服务员对象与员工对象的finishEat事件进行关联
//也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，
//然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。
waiter.relayEvents(emp, ['finishEat']);
waiter.on('finishEat',function(){
	alert('服务员开始收拾盘子。');
});

Html代码

<input type='button' value='员工吃饭' onclick='emp.eat()'>

<input type='button' value='员工吃饭' onclick='emp.eat()'>

五、Ext.EventObject示例

Javascript代码

var btn = Ext.get('buttonTest');
btn.addListener('click',handler);//为click事件绑定处理函数
function handler(e){//事件处理函数
//获取事件发生时的x坐标
var x = e.getPageX();
//获取事件发生时的y坐标
var y = e.getPageY();
var msg = '事件发生坐标 : x='+x+' y='+y;
alert(Ext.EventManager.getPageXY(e));
alert(msg);
}

var btn = Ext.get('buttonTest');
btn.addListener('click',handler);//为click事件绑定处理函数
function handler(e){//事件处理函数
	//获取事件发生时的x坐标
	var x = e.getPageX();
	//获取事件发生时的y坐标
	var y = e.getPageY();
	var msg = '事件发生坐标 : x='+x+' y='+y;
	alert(Ext.EventManager.getPageXY(e));
	alert(msg);
}

六、Ext.EventManager使用

Javascript代码

Ext.EventManager.addListener('btn','click',handler);//绑定处理函数

本文链接

extjs4 一些小知识

2011-11-09T15:20:00Z

1、获取页面上的HTML元素，并进行处理，使用Ext.get('elid')方法，参数为HTML元素的id值，由此可对获取到的元素进行各种处理。例如：

Javascript代码

var el = Ext.get("the-id");
var appendEl = Ext.get("the-id-append");
function fn1(){
Ext.Msg.alert("提示","您在id为'the_id'的Element上按下了ctrl+c键");
}
el.addCls("special-css");//为元素添加样式表
appendEl.addCls("special-css");
appendEl.setWidth(240);
appendEl.setWidth(240, true);
el.focus();//将焦点移到el元素上
el.addClsOnFocus("focus-css");//为得到和失去焦点添加和移除css类
el.addClsOnOver("mouseover-css");//为鼠标移入移出事件添加和移除css类
el.addClsOnClick("click-css");//为点击事件添加和移除css类
el.setWidth(240);//将元素的宽度设为100相素
el.setWidth(240, true);//将元素的宽度设为100并带有动画效果
el.addKeyMap({key : "c",ctrl : true,fn:fn1,scope:el});//绑定el元素当键盘按下ctrl+c键时将呼叫fn函数
el.addKeyListener({key:"g",ctrl:true},fn1,el);//和上面的addKeyMap的功能相同，只是参数的传递方式不同

var el = Ext.get("the-id");
	var appendEl = Ext.get("the-id-append");
	function fn1(){
		Ext.Msg.alert("提示","您在id为'the_id'的Element上按下了ctrl+c键");
	}
	el.addCls("special-css");//为元素添加样式表
	appendEl.addCls("special-css");
	appendEl.setWidth(240);
	appendEl.setWidth(240, true);
	el.focus();//将焦点移到el元素上
	el.addClsOnFocus("focus-css");//为得到和失去焦点添加和移除css类
	el.addClsOnOver("mouseover-css");//为鼠标移入移出事件添加和移除css类
	el.addClsOnClick("click-css");//为点击事件添加和移除css类
	el.setWidth(240);//将元素的宽度设为100相素
	el.setWidth(240, true);//将元素的宽度设为100并带有动画效果
	el.addKeyMap({key : "c",ctrl : true,fn:fn1,scope:el});//绑定el元素当键盘按下ctrl+c键时将呼叫fn函数
	el.addKeyListener({key:"g",ctrl:true},fn1,el);//和上面的addKeyMap的功能相同，只是参数的传递方式不同

2、获取页面上的HTML元素，还可用select方法，可以获取一系列元素，也可为之设定相同的事件，或者进行相同的设置，例如：

Javascript代码

var el = Ext.select(["div1","div2"],true);
el.on("click",function tes(e){
Ext.Msg.alert("提示","您点击了id为" + Ext.get(e.target).dom.id + "的节点");
});

var el = Ext.select(["div1","div2"],true);
		el.on("click",function tes(e){
			Ext.Msg.alert("提示","您点击了id为" + Ext.get(e.target).dom.id + "的节点");
		});

3、获取页面上的HTML元素，还可以用query方法，与前面的区别在于参数不同，例如：

Javascript代码

//选择元素为div其id为div1的节点的数组
var el = Ext.query("#div1");
//选择元素为div的且这些div具备属性为property1其值为pro1的节点的数组
var targetD = Ext.query('div[property1=pro1]');
if(el.length>0 || targetD.length>0){
var msg = '';
msg = "取得了"+el.length+"个div的id为'div1'的节点<br>"+"取得了"+targetD.length+"个类型为div<br>具备属性property1且其值为'pro1'的节点";
msg += "<br>内容为：";
for(var i = 0; i<el.length; i++)
{
msg += el[i].id + ":" + el[i].innerHTML;
}
msg += "<br>内容为：";
for(var i = 0; i<targetD.length; i++)
{
msg += targetD[i].id + ":" + targetD[i].innerHTML;
}
Ext.Msg.alert('提示',msg);
}

//选择元素为div其id为div1的节点的数组
		var el = Ext.query("#div1");
		//选择元素为div的且这些div具备属性为property1其值为pro1的节点的数组
		var targetD = Ext.query('div[property1=pro1]');
		if(el.length>0 || targetD.length>0){
			var msg = '';
			msg = "取得了"+el.length+"个div的id为'div1'的节点<br>"+"取得了"+targetD.length+"个类型为div<br>具备属性property1且其值为'pro1'的节点";
			msg += "<br>内容为：";
			for(var i = 0; i<el.length; i++)
			{
			    msg += el[i].id + ":" + el[i].innerHTML;
			}
			msg += "<br>内容为：";
			for(var i = 0; i<targetD.length; i++)
			{
			   msg += targetD[i].id + ":" + targetD[i].innerHTML;
			}
			Ext.Msg.alert('提示',msg);
		}

4、获取Ext的组件，用getCmp方法，然后根据其特定类型可以进行相应的处理，例如：

Javascript代码

//获得id为'panel1'的组件
var comp = Ext.getCmp('panel1');
Ext.Msg.alert('提示',"取得的id为'panel1'的组件的类型为"+comp.getXType());
comp.setTitle("aaaaaa");

//获得id为'panel1'的组件
		var comp = Ext.getCmp('panel1');
		Ext.Msg.alert('提示',"取得的id为'panel1'的组件的类型为"+comp.getXType());
		comp.setTitle("aaaaaa");

5、获取元素的DOM，使用getDom方法

Javascript代码

//获得id为'panel1'的组件的Dom,其执行结果和panel.el.dom相同
var comp = Ext.getDom('panel1');
Ext.Msg.alert('提示',"通过Ext.getDom取得的dom的id:"+comp.id+
"<br>通过另一种方式取得panel的dom其id:"+panel.el.dom.id);

//获得id为'panel1'的组件的Dom,其执行结果和panel.el.dom相同
		var comp = Ext.getDom('panel1');
		Ext.Msg.alert('提示',"通过Ext.getDom取得的dom的id:"+comp.id+
			"<br>通过另一种方式取得panel的dom其id:"+panel.el.dom.id);

6、判断对象是否为空，用isEmpty方法，例如：

Javascript代码

//判断对象是否为空
//当判断字符串时如果第二个参数不不同时结果也会不同
//第二个参数表示'是否允许字符串为空'
Ext.Msg.alert('提示',"我们已经实例化的panel是否为空?"+Ext.isEmpty(panel)+"<br>Ext.isEmpty('',true)的值:"+Ext.isEmpty("",true)+"<br>Ext.isEmpty('',false)的值"+Ext.isEmpty("",false));

//判断对象是否为空
//当判断字符串时如果第二个参数不不同时结果也会不同
//第二个参数表示'是否允许字符串为空'
Ext.Msg.alert('提示',"我们已经实例化的panel是否为空?"+Ext.isEmpty(panel)+"<br>Ext.isEmpty('',true)的值:"+Ext.isEmpty("",true)+"<br>Ext.isEmpty('',false)的值"+Ext.isEmpty("",false));

7、Ext.each方法的使用示例：

Javascript代码

//定义一个集合
var array = [],i;
//为集合加入元素,这些元素为从0到9的数字
for(i=0;i<10;i++){
array.push(i);
}
function fn(item,index,allItems){
//如果跌代对象的元素值大于5则终止跌代执行
if(item>5){
return false;
}else{
//为集合元素中值小于5的元素进行字符串的追加
allItems[index] = item+"_st"
}
}
function fn1(item,index,allItems){
if(index>0)
return false;
//只执行一次
Ext.Msg.alert('最后的处理结果',
"<div style='width:160px'>最后集合为:"+allItems+"</div>");
}
//对集合进行字符串的追加
Ext.each(array,fn);
//打印集合的所有元素值
Ext.each(array,fn1);

//定义一个集合
		var array = [],i;
		//为集合加入元素,这些元素为从0到9的数字
		for(i=0;i<10;i++){
			array.push(i);
		}
		function fn(item,index,allItems){
			//如果跌代对象的元素值大于5则终止跌代执行
			if(item>5){
				return false;
			}else{
				//为集合元素中值小于5的元素进行字符串的追加
				allItems[index] = item+"_st"
			}
		}

		function fn1(item,index,allItems){
			if(index>0)
				return false;
			//只执行一次
			Ext.Msg.alert('最后的处理结果',
				"<div style='width:160px'>最后集合为:"+allItems+"</div>");
		}
		//对集合进行字符串的追加
		Ext.each(array,fn);
		//打印集合的所有元素值
		Ext.each(array,fn1);

8、Ext.apply方法的使用示例：

Javascript代码

//定义两个对象,一个目标对象一个源对象
var tarObj = {},srcObj
srcObj = {};
srcObj.name = "源对象";
srcObj.text = "我的文本内容已经从srcObj中拷贝过来了";
srcObj.width = "130px";
//调用Ext.apply进行处理,从srcObj中拷贝属性到tarObj中
Ext.apply(tarObj,srcObj);
Ext.Msg.alert('Ext.apply示例',"tarObj的属性如下:<br>name:"+
tarObj.name+"<br>text:"+tarObj.text+
"<br>width:"+tarObj.width);

//定义两个对象,一个目标对象一个源对象
var tarObj = {},srcObj
srcObj = {};
srcObj.name = "源对象";
srcObj.text = "我的文本内容已经从srcObj中拷贝过来了";
srcObj.width = "130px";
//调用Ext.apply进行处理,从srcObj中拷贝属性到tarObj中
Ext.apply(tarObj,srcObj);
Ext.Msg.alert('Ext.apply示例',"tarObj的属性如下:<br>name:"+
		tarObj.name+"<br>text:"+tarObj.text+
		"<br>width:"+tarObj.width);

9、Ext.encode方法，将对象转换为字符串

Javascript代码

var person = {name : 'Tom', age: 24};//定义一个json对象
Ext.Msg.alert("提示",Ext.encode(person));//打印将对象转变成字符串

var person = {name : 'Tom', age: 24};//定义一个json对象
Ext.Msg.alert("提示",Ext.encode(person));//打印将对象转变成字符串

10、Ext.htmlDecode方法示例：

Javascript代码

Ext.Msg.alert("提示",Ext.htmlDecode("<table width='240' border='1' id='tab1' cellspacing='2' cellpadding='4'><tr><td>简单的html表格<input type='button' value='按钮'></td></tr></table>"));

Ext.Msg.alert("提示",Ext.htmlDecode("<table width='240' border='1' id='tab1' cellspacing='2' cellpadding='4'><tr><td>简单的html表格<input type='button' value='按钮'></td></tr></table>"));

11、Ext.typeOf方法示例：

Javascript代码

var panel = new Ext.Panel({//实例化了一个对象
className:"test",
title:"示例",
renderTo:'sub1',
width:'300px',
html:"<div id='div1' style='height:200px'></div>"
});
var el = Ext.select(["div1"],true);
var array1 = new Array();//实例化了一个数组
el.on("click",function tes(){
Ext.Msg.alert("提示",'panel的类型是：'+Ext.typeOf(panel)+'，array1的类型是：'+Ext.typeOf(array1));
});

var panel = new Ext.Panel({//实例化了一个对象
	className:"test",
	title:"示例",
	renderTo:'sub1',
	width:'300px',
	html:"<div id='div1' style='height:200px'></div>"
});
var el = Ext.select(["div1"],true);
var array1 = new Array();//实例化了一个数组
el.on("click",function tes(){
	Ext.Msg.alert("提示",'panel的类型是：'+Ext.typeOf(panel)+'，array1的类型是：'+Ext.typeOf(array1));
});

12、Ext.core.DomHelper示例：

Javascript代码

Ext.core.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);
//给id为div1的元素指定一个样式表
//其样式表的形式可以是直接用文本,如:font-size:18px
//也可以用文本表示的对象,如:{font-size:18px;}
Ext.core.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;");
var str = Ext.get("div1").dom.outerHTML;
//由于Ext.Msg.alert会展示alert里的html
//所以我们特意用文本框来展示应用了样式表后的div效果字符串
Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');
//首先通过DomHelper.createTemplate创建一套模板
var test = Ext.core.DomHelper.createTemplate('<div name="{id}">'+
'<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+
'</div>');
//通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现
test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);
//给指定的div1在其后插入一个新的div，类似的有insertBefore方法，insertFirst方法
Ext.core.DomHelper.insertAfter(Ext.get("div1"),{id: 'item2', html: "<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>"});
//给指定的div1在之前插入一个新的html
Ext.core.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本");
//给指定的div1替换新的html
Ext.core.DomHelper.overwrite(document.getElementById("div1"),"我是新替换的Html文本");

Ext.core.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);

//给id为div1的元素指定一个样式表
//其样式表的形式可以是直接用文本,如:font-size:18px
//也可以用文本表示的对象,如:{font-size:18px;}
Ext.core.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;");
var str = Ext.get("div1").dom.outerHTML;
//由于Ext.Msg.alert会展示alert里的html
//所以我们特意用文本框来展示应用了样式表后的div效果字符串
Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');

//首先通过DomHelper.createTemplate创建一套模板
var test = Ext.core.DomHelper.createTemplate('<div name="{id}">'+
	'<span >{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+
	'</div>');
//通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现
test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);

//给指定的div1在其后插入一个新的div，类似的有insertBefore方法，insertFirst方法
Ext.core.DomHelper.insertAfter(Ext.get("div1"),{id: 'item2', html: "<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>"});
//给指定的div1在之前插入一个新的html
Ext.core.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本");
//给指定的div1替换新的html
Ext.core.DomHelper.overwrite(document.getElementById("div1"),"我是新替换的Html文本");

13、DomQuery用法示例：

Javascript代码

//获到所有的以id为div0为父节点的div
//(在第二节中讲述过Ext.query的使用规则,忘记了的读者可以温习一下)
var tarArry = Ext.query('#div0 div');
//选择那些不包含id为div1的节点
var except = Ext.core.DomQuery.filter(tarArry,"#div1",true);
//选择那些包含id为div1的节点
var include = Ext.core.DomQuery.filter(tarArry,"#div1",false);
//对对数组中是否包含指定id的节点进行判断
var isInclude = Ext.core.DomQuery.is(except,'#div0');
//选择以id为divo的所有div子点中的第一个节点
var selectNode = Ext.core.DomQuery.selectNode("#div0 div");
function retStr(array){
var str ="";
for(var i=0;i<array.length;i++){
if(i<array.length-1)
str+=(array[i].id+";");
else
str+=array[i].id;
}
return str;
}
Ext.Msg.alert('返回结果',"不包含id为'div1'的所有div的id为:"+retStr(except)+
"<br>包含id为div1的所有div的id为:"+retStr(include)+
"<br>通过Ext.core.DomHelper.is(except,'#div0')的返回结果"+isInclude+
",<br>表示"+retStr(except)+"是否包含id为div0的节点:"+
"<br>在id为div0的第一个子节点的id是:"+selectNode.id);

//获到所有的以id为div0为父节点的div
		//(在第二节中讲述过Ext.query的使用规则,忘记了的读者可以温习一下)
		var tarArry = Ext.query('#div0 div');
		//选择那些不包含id为div1的节点
		var except = Ext.core.DomQuery.filter(tarArry,"#div1",true);
		//选择那些包含id为div1的节点
		var include = Ext.core.DomQuery.filter(tarArry,"#div1",false);
		//对对数组中是否包含指定id的节点进行判断
		var isInclude = Ext.core.DomQuery.is(except,'#div0');
		//选择以id为divo的所有div子点中的第一个节点
		var selectNode = Ext.core.DomQuery.selectNode("#div0 div");
		function retStr(array){
			var str ="";
			for(var i=0;i<array.length;i++){
				if(i<array.length-1)
					str+=(array[i].id+";");
				else
					str+=array[i].id;
			}
			return str;
		}
		Ext.Msg.alert('返回结果',"不包含id为'div1'的所有div的id为:"+retStr(except)+
				"<br>包含id为div1的所有div的id为:"+retStr(include)+
				"<br>通过Ext.core.DomHelper.is(except,'#div0')的返回结果"+isInclude+
				",<br>表示"+retStr(except)+"是否包含id为div0的节点:"+
				"<br>在id为div0的第一个子节点的id是:"+selectNode.id);

14、Ext.util.CSS示例：

Javascript代码

//通过传递一个样式表描述文本创建一个指定的样式表和id为the绑定在一起
Ext.util.CSS.createStyleSheet(".myclass{color:blue}","the");
var cssObj = Ext.util.CSS.getRule(".myclass",true);
Ext.Msg.alert('获取的信息','创建样式表<br>获取myclass样式表中规则的字体颜色:'+cssObj.style.color);
Ext.util.CSS.createStyleSheet(".a1{font-size:12px;color:blue;}","thecss");
var pan = new Ext.panel.Panel({
title:'添加css并移除',
html:'首先我们添加一个样式,然后移除他'
,
height:200,
width:300,
cls: 'a1'
});
pan.render("hr_panel");
setBtn = new Ext.button.Button(
text : '移除样式',
width : 50,
handler : function(){
Ext.util.CSS.removeStyleSheet("thecss");
}
});
setBtn.render("setBut");
//定义使用改变个性化定制的控件
//该控制实际上为一个可供选择样式表值的下拉框
//当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径
Ext.onReady(function(){
var themes = [
{theme:'默认', css:'ext-all.css'},
{theme:'黑色',css: 'ext-all-access.css'},
{theme:'红色',css: 'ext-all-red.css'}];
//创建主题数据模型
Ext.regModel('Theme', {
fields: ['theme','css']
});
//创建主题数据源
var themeStore = Ext.create('Ext.data.Store',{
model : 'Theme',
data : themes
});
//创建主题切换选择框
var themeChange = Ext.create('Ext.form.ComboBox',{
id : 'themeChange',
width : 150,
labelWidth : 60,
labelSeparator :'：',//分隔符
fieldLabel:'样式选择',
store : themeStore,
editable : false,
triggerAction: 'all',//单击触发按钮显示全部数据
store : themeStore,//设置数据源
displayField : 'theme',
valueField : 'css',
queryMode: 'local',//本地模式
value:'ext-all.css',//默认风格
listeners : {
'collapse' : function() {
Ext.util.CSS.swapStyleSheet('theme', 'extjs4/resources/css/'+ this.getValue());
contentIframe.window.themeChange(this.getValue());
}
}
});
//定义panel
Ext.create('Ext.form.FormPanel',{
title:'Ext.form.ComboBox本地数据源示例',
renderTo: Ext.getBody(),
bodyPadding: 5,
frame : true,
height:100,
width:270,
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:themeChange
});
});

//通过传递一个样式表描述文本创建一个指定的样式表和id为the绑定在一起
Ext.util.CSS.createStyleSheet(".myclass{color:blue}","the");
var cssObj = Ext.util.CSS.getRule(".myclass",true);
Ext.Msg.alert('获取的信息','创建样式表<br>获取myclass样式表中规则的字体颜色:'+cssObj.style.color);

Ext.util.CSS.createStyleSheet(".a1{font-size:12px;color:blue;}","thecss");
var pan = new Ext.panel.Panel({
	title:'添加css并移除',
	html:'首先我们添加一个样式,然后移除他'
,
			height:200,
			width:300,
			cls: 'a1'
});
pan.render("hr_panel");

setBtn = new Ext.button.Button(
	text : '移除样式',
	width : 50,
	handler : function(){
		Ext.util.CSS.removeStyleSheet("thecss");
	}
});
setBtn.render("setBut");

//定义使用改变个性化定制的控件
//该控制实际上为一个可供选择样式表值的下拉框
//当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径
Ext.onReady(function(){
	var themes = [
			{theme:'默认', css:'ext-all.css'},
			{theme:'黑色',css: 'ext-all-access.css'},
			{theme:'红色',css: 'ext-all-red.css'}];
		//创建主题数据模型
		Ext.regModel('Theme', {
		    fields: ['theme','css']
		});
		//创建主题数据源
		var themeStore = Ext.create('Ext.data.Store',{
			model : 'Theme',
			data : themes
		});
		//创建主题切换选择框
		var themeChange = Ext.create('Ext.form.ComboBox',{
			id : 'themeChange',
			width : 150,
			labelWidth : 60,
			labelSeparator :'：',//分隔符
			fieldLabel:'样式选择',
			store : themeStore,
			editable : false,
			triggerAction: 'all',//单击触发按钮显示全部数据
			store : themeStore,//设置数据源
			displayField : 'theme',
			valueField : 'css',
			queryMode: 'local',//本地模式
			value:'ext-all.css',//默认风格
			listeners : {
				'collapse' : function() {
					Ext.util.CSS.swapStyleSheet('theme', 'extjs4/resources/css/'+ this.getValue());
					contentIframe.window.themeChange(this.getValue());
				}
			}
		});
		//定义panel
		Ext.create('Ext.form.FormPanel',{
			title:'Ext.form.ComboBox本地数据源示例',
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			frame : true,
			height:100,
			width:270,
			defaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 70,//标签宽度
				width : 200,//字段宽度
				labelAlign : 'left'//标签对齐方式
			},
			items:themeChange
		});
});

15、格式化字符串示例：

Javascript代码

var str = "<table width='300' cellspacing=1 border=1 cellpadding=1><tr><td>table string</td></tr></table>";
var str1 = " aV";
var dat = new Date();
var str2 = 12345;
var str3 = 1.2345;
Ext.Msg.alert(
"提示",
"原str为:"+str+"<br>ellipsis(str,5)后为:<br>"+Ext.util.Format.ellipsis(str,5)+"<br><br>"+
"原strl为:"+str1+"<br>进行capitalize(str1)后为:<br>"+Ext.util.Format.capitalize(str1)+"<br>"+
"<br>原dat为:<br>"+dat+"<br>"+
"进行date(dat,'yyyy/mm/dd')后为:<br>"+Ext.util.Format.date(dat)+"<br><br>"+
"注意调用htmlDecode(str)后展现出来的是一个带边框的表格:<br>"+Ext.util.Format.htmlDecode(str)+"<br>"+
"原strl:"+str1+"<br>经过lowercase后为:<br>"+Ext.util.Format.lowercase (str1)+
"<br>原str2:"+str2+",经过number后为:"+Ext.util.Format.number(str2,"-1234.0")+
"<br>原str3:"+str2+",经过number后为:"+Ext.util.Format.round(str3,2)
);
//通过用字符串描述一个对象
var jsonStr = "{name:'the json name', value: 'the json sample'}";
//将该字符串进行编码，这时将形成一个含有逻辑关系的对象
var obj = Ext.JSON.decode(jsonStr,true);
//定义一些对象，最后用数组包装起来
var g='g',h='h',e =[g,h],f='f',b=[e,f],a = [b,'c'];
//将该数组中存放的对象进行解码，打印该字符串
var endA = Ext.JSON.encode(a);
Ext.Msg.alert('提示',endA);

var str = "&lt;table width='300' cellspacing=1 border=1 cellpadding=1><tr><td>table string</td></tr></table>";
var str1 = " aV";
var dat = new Date();
var str2 = 12345;
var str3 = 1.2345;
Ext.Msg.alert(
	"提示",
	"原str为:"+str+"<br>ellipsis(str,5)后为:<br>"+Ext.util.Format.ellipsis(str,5)+"<br><br>"+
	"原strl为:"+str1+"<br>进行capitalize(str1)后为:<br>"+Ext.util.Format.capitalize(str1)+"<br>"+
	"<br>原dat为:<br>"+dat+"<br>"+
	"进行date(dat,'yyyy/mm/dd')后为:<br>"+Ext.util.Format.date(dat)+"<br><br>"+
	"注意调用htmlDecode(str)后展现出来的是一个带边框的表格:<br>"+Ext.util.Format.htmlDecode(str)+"<br>"+
	"原strl:"+str1+"<br>经过lowercase后为:<br>"+Ext.util.Format.lowercase (str1)+
	"<br>原str2:"+str2+",经过number后为:"+Ext.util.Format.number(str2,"-1234.0")+
	"<br>原str3:"+str2+",经过number后为:"+Ext.util.Format.round(str3,2)
);		

//通过用字符串描述一个对象
var jsonStr = "{name:'the json name', value: 'the json sample'}";
//将该字符串进行编码，这时将形成一个含有逻辑关系的对象
var obj = Ext.JSON.decode(jsonStr,true);
//定义一些对象，最后用数组包装起来
var g='g',h='h',e =[g,h],f='f',b=[e,f],a = [b,'c'];
//将该数组中存放的对象进行解码，打印该字符串
var endA = Ext.JSON.encode(a);
Ext.Msg.alert('提示',endA);

16、MixedCollection示例(还有first，get等方法):

Javascript代码

var item = new Ext.util.MixedCollection();
var item2 = new Ext.util.MixedCollection();
var a = {name:'a'};
var b = {name:'b'};
item.add('01',a);
item.add('01',b);
item2.add('01',a);
item2.add('02',a);
Ext.Msg.alert('提示','当已存在关联的索引时往01关联以象,item的个数为:'+item.length+'<br>'+'当不存在关联的索引往索引关联对象,item的个数为:'+item2.length);

var item = new Ext.util.MixedCollection();
var item2 = new Ext.util.MixedCollection();
var a = {name:'a'};
var b = {name:'b'};
item.add('01',a);
item.add('01',b);
item2.add('01',a);
item2.add('02',a);
Ext.Msg.alert('提示','当已存在关联的索引时往01关联以象,item的个数为:'+item.length+'<br>'+'当不存在关联的索引往索引关联对象,item的个数为:'+item2.length);

Javascript代码

var item = new Ext.util.MixedCollection();
var arr = [];
arr.push({name:'a'});
arr.push({name:'b'});
item.addAll(arr);
Ext.Msg.alert('提示','原item中的对象个数为:'+item.length+'<br>当加入arr数组中的两个对象后item中的对象个数为:'+item.length);

var item = new Ext.util.MixedCollection();
		var arr = [];
		arr.push({name:'a'});
		arr.push({name:'b'});
		item.addAll(arr);
		Ext.Msg.alert('提示','原item中的对象个数为:'+item.length+'<br>当加入arr数组中的两个对象后item中的对象个数为:'+item.length);

Javascript代码

var item = new Ext.util.MixedCollection();
var arr = [{name:'a'},{name:'b'}];
item.clear();
Ext.Msg.alert('提示','当调用clear()后item的对象个数为:'+item.length);

var item = new Ext.util.MixedCollection();
var arr = [{name:'a'},{name:'b'}];
item.clear();
Ext.Msg.alert('提示','当调用clear()后item的对象个数为:'+item.length);

Javascript代码

var item = new Ext.util.MixedCollection();
item.addAll([{name:'a'},{name:'b'}]);
var col = new Ext.util.MixedCollection();
col = item.clone();
item.clear();
Ext.Msg.alert('提示','当调用item的clone()后返回的col的对象个数为:'+col.length);

var item = new Ext.util.MixedCollection();
item.addAll([{name:'a'},{name:'b'}]);
var col = new Ext.util.MixedCollection();
col = item.clone();
item.clear();
Ext.Msg.alert('提示','当调用item的clone()后返回的col的对象个数为:'+col.length);

Javascript代码

var item = new Ext.util.MixedCollection();
var obja = {name:'a'};
item.add('obj1',obja);
Ext.Msg.alert('提示','集合中是否含有以obj1为关联索引的对象:'+item.containsKey('obj1')+'<br>集合中是否含有对象obja:'+item.contains(obja));

var item = new Ext.util.MixedCollection();
var obja = {name:'a'};
item.add('obj1',obja);
Ext.Msg.alert('提示','集合中是否含有以obj1为关联索引的对象:'+item.containsKey('obj1')+'<br>集合中是否含有对象obja:'+item.contains(obja));

Javascript代码

var item = new Ext.util.MixedCollection();
var obja = {name:'a'};
item.add('obj1',obja);
item.add('obj2',{name:'b'});
item.each(function(tempObj){
tempObj.name='newA';
Ext.Msg.alert('提示','通过调用each后的名称为:'+tempObj.name);
});

var item = new Ext.util.MixedCollection();
var obja = {name:'a'};
item.add('obj1',obja);
item.add('obj2',{name:'b'});
item.each(function(tempObj){
	tempObj.name='newA';
	Ext.Msg.alert('提示','通过调用each后的名称为:'+tempObj.name);
});

Javascript代码

var item = new Ext.util.MixedCollection();
item.on('add',function(index,o,key){
Ext.Msg.alert('提示','    当前有对象加入,加入后的index是:'+index+'<br>    该对象的name是:'+o.name+'<br>    加入对应的key是:'+key);
});
item.add('obj2key',{name:'nobj2name'});

var item = new Ext.util.MixedCollection();
item.on('add',function(index,o,key){
	Ext.Msg.alert('提示','&nbsp;&nbsp;&nbsp;&nbsp;当前有对象加入,加入后的index是:'+index+'<br>&nbsp;&nbsp;&nbsp;&nbsp;该对象的name是:'+o.name+'<br>&nbsp;&nbsp;&nbsp;&nbsp;加入对应的key是:'+key);
});
item.add('obj2key',{name:'nobj2name'});

Javascript代码

var item = new Ext.util.MixedCollection();
item.on('remove',function(o,key){
Ext.Msg.alert('提示','当前移除的对象的name是:'+o.name+'<br>其key是:'+key);
});
item.add('obj2key',{name:'nobj2name'});
item.removeAtKey('obj2key');

var item = new Ext.util.MixedCollection();
item.on('remove',function(o,key){
	Ext.Msg.alert('提示','当前移除的对象的name是:'+o.name+'<br>其key是:'+key);
});
item.add('obj2key',{name:'nobj2name'});
item.removeAtKey('obj2key');

Javascript代码

var item = new Ext.util.MixedCollection();
var obj1 = {name:'obj1Name'};
var obj2 = {name:'obj2Name'};
item.add('obj1Key',obj1);
item.replace('obj2Key',obj1);
item.on('replace',function(key, oldO, newO){
Ext.Msg.alert('提示','当前被替换的对象的name是:'+oldO.name+'<br>其key是:'+key+'<br>新对象的name是:'+newO.name);
});
item.replace('obj2Key',obj2);

var item = new Ext.util.MixedCollection();
var obj1 = {name:'obj1Name'};
var obj2 = {name:'obj2Name'};
item.add('obj1Key',obj1);
item.replace('obj2Key',obj1);
item.on('replace',function(key, oldO, newO){
	Ext.Msg.alert('提示','当前被替换的对象的name是:'+oldO.name+'<br>其key是:'+key+'<br>新对象的name是:'+newO.name);
});
item.replace('obj2Key',obj2);

17、线程运行实例：

Javascript代码

var task ={
run:function(){
Ext.Msg.alert('提示','线程已经运行!我将每次运行将重复5次!但10秒后我将停止!');
},
interval:1000,
repeat:5,
duration:10000
};
var task1 = new Ext.util.TaskRunner();
task1.start(task);

var task ={
	run:function(){
		Ext.Msg.alert('提示','线程已经运行!我将每次运行将重复5次!但10秒后我将停止!');
	},
	interval:1000,
	repeat:5,
	duration:10000
};
var task1 = new Ext.util.TaskRunner();
task1.start(task);

18、获得文本块的高和宽示例：

Javascript代码

var t = new Ext.util.TextMetrics('id01',5);
Ext.Msg.alert("测试","通过getSize('the text')取得的文本块的宽度是:"+t.getSize('the text').width+
"<br>通过getHeight('new text test')取得的文本块的高度是:"+t.getHeight('new text test')+
"<br>measure('id01','重新测试方法',3)方法测试"+Ext.util.TextMetrics.measure('id01','重新测试方法',3).width);

var t = new Ext.util.TextMetrics('id01',5);
Ext.Msg.alert("测试","通过getSize('the text')取得的文本块的宽度是:"+t.getSize('the text').width+
"<br>通过getHeight('new text test')取得的文本块的高度是:"+t.getHeight('new text test')+
"<br>measure('id01','重新测试方法',3)方法测试"+Ext.util.TextMetrics.measure('id01','重新测试方法',3).width);

19、键盘绑定对象示例：

Javascript代码

var el = Ext.get("id01");
var nav = new Ext.KeyNav(el,{
"left" : function(e){
alert('向左的按键被按下了');
//this.moveLeft(e.ctrlKey);
},
"right" : function(e){
alert('向右的按键被按下了');
//this.moveRight(e.ctrlKey);
},
"enter" : function(e){
alert('回车键被按下了');
//this.save();
},
scope : el
});
nav.enable();

本文链接