EXTjs学习笔记（7）

    数据是信息系统支撑的核心，因此数据的处理和展现肯定是必不可少的，记得大二（04年) 那年寒假回家带了一本书回去看 印象中是清华大学出的一本J2EE应用学习的书。 记得那年竟然将自己的台式机从学校带回了家，现在想想都觉得不容易啊。 当时一手提机箱，一手提显示器（CRT）的那种，回家说是为了学习呵呵。不过那年也是有点收获的，记得印象最深的是第一次联通数据库，将数据查出来并展现在浏览器中，印象中自己惊喜的都跳了起来  呵呵现在想想都有点小可笑了。 当时用的mysql数据库，用的是纯jsp编写，页面的数据展现就是html编写table标签顶多做一下颜色的修饰，那是相当的简陋。 回忆完过去看看现在的ext对表格展示的支持会让我们惊喜当然之前的display等等组件也带来了很多惊喜，这种惊喜如同手机、铁路的发展一般让人感到惊喜。

1. js部分

Ext.onReady(function(){

    // sample static data for the store
    var myData = [
        ['VerRan',                        '男'],
        ['Dove',                          '女'],
        ['UU',                          '女'],
        ['PP',                          '女']
    ];

    
    // create the data store
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'name'},
           {name: 'sex',      type: 'string'},
           {name: 'change',     type: 'float'}
        ]
    });

    // manually load local data
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {
                id       :'name',
                header   : 'name', 
                width    : 300, 
                sortable : true, 
                dataIndex: 'name'
            },
            {
                id       :'sex',
                header   : 'sex', 
                width    : 300, 
                sortable : true, 
                dataIndex: 'sex'
            }
        ],
        stripeRows: true,
        height: 350,
        width: 600,
        autoExpandColumn: 'name',
        title: '名单',
        stateful: true,
        stateId: 'grid'
    });
    grid.render('a');
});

 

2 . html部分

不用编写任何代码 只要引入必须的js和css文件

 

小结：

    这个展现已经具备了简单的排序和漂亮的界面展现，缺少分页当然ext肯定是支持的后面再描述，还有更高级的比如表格里面数据的编辑，图片的支持等等，实现复杂吗 肯定很简单。 做简单的配置即可。