基于ExtJs的桌面系统（1）

最近要开发一个小型的管理系统，后台用的是java（其实是baby的），然后前端用啥好呢，之前项目后台管理的一般用easyui，很好用也很顺手。然而这次无意中发现了ExtJs desktop，觉得真是挺赞的，虽然已经挺老的模板了，不过作为初步学习，也很值得。模板界面如下：

怎么办好呢，新事物总是那么吸引人，然而开发时间太紧了，吓得我立刻决定学学ExtJs desktop定定惊。

于是乎看了看文件，js目录下是酱紫的：

总共7个文件，除了ext那两个还有5个，其实看下英文应该大概也知道封装的是显示的哪部分，暂时先放着。

外目录还有个sample.js文件，估计要我们开刀的就是这个文件了。

点开start按钮，发现

咦，有个logout，先实现一下，审核一下元素，发现还是个a标签，然后找了下js代码：

// config for the start menu
    getStartConfig : function(){
        return {
            title: 'Jack Slocum',
            iconCls: 'user',
            toolItems: [{
                text:'Settings',
                iconCls:'settings',
                scope:this
            },'-',{
                text:'Logout',
                iconCls:'logout',
                scope:this
            }]
        };
    }

然而href怎么弄进去呢？机智的我在 iconCls:'logout',下面加了href:"你的url",，哈哈，居然真的可以。

接下来我就想数据库查到一些数据之后在gridwindow里面显示出来，gridwindow是右边那个窗口：

这部分的代码大概是酱紫的：

MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
    id:'grid-win',
    init : function(){
        this.launcher = {
            text: 'Grid Window',
            iconCls:'icon-grid',
            handler : this.createWindow,
            scope: this
        }
    },

    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('grid-win');
        if(!win){
            win = desktop.createWindow({
                id: 'grid-win',
                title:'Grid Window',
                width:740,
                height:480,
                iconCls: 'icon-grid',
                shim:false,
                animCollapse:false,
                constrainHeader:true,

                layout: 'fit',
                items:
                    new Ext.grid.GridPanel({
                        border:false,
                        ds: new Ext.data.Store({
                            reader: new Ext.data.ArrayReader({}, [
                               {name: 'company'},
                               {name: 'price', type: 'float'},
                               {name: 'change', type: 'float'},
                               {name: 'pctChange', type: 'float'}
                            ]),
                            data: Ext.grid.dummyData
                        }),
                        cm: new Ext.grid.ColumnModel([
                            new Ext.grid.RowNumberer(),
                            {header: "Company", width: 120, sortable: true, dataIndex: 'company'},
                            {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                            {header: "Change", width: 70, sortable: true, dataIndex: 'change'},
                            {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
                        ]),
                        
                        viewConfig: {
                            forceFit:true
                        },
                        //autoExpandColumn:'company',

                        tbar:[{
                            text:'Add Something',
                            tooltip:'Add a new row',
                            iconCls:'add'
                        }, '-', {
                            text:'Options',
                            tooltip:'Blah blah blah blaht',
                            iconCls:'option'
                        },'-',{
                            text:'Remove Something',
                            tooltip:'Remove the selected item',
                            iconCls:'remove'
                        }]
                    })
            });
        }
        win.show();
    }
});

然后里面显示的数据在外部：

// Array data for the grid
Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
    ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
    ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
    ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
    ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
    ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];

看了这些数据格式发现没什么头绪，我觉得应该和json数据对应的名字就应该能够识别。于是首先我试下返回json格式的数据，然而并没有起什么作用。

很艰难的找到了extjs 2.X的api文档，才发现我在用这么老的东西，却依然觉得很新鲜，看来我还是too young too naive。

找到了这里所用到的arrayreader：

var Employee = Ext.data.Record.create([
    {name: 'name', mapping: 1},         // "mapping" only needed if an "id" field is present which
    {name: 'occupation', mapping: 2}    // precludes using the ordinal position as the index.
]);
var myReader = new Ext.data.ArrayReader({
    id: 0                     // The subscript within row Array that provides an ID for the Record (optional)
}, Employee);

This would consume an Array like this:

[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]

然后我又看到了jsonreader：

var Employee = Ext.data.Record.create([
    {name: 'firstname'},                  // Map the Record's "firstname" field to the row object's key of the same name
    {name: 'job', mapping: 'occupation'}  // Map the "job" field to the row object's "occupation" key
]);
var myReader = new Ext.data.JsonReader({
    totalProperty: "results",             // The property which contains the total dataset size (optional)
    root: "rows",                         // The property which contains an Array of row objects
    id: "id"                              // The property within each row object that provides an ID for the record (optional)
}, Employee);

This would consume a JSON object of the form:

{
    'results': 2,
    'rows': [
        { 'id': 1, 'firstname': 'Bill', occupation: 'Gardener' },         // a row object
        { 'id': 2, 'firstname': 'Ben' , occupation: 'Horticulturalist' }  // another row object
    ]
}

恍然大悟，应该可以了。

我的想法是将原本的new Ext.data.ArrayReader改成new Ext.data.JsonReader，结果一下子就成功了，正所谓救命api，立马收藏起来。

new Ext.grid.GridPanel({
                        border:false,
                        ds: new Ext.data.Store({
                            reader: new Ext.data.JsonReader({}, [
								{name: 'itemId'},
								{name: 'name'},
								{name: 'format'},
								{name: 'count'}                             
                            ]), 
                            data: Ext.grid.dummyData

结果如图所示：

今天先到这了，篇幅应该有点长，其实是图和代码太多了，不过还是分开写吧，也好当作记录，明天见。