ext学习笔记1
一。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(){<span style="" />
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());<span style="" />
<span style="font-size: small;">//建立一个三列的表格
var cm = new Ext.grid.ColumnModel([<span style="" />
{header:'编号',dataIndex:'id' sortable:true},//sortable属性是排序
<span style="font-size: small;">{header:'性别',dataIndex:'sex',renderer: renderSex },
{header:'名称',dataIndex:'name'},<span style="" />
{header:'描述',dataIndex:'descn'}<span style="" />
]);
//定义数据<span style="" />
var data = [ ['1','male','name1','descn1'], ['2','female','name2','descn2'], ['3','male','name3','descn3'], ['4','female','name4','descn4'], ['5','male','name5','descn5']]; <span style="font-size: small;">//转化
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}
])
<span style="font-size: small;">});
*/
<span style="font-size: small;">//装配
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm
});
grid.render();
/**
<span style="font-size: small;">Ext.grid.Grid的第一个参数是渲染的id，对应在html里应该有一个 <div id="grid"></div>的东西，这样grid才知道要把自己画到哪里。
*/
<span style="font-size: small;">//判断是男是女，然后配上颜色
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>
◆效果图如下:
<span style="" />
■ 使用renderer函数:
<span style="font-size: small;">1.自动行号
var cm = new Ext.grid.ColumnModel([ {header:'NO.',renderer:function(value, cellmeta, record, rowIndex){ return rowIndex + 1;}}//此为EXT1.X<span style="font-size: small;">new Ext.grid.RowNumberer(),//此为EXT2.X<span style="">…略]);<span style="">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;} //效果图:<span style="" />
■全选checkbox: checkboxSelectionModelvar sm = new Ext.grid.CheckboxSelectionModel();//ext2.0l 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" >',renderer:function(value, cellmeta, record, rowIndex){ return '<input type="checkbox" name="cb">';<span style=""> }},*/
l 效果图:
<span style="font-size: small;">■ 分页工具条:
★ EXT1.X
//获取grid下边放工具条工具的面板容器，
var gridFoot = grid.getView().getFooterPanel(true);<span style="">//得工具条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();
页:
[1]