一。extjs例子。
1。新建一个helloworld目录,helloworld目录下新建一个helloworld.html文件,将下列内容复制进index.html文件中
<link rel="stylesheet" type="text/css" href="ext/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/examples.js"></script>
<link rel="stylesheet" type="text/css" href="ext/css/examples.css" />
<script>
Ext.onReady(function(){
Ext.MessageBox.alert('helloworld', 'Hello World.');
});
</script>
2。双击helloworld.html打开页面,效果如下:
2。Grid例子:
◆导入文件如上略。
◆<script>
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//建立一个三列的表格
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id' sortable:true},//sortable属性是排序
{header:'性别',dataIndex:'sex',renderer: renderSex },
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
//定义数据
var data = [
['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];
//转化
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load();
或使用Ext.data.SimpleStore
/** proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。
Ext.data.MemoryProxy,它是专门用来解析js变量的,Ext.data.ArrayReader专门用来解析数组。ds.load(),对数据进行初始化
用mapping来改变列序。如:
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id', mapping: 1},
{name: 'sex' mapping:0 },
{name: 'name', mapping: 2},
{name: 'descn', mapping: 3}
])
});
*/
//装配
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm
});
grid.render();
/**
Ext.grid.Grid的第一个参数是渲染的id,对应在html里应该有一个 <div id="grid"></div>的东西,这样grid才知道要把自己画到哪里。
*/
//判断是男是女,然后配上颜色
function renderSex(value) {
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>红男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>绿女</span>";
}
}
</script>
◆效果图如下:
■ 使用renderer函数:
1.自动行号
var cm = new Ext.grid.ColumnModel([
{header:'NO.',renderer:function(value, cellmeta, record, rowIndex){
return rowIndex + 1;
}}//此为EXT1.X
new Ext.grid.RowNumberer(),//此为EXT2.X
…略
]);
2. 显示颜色,链接,图片,按钮等
{header:'描述',renderer: renderDescn }
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
"这个单元格的值是:" + value + "\\n" +
"这个单元格的配置是:{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
"这个单元格对应行的record是:" + record + ",一行的数据都在里边\\n" +
"这是第" + rowIndex + "行\\n" +
"这是第" + columnIndex + "列\\n" +
"这个表格对应的Ext.data.Store在这里:" + store + ",随便用吧。" +
"\")'>";
return str;
} //效果图:
■全选checkbox: checkboxSelectionModel
var sm = new Ext.grid.CheckboxSelectionModel();//ext2.0
l sm身兼两职,使用的时候既要放到cm里,也要放到grid中。代码如下。
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
sm: sm
});
/** ext 1.x
{header:'<input type="checkbox" onclick="selectAll(this)">',renderer:function(value, cellmeta, record, rowIndex){
return '<input type="checkbox" name="cb">';
}},
*/
l 效果图:
■ 分页工具条:
★ EXT1.X
//获取grid下边放工具条工具的面板容器,
var gridFoot = grid.getView().getFooterPanel(true);
//得工具条
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 10,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: '没有记录'
});
/**
在gridFoot上显示,对ds也进行操作, displayInfo如果是false就不会显示提示信息。 displayMsg,只有在displayInfo:true的时候才有效,用来显示有数据的时候的提示信息.emptyMsg,要是没数据就显示这个
*/
★EXT2.0
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录"
})
});
ds.load();
分享到:
相关推荐
NULL 博文链接:https://lionelxx777.iteye.com/blog/359860
ext学习笔记代码 ext学习笔记代码 ext学习笔记代码
在阅读《Gwt-ext学习笔记.pdf》这份资料时,应重点学习上述知识点,并通过实践项目来加深理解。同时,关注Gwt-ext的更新和社区资源,以便获取最新的API信息和最佳实践。不断练习和探索,你将能够熟练运用Gwt-ext构建...
这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 Ext JS4学习教程+笔记(六)DataView面板 Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 ...Ext学习网址
这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...
里面包括Ext学习.doc和Ext学习笔记.doc两份资料。来自网上。
### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅,首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具,它能帮助开发者更高效地进行GWT项目的开发。 1....
以下是对EXT学习笔记中涉及的关键知识点的详细说明: 1. **EXT Form**: EXT中的表单组件是构建用户交互界面的重要部分。它们允许用户输入数据并将其提交到服务器。EXT Form支持多种字段类型,如文本框、选择框、...
在EXT学习笔记中,"What_is_that_Scope_all_about2.htm"可能涉及的是JavaScript作用域和EXT中的scope概念,这对于理解和调试EXT应用中的事件处理和回调函数至关重要。"JsonTool.htm"可能介绍了EXT如何与JSON数据进行...
EXT学习笔记,是本人在一个月的学习期间整理的
在GWT-Ext的学习过程中,首先你需要了解如何定义和实现远程服务。这是GWT的一个核心特性,它允许客户端和服务器之间的安全通信。在GWT中,远程服务调用通常涉及以下几部分: 1. **远程服务接口(Remote Service ...