基于ExtJs的桌面系统（3)

继续写到了深夜，上一篇讲到了布局，布局完之后我们每一块的panel都有各自的功能，而我使用的是上部分是gridpanel，下部分还是gridpanel，快捷方式点击后，上部显示的是按照一个字段分好组的数据，简称清单，下面显示没有分组的全部详细信息，而当上部的一个清单被点击后，下部就用来显示这一个清单里的详细信息。

这里先列出几个关键词：点击事件、监听器、重新加载

首先是点击事件，我一开始是想点击上部分里面的任一行都可以触发事件，但是后来查了下api:http://www.okajax.com/book/ext2.2，发现gridpanel里面有监听器listeners：

listeners:{  
                            'rowclick' : function(grid, rowIndex, e){  
                            	
                                });
                            }
                        }

所点击的那行可以用var record=grid.getSelectionModel().getSelected()来记录，方法还有很多，大家可以自行查找。

接着是下部分的gridpanel重新请求并重新加载返回的数据的问题，然而这里耗费了不少时间，由于一开始代码是类似酱紫的：

MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
    id:'grid-win',
    init : function(){
        this.launcher = {
            text: 'inventory',
            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:'inventory',
                width:960,
                height:480,
                iconCls: 'icon-grid',
                shim:false,
                animCollapse:false,
                constrainHeader:true,

                layout: 'anchor',
                items:[
                       new Ext.grid.GridPanel({
                        border:false,
                        anchor: '100% 50%',
                        ds: new Ext.data.Store({
                        	autoLoad: true,
                            url: 'inventory_findInventory.action',
                            method: 'get',
                            reader: new Ext.data.JsonReader({
                                fields : [  {name: 'itemId'},
            				.................
                                        ]
                            })
                        }),
                        cm: new Ext.grid.ColumnModel([
                            new Ext.grid.RowNumberer(),
                            .....................
                        ]),
                        
                        viewConfig: {
                            forceFit:true
                        },
                        //autoExpandColumn:'company',                 
                    }),
                       new Ext.grid.GridPanel({
                	border:false,
                	anchor: '100% 50%',
                    ds: new Ext.data.Store({
                        reader: new Ext.data.ArrayReader({}, [
                           ........
                        ]),
                        data: Ext.grid.dummyData
                    }),
                    cm: new Ext.grid.ColumnModel([
                        new Ext.grid.RowNumberer(),
                        ................
                    ]),

                    viewConfig: {
                        forceFit:true
                    }
                })]
                    
            });
        }
        win.show();
    }
});

然后在上部分加了监听器后，发现我想到下面那个new的gridpanel里面那个store之后再让它重新加载，然而我发现我用了很多方法都只能拿到自身（上半部分）的store，查了很久api，可能有点长，没怎么耐心看，也没什么头绪，搜了下貌似可以设置个storeId，用id来拿，正准备试的时候，我想起很多资料都是在外部直接var panel，var store来放这些组件的，于是我尝试了下外部var store = new Ext.data.Store......，然后在监听器里面store.load({params:{key:value})，惊讶的是一开始确实成功了，不过下部分显示的直接是返回的json数据。检查了下，发现我不是把store放外面去了，而是整个gridpanel=。= 。很快的改回来后，发现也很顺利，数据成功重新加载出来了。

下面贴上关键部分的代码，首先是外部定义的store：

var store2 = new Ext.data.Store({
	autoLoad: true,
    url: 'inventory_findOutBoundOrder.action',
    method: 'get',
    reader: new Ext.data.JsonReader({
        fields : [  {name: 'orderId'},
                    {name: 'itemId'},
					{name: 'itemName'},
					{name: 'exportCount'},
					{name: 'importPrice'},
					{name: 'price'},
					{name: 'state'},
					{name: 'userId'},
					{name:'deadline',
						type:'date',
						mapping : 'deadline.time',
						dateFormat : 'time'}
                ]
    })
});

下部分对应的的改成ds: store2 就好了

最后是listeners：

listeners:{  
                            'rowclick' : function(grid, rowIndex, e){  
                            	var record=grid.getSelectionModel().getSelected(); 
                                store2.load({
                                		        params:{OrderId:record.get('orderId')},
                                });
                            }
                        }

这些知识点贯穿了今天写的内容，接下来今天并没有其他知识点了，等到之后再遇到新知识点时再作记录。