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(){

    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='查看详细信息' οnclick='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" οnclick="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();