标签归档:ExtJS

Eclipse-Extjs插件之JSEclipse

使用 JSEclipse,JavaScript 程序员现在有了自己的 Eclipse 插件,该插件将提供许多重要功能来辅助开发 JavaScript 应用程序。像 Eclipse 多年来为 Java™ 语言和其他语言提供了易用性一样,JSEclipse 为 JavaScript 开发人员提供了同样的优点。

获得 JSEclipse

如果尚未安装 Eclipse IDE,请立即安装(请参阅 系统要求 )。本教程使用的是 Eclipse V3.3.1.1,因此如果遇到插件安装问题,则可以尝试安装该版本。

下一步是获得 JSEclipse 插件。完成该操作的最简单方法是使用 Eclipse 的内置更新系统:

  1. 安装 Eclipse。
  2. 启动 Eclipse。
  3. 如果有必要,请选择 “Go to Workbench”。
  4. 从 Workbench 菜单中,选择 Help > Software Updates > Find and Install
  5. 选择 Search for new features to install
  6. 单击 Next 继续创建一个新更新站点。

创建新更新站点

新功能和插件托管在特定的更新站点中。Eclipse 安装中预先配置了这其中的一些站点,但是需要为 JSEclipse 添加一个新更新站点:

  1. 单击窗口右侧的 New Update Site
  2. 输入名称 JSEclipse(或者记得住的任何其他名称)以及 URLhttp://download.macromedia.com/pub/labs/jseclipse/autoinstall 
  3. 单击 OK 将新站点添加到列表中。

安装 JSEclipse

新站点就绪后,可以使用它安装 JSEclipse:

  1. 确保通过选中新站点旁边的复选框选中要更新的新站点,然后单击 Finish
  2. JSEclipse 是托管在此站点中的惟一一个功能,因此它应当十分易于查找。选择 JSEclipse 功能并单击 Next
    接受许可证协议并单击 Next
  3. 检验 Eclipse 安装位置并单击 Finish
  4. 出于安全(以及代码完整性)原因,实际安装将查看功能是否已被签名。它尚未被签名,因此请确认是否需要安装这个未签名的功能,如图 5 所示,然后单击 Install

安装完成后,单击 Apply Changes。应当不必重新启动 Eclipse,但是如果 Eclipse 运行不正常,则最好重新启动。

现在 JSEclipse 已经安装,接下来需要进行配置。

配置 JSEclipse

使用 JSEclipse 插件可以让您很好地控制用户体验。要配置 JSEclipse,请选择Window > Preferences > JSEclipse 打开首选项。

JSEclipse 首选项有四种。

General 首选项
这些是首选项,例如弹出自动完成下拉菜单需要等待的时间、是否执行错误报告以及是否突出显示当前变量的其他出现位置。
Syntax coloring
使用 JSEclipse 不但可以完全控制彩色编码内容,例如函数名、变量等,而且还可以完全控制哪个颜色代表哪个条目,以便可以更轻松地阅读,或者匹配现有颜色模式,比方说,来自另一个编辑器。
Templates
正如您将在 使用代码模板轻松编程:多维数组 部分中看到的那样,JSEclipse 包括常用类型的代码模板,例如 for 循环、函数等。使用此模板可以激活或者取消激活现有模板,并且可以根据需要导入新模板。
Typing
使用 IDE 的优点之一是可以自动化完成诸如添加结束括号之类的任务。如果您觉得使用该功能会让自己变得懒惰,则可以在这里的首选项中关闭此功能。

接下来,需要设置 Eclipse 使用该插件。

将 JSEclipse 设为 JavaScript 编辑器

需要告诉 Eclipse 它有一个 JavaScript 文件的专用编辑器,这样它将不使用通用文本编辑器。选择 Window > Preferences > General > Editors > File Associations。高亮选中 *.js 文件扩展名并确保 JSEclipse 是相关编辑器。

