ExtJS 2.0快速入门-优快云博客

一。搭建环境 ext2.0
1. 新建一个web工程
2. 将adatper包 resource包 ext-all.js copy进来
3. 在页面中引入ext

    <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
    <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="./ext/ext-all.js"></script>

4.为了方面使用引入spKet插件
    1> 打开 cmd , 到spket-1.6.11.jar所在的目录输入 java -jar spket-1.6.11.jar就会出来安装界面
    2> 选eclipse插件目录指向myEclipse下eclips
    ok

5.打开myEclipse 在window->preferences->spket->javascript profiles
    1> 选择new 随便输个名字
    2> 选择add library 选中刚才输入的名字
    3> 选择add File 指向ext-2.0/source/ext.jsb
    4> 给每个都打钩一定要按从上到下的顺序！！！
    5> 选择default
    ok

6. 重启myEclipse后就可以弹出ext的元素了
    在window->general->keys->Content assist 可以看到按什么快捷键弹出


二.初步接触ext控件
界面一开始加载的方法
1.Ext.onReady(function(){

});

2.Ext.Msg.alert("hello world"); 弹出一个框

3.面板
var panel = new Ext.Panel({
    id:'hello world',
    title:'hello world title',
    width:200,
    height:300
});
显示面板在id="hello"的div中
panel.render("hello");

4.框架
var viewPort = new Ext.Viewport({
    id:'desk',
    layout:'border',
    items:[{region:'north',height:80},{region:'west',width:200},{region:'center'}]
});

三.grid控件

1.colunModel 表头信息
    header: 显示的文本
    dataIndex: 和Ext.data.Store中的数据对应

    var cm = new Ext.grid.ColumnModel([
    {
        header:"id",
        dataIndex:"id"
    },
    {
        header:"姓名",
        dataIndex:"name"
    },
    {
        header:"email",
        dataIndex:"email"
    },
    {
        header:"性别",
        dataIndex:"sex"
    },
    {
        header:"年龄",
        dataIndex:"age"
    }
    ]);

2. fields 以一个数组的形式返回字段定义对象,或字段名字符串
    var fields = ["id","name","email","sex","age"];

3. data 嵌入的数据
    1>数组格式
        var data = [
        ["1","wp1","wp1@sina.com","0","20"],
        ["2","wp2","wp2@sina.com","0","21"],
        ["3","wp3","wp3@sina.com","1","22"],
        ["4","wp4","wp4@sina.com","0","23"],
        ["5","wp5","wp5@sina.com","1","24"]
        ];

    2>Json格式
        var data={result:[
        {
            id:"1",
            name:"wp1",
            email:"wp1@sinam.com",
            sex:"0",
            age:"20"
        },
        {
            id:"2",
            name:"wp2",
            email:"wp1@sinam.com",
            sex:"0",
            age:"20"
        },
        {
            id:"3",
            name:"wp3",
            email:"wp1@sinam.com",
            sex:"0",
            age:"20"
        },
        {
            id:"4",
            name:"wp4",
            email:"wp1@sinam.com",
            sex:"0",
            age:"20"
        },
        {
            id:"5",
            name:"wp5",
            email:"wp1@sinam.com",
            sex:"0",
            age:"20"
        }
        ]};

