ext学习笔记1

xiaofen3115

一。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();