基于ExtJs的桌面系统（2)

今天接着来写，昨天的数据是用ajax请求回来的，是加载页面的时候就请求了，然而我现在要点击快捷方式再请求，昨天gridpanel部分的代码是这样的：

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

Ext.grid.dummyData是js加载后时就请求回来的，现在要将改成点击事件的时候加载。然后查了下api： http://www.okajax.com/book/ext2.2/

jsonstore是酱紫描述的：

Small helper class to make creating Stores for remotely-loaded JSON data easier. JsonStore is pre-configured with a built-in Ext.data.HttpProxy and Ext.data.JsonReader. If you require some other proxy/reader combination then you'll have to create a basic Ext.data.Store configured as needed.

var store = new Ext.data.JsonStore({
    url: 'get-images.php',
    root: 'images',
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});

This would consume a returned object of the form:

{
    images: [
        {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},
        {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}
    ]
}

然而我改成了，发现并不可行，完全没请求：

ds: new Ext.data.Store({
                            url: 'inventory_findInventory.action',
                            reader: new Ext.data.JsonReader({
                                fields : [  {name: 'itemId'},
            								{name: 'name'},
            								{name: 'format'},
            								{name: 'importPrice'},
            								{name: 'quantity'},
            								{name: 'count'},
            								{name: 'batch'},
            								{name: 'inDate'},
            								{name: 'validDate'}
                                        ]
                            })
                        }),

然后搜了下资料，发现再套个httpproxy，请求了并且数据加载出来了：

ds: new Ext.data.Store({
                        	autoLoad: true,
                            proxy: new Ext.data.HttpProxy({
                            url: 'inventory_findInventory.action',
                                headers: { 'Content-type': 'application/json' },
                                method: 'post'
                            }),
                            reader: new Ext.data.JsonReader({
                                fields : [  {name: 'itemId'},
            								{name: 'name'},
            								{name: 'format'},
            								{name: 'importPrice'},
            								{name: 'quantity'},
            								{name: 'count'},
            								{name: 'batch'},
            								{name: 'inDate'},
            								{name: 'validDate'}
                                        ]
                            })
                        }),

接着我试着删掉了一些代码，变成这样：

ds: new Ext.data.Store({
                        	autoLoad: true,
                            url: 'inventory_findInventory.action',
                            method: 'get',
                            reader: new Ext.data.JsonReader({
                                fields : [  {name: 'itemId'},
            								{name: 'name'},
            								{name: 'format'},
            								{name: 'importPrice'},
            								{name: 'quantity'},
            								{name: 'count'},
            								{name: 'batch'},
            								{name: 'inDate'},
            								{name: 'validDate'}
                                        ]
                            })
                        }),

结果发现没了autoLoad就不会请求了，之前查看的资料都有一个store.load()，应该就是发送请求吧。

看了下aotuload的描述：

autoLoad : Boolean/Object

If passed, this store's load method is automatically called after creation with the autoLoad object

应该就是酱紫了。

然而我返回的数据里面带有Date类型的数据：

[{"batch":10,"count":800,"format":"10条装","id":1,"importPrice":15,"inDate":{"date":1,"day":6,"hours":0,"minutes":0,"month":1,"nanos":0,"seconds":0,"time":1391184000000,"timezoneOffset":-480,"year":114},"itemId":1001,"name":"香口胶","quantity":1000,"validDate":{"date":1,"day":3,"hours":0,"minutes":0,"month":5,"nanos":0,"seconds":0,"time":1464710400000,"timezoneOffset":-480,"year":116}},{"batch":10,"count":1000,"format":"1包","id":2,"importPrice":10,"inDate":{"date":26,"day":5,"hours":0,"minutes":0,"month":5,"nanos":0,"seconds":0,"time":1435248000000,"timezoneOffset":-480,"year":115},"itemId":1002,"name":"薄荷糖","quantity":1000,"validDate":{"date":26,"day":1,"hours":0,"minutes":0,"month":5,"nanos":0,"seconds":0,"time":1498406400000,"timezoneOffset":-480,"year":117}},{"batch":5,"count":1000,"format":"1包","id":3,"importPrice":20,"inDate":{"date":26,"day":5,"hours":0,"minutes":0,"month":5,"nanos":0,"seconds":0,"time":1435248000000,"timezoneOffset":-480,"year":115},"itemId":1003,"name":"哈哈汤","quantity":1000,"validDate":{"date":1,"day":6,"hours":0,"minutes":0,"month":7,"nanos":0,"seconds":0,"time":1438358400000,"timezoneOffset":-480,"year":115}}]

直接像普通数据那样写的话会显示Object object，那如何正确显示Date类型数据呢?

记得一开始模板是这样的，大家看到那个特殊的数据木有：

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'}
                        ]),

是的Price里面有个renderer:Ext.util.Format.usMoney,机智的大家一定知道这个用来干啥。我查阅了下api文档：

renderer : Function