如果没有 *.js 扩展名,请单击顶部的 Add 按钮,然后将该扩展名添加到对话框中。如果 *.js 扩展名没有用 JSEclipse 作为其默认编辑器,请单击底部的 Add 按钮。选择 Internal Editors > JSEclipse HTML Editor 并单击 Add 将其设为默认值。

来自JustJava:http://www.blogjava.net/zJun/archive/2008/01/29/178386.html

extjs grid renderer用法

今天在做项目时,需要在列表中的某列添加一个超链接,首先要取得当前选中行的数据,判断数据类型,然后链接到不同的页面,研究下。发现ExtJs提供了一个很强的方法如下:

var cm = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer({ header: “”, width: 20, align: ‘center’ }),
{ header: ”, align: ‘center’, dataIndex: ‘AccountAndRoseID’, width: 50, sortable: true, hidden: true },
{ header: ”, align: ‘center’, dataIndex: ‘UserAccountId’, width: 50, sortable: true, hidden: true },
{ header: ‘帐号’, align: ‘center’, dataIndex: ‘UserAccountName’, width: 200, sortable: true },
{ header: ‘角色名’, align: ‘center’, dataIndex: ‘UserRoleName’, width: 200, sortable: true },
{ header: ‘状态’, align: ‘center’, dataIndex: ‘UserAccountStateId’, width: 200, sortable: true, hidden: true, renderer: function() }
]

renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子(我目前是这么理解的)
先看下renderer: function()里的参数

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){

}
1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id,id不知道是干啥的,似乎是列号,css是这个单元格的css样式。
3.record是这行的所有数据,你想要什么,record.data[“id”]这样就获得了。
4.rowIndex是行号,不是从头往下数的意思,而是计算了分页以后的结果。
5.columnIndex列号太简单了。
6.store,这个厉害,实际上这个是你构造表格时候传递的ds,也就是说表格里所有的数据,你都可以随便调用,唉,太厉害了。

网上找到一篇博文,非常不错,直观明了:

<html>
<head>
<meta http-equiv=”Content-Type” c>
<title>03.grid</title>
<link rel=”stylesheet” type=”text/css” href=”../../../resources/css/ext-all.css” />
<script type=”text/javascript” src=”../../adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”../../ext-all.js”></script>
<script type=”text/javascript”>
Ext.onReady(function(){
/*
var cm = new Ext.grid.ColumnModel([
{header:’编号’,dataIndex:’id’},
{header:’性别’,dataIndex:’sex’,renderer:function(value){
if (value == ‘male’) {
return “<span style=’color:red;font-weight:bold;’>红男</span>”;
} else {
return “<span style=’color:green;font-weight:bold;’>绿女</span>”;
}
}},
{header:’名称’,dataIndex:’name’},
{header:’描述’,dataIndex:’descn’}
]);
*/
function renderSex(value) {
if (value == ‘male’) {
return “<span style=’color:red;font-weight:bold;’>红男</span><img src=’user_male.png’ />”;
} else {
return “<span style=’color:green;font-weight:bold;’>绿女</span><img src=’user_female.png’ />”;
}
}

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = “<input type=’button’ value=’查看详细信息’ >”;
return str;
}

var cm = new Ext.grid.ColumnModel([
{header:’编号’,dataIndex:’id’},
{header:’性别’,dataIndex:’sex’,renderer:renderSex},
{header:’名称’,dataIndex:’name’},
{header:’描述’,dataIndex:’descn’,renderer:renderDescn}
]);

var data = [
[‘1′,’male’,’name1′,’descn1′],
[‘2′,’female’,’name2′,’descn2′],
[‘3′,’male’,’name3′,’descn3′],
[‘4′,’female’,’name4′,’descn4′],
[‘5′,’male’,’name5′,’descn5′]
];

var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: ‘id’},
{name: ‘sex’},
{name: ‘name’},
{name: ‘descn’}
])
});
store.load();

var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: ‘grid’,
store: store,
cm: cm
});

});
</script>
</head>
<body>
<script type=”text/javascript” src=”../examples.js”></script>
<div id=”grid”></div>
</body>
</html>