4.Store 这个类封装了一个客户端缓存的记录数据对象组成的输入
    1>SimpleStore 使用数组数据更容易
        var store = new Ext.data.SimpleStore({
            id:"id",
            data:data,
            fields:fields,
        });

    2>JsonStore    JSON使用数据更容易
        var store = new Ext.data.JsonStore({
            id:"id",
            data:data,
            fields:fields,
            root:"result",
        });

    3>url 从另一个JS中引入数据
        JsonStore的data中支持metaData属性，可以将root,totalProperty,fields封装到数据中

        grid-data.js如下
        {
            metaData:{
            totalProperty:"total",
            root:"result",
            fields:["id","name","email","sex","age"]
        },
            total:100,
            result:[{
                id:"1",
                name:"wp1",
                email:"wp1@sinam.com",
                sex:"0",
                age:"20"
            },{
                id:"2",
                name:"wp2",
                email:"wp1@sinam.com",
                sex:"0",
                age:"20"
            },{
                id:"3",
                name:"wp3",
                email:"wp1@sinam.com",
                sex:"0",
                age:"20"
            },{
                id:"4",
                name:"wp4",
                email:"wp1@sinam.com",
                sex:"0",
                age:"20"
            },{
                id:"5",
                name:"wp5",
                email:"wp1@sinam.com",
                sex:"0",
                age:"20"
            }]
        }

        index.js引入:
        var store = new Ext.data.Store({
            url:"js/grid-data.js",   //因为是在index.jsp中引入index.js 所以是以index.jsp为根基准的
            reader:new Ext.data.JsonReader({}) //都封装在数据中所以什么都可以不写
            //autoLoad:ture
        });
        store.load(); //加载后才能显示,也可以在上面设置 autoLoad:ture 效果一样

    4>proxy
        如果指定了url没有指定proxy,会自动将url作为proxy使用
        也可以proxy:new Ext.data.HttpProxy({url: "js/grid-data.xml"}),手动指定

5.DataReader 数据解析器
    1>JsonReader 按Json格式解析对应JsonStore
        var store = new Ext.data.Store({
            data:data,
            reader:new Ext.data.JsonReader({id:"id",root:"result"},fields)
        });

    2>ArrayReader 按数组解析对应ArrayStore
        var store = new Ext.data.Store({
        data:data,
        reader:new Ext.data.ArrayReader({id:"id"},fields)
        });

    3>xmlReader 按xml文件解析
        totalRecords对应总记录数,record对应一条数据,指定的值对应xml文件的标签
        var store = new Ext.data.Store({
            url:"js/grid-data.xml",
            reader:new Ext.data.XmlReader({id:"id",totalRecords:"total",record:"row"},fields)
        });
        store.load();

        grid-data.xml如下:
    <?xml version="1.0" encoding="UTF-8"?>
    <dataset>
        <total>100</total>
        <row>
            <id>1</id>
            <name>wp1</name>
            <email>wp1@sina.com</email>
            <sex>0</sex>
            <age>20</age>
        </row>
        <row>
            <id>2</id>
            <name>wp1</name>
            <email>wp1@sina.com</email>
            <sex>0</sex>
            <age>20</age>
        </row>
        <row>
            <id>3</id>
            <name>wp1</name>
            <email>wp1@sina.com</email>
            <sex>0</sex>
            <age>20</age>
        </row>
        <row>
            <id>4</id>
            <name>wp1</name>
            <email>wp1@sina.com</email>
            <sex>0</sex>
            <age>20</age>
        </row>
        <row>
            <id>5</id>
            <name>wp1</name>
            <email>wp1@sina.com</email>
            <sex>0</sex>
            <age>20</age>
        </row>
    </dataset>

6.GridPanel 表格面板
    var grid = new Ext.grid.GridPanel({
        title:"grid",
        width:600,
        height:200.
        cm:cm,
        store:store
    });

    grid.render(Ext.getBody()); 显示

7. 列渲染,性别字段数据库为0和1 显示男和女
    function formatSex(value){
        return value=="0"?"男":"女";
    }

    在cm中 sex段加上
    renderer:formatSex

8。复选框，全选
    1> var sm = new Ext.grid.CheckboxSelectionModel();
    2> cm中加上sm
    3> grid中加上 sm:sm

9. 中文显示表头下拉菜单
    grid中加上:
    viewConfig:{
        columnsText:"显示/隐藏列",
        sortAscText:"正序排列",
        sortDescText:"倒序排列"
    },

10. 显示or隐藏表头下拉菜单
    cm中
    menuDisabled:true 隐藏
    menuDisabled:false 显示

11. 排序可用
    在cm中需要排序的字段上加上
        sortable:true

ext入门日记(1)