(可选) A function used to generate HTML markup for a cell given the cell's data value. See setRenderer. If not sp...

叫我看setRenderer，乖乖去看：

setRenderer( Number col, Function fn ) : void

设置指定列的渲染(格式化)函数. See Ext.util.Format for some default formatting functions.

又叫我看Ext.util.Format:

方法		继承自
	capitalize (  String value ) : String Converts the first character only of a string to upper case ...	Format
	date (  String/Date value, String format ) : String Parse a value into a formatted date using the specified format pattern. ...	Format
	dateRenderer (  String format ) : Function Returns a date rendering function that can be reused to apply a date format multiple times effici...	Format
	defaultValue (  Mixed value, String defaultValue ) : String Checks a reference and converts it to the default value if it's empty ...	Format
	ellipsis (  String value, Number length ) : String Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length ...	Format
	fileSize (  Number/String size ) : String Simple format for a file size (xxx bytes, xxx KB, xxx MB) ...	Format
	htmlDecode (  String value ) : String Convert certain characters (&, <, >, and ') from their HTML character equivalents. ...	Format
	htmlEncode (  String value ) : String Convert certain characters (&, <, >, and ') to their HTML character equivalents for lit...	Format
	lowercase (  String value ) : String Converts a string to all lower case letters ...	Format
	stripScripts (  Mixed value ) : String Strips all script tags ...	Format
	stripTags (  Mixed value ) : String Strips all HTML tags ...	Format
	substr (  String value, Number start, Number length ) : String Returns a substring from within an original string ...	Format
	trim (  String value ) : String Trims any whitespace from either side of a string ...	Format
	undef (  Mixed value ) : Mixed Checks a reference and converts it to empty string if it is undefined ...	Format
	uppercase (  String value ) : String Converts a string to all upper case letters ...	Format
	usMoney (  Number/String value ) : String Format a number as US currency ...

然后我就试了下dateRenderer(string format)，在含日期的数据中加入renderer : Ext.util.Format.dateRenderer('Y-m-d'),然而这并没有什么卵用。

问题出在哪呢？搜了下资料，找到了很好的解答：http://chamcon.iteye.com/blog/1577291。

在reader里面要对数据进行指定：

{name:'inDate',
            									type:'date',
            									mapping : 'inDate.time',
            									dateFormat : 'time'}

Date类型数据也成功的显示了。

接下来也要查询其他的数据，同样用gridwindow显示，html中的写法：

<dt id="grid-win-shortcut">
            <a href="#"><img src="images/s.gif" />
            <div>grid window</div></a>
        </dt>

于是我又加了一个：

<dt id="grid-win2-shortcut">
            <a href="#"><img src="images/s.gif" />
            <div>grid window2</div></a>
        </dt>

发现图片不显示了，去css找到grid-win-shortcut的部分复制给grid-win2-shortcut。图片也可以自定义。

然后js部分：

getModules : function(){
		return [
				new MyDesktop.GridWindow(),
				new MyDesktop.GridWindow2(),
	            new MyDesktop.TabWindow(),
	            new MyDesktop.AccordionWindow(),
	            new MyDesktop.BogusMenuModule(),
	            new MyDesktop.BogusModule()
			];
		},

这里加了个gridwindow2，不太清楚这样好不好，本来想复用代码只改变参数，但是还是希望能独立弹出窗口，还是先这样子了。

下面在MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {});后面再复制个MyDesktop.GridWindow2 = Ext.extend(Ext.app.Module, {});

里面的grid-win再改成grid-win2，这样子两个窗口都能独立弹出了。数据和之前那样子取就行了。

接下来我要做的是在一个弹出的window里面放进多个panel，一开始看了看代码：

items:[
                       new Ext.grid.GridPanel({
                	border:false,
                	anchor: '100% 50%',
                    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
                    }
                })]

心里想只要在items里面再加一个panel就好了，于是就再new了一个同样的panel，却发现只能显示一个，问题在哪呢？有点经验的人应该知道这些window应该会有布局这样的东西，看看是不是：

win = desktop.createWindow({
                id: 'grid-win',
                title:'inventory',
                width:960,
                height:480,
                iconCls: 'icon-grid',
                shim:false,
                animCollapse:false,
                constrainHeader:true,
                layout: 'fit',

果然，layout是fit，但是我不清楚这布局怎么用或者说还有什么布局咋办？不用担心，查api或者直接百度都有很多说明，我还搜到了一篇图文并茂的博文，非常详细，供大家参考： http://www.cnblogs.com/lipan/archive/2011/12/27/2302719.html，虽然是extjs4的，但是大部分布局在2也已经有了，大家可以试一试，不想试的话可以看图选自己需要的，挺方便。

上面的博客说到：fit ：这个布局下子元素会独占全部的容器空间，一般用于只有一个子项的情况。然后我就用了anchor，这个比较适合我所需要的显示效果。

今天就先记到这里，听说今晚会停水，还是赶紧去洗澡了。