基于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')},
});
}
}

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