等待ext高手到来，Ext实现表格上显示层

首先是表格中的各列的名字，用columns ：

var columns = [{header:"列名1",dataIndex:'数据库中的字段名字',align:'center',width:100,hidden:true},

第2列同时，

第3列，

。。。

]

接下来就是table,即grid的实现了：

var grid = new Ext.ux.SimpleGrid({

url:"表格数据的来源文件",

pageBar:{pageSize:pagesize},

selMode:"multi",

columns:columns,

autoHeight:true,

width:790,

autoHeight:true,

bodyStyle:"min-height:400pxheight:400px",

stripeRows: true,

autoScroll:true,

title:"table的名字"

})

最后就是监听事件了：

（当鼠标在记录上时，显示详细信息）

grid.on('rowclick', function(sm, rowIndex, e) {

e.preventDefault()

var record=grid.getStore().getAt(rowIndex)

var rightMenu = new Ext.menu.Menu(

{

items:

[

{

text: '查看详细资料',

handler:function(){

//Ext.Msg.alert(record.data.id,record.data.agntname)

var win=new Ext.Window({

title:'详细资料',

iconCls: 'silk-edit',

closeAction:'close',

autoDestroy:true,

padding:10,

resizable:false,

modal:true,

plain:true,

width:620,

animateTarget:document.body,

items:[{

xtype : 'fieldset',

bodyStyle:"padding-left:10px",

autoHeight:true,

title : '',

autoHeight : true,

items : [{

xtype:'panel',

baseCls:"x-plain",

autoWidth:true,

html:'<table border="0" style="border-collapse:collapse" cellspacing="0" cellpadding="0"><tr><td width="70" height="22">：</td><td width="150">'+record.data.agntname+'</td><td width="70">：</td><td width="75">'+record.data.sex+'</td><td width="70">：</td><td width="125">'+record.data.age+'</td></tr><tr><td width="60" height="22">：</td><td>'+record.data.idnumber+'</td><td>：</td><td>'+record.data.xueli+'</td><td>：</td><td>'+record.data.phone+'</td></tr><tr><td height="22">：</td><td colspan="5">'+record.data.addr+'</td></tr><tr><td height="22">：</td><td>'+record.data.clntnum+'</td><td>：</td><td>'+record.data.rs_type+'</td><td>：</td><td>'+record.data.certcode+'</td></tr><tr><td height="22">：</td><td>'+record.data.statusname+'</td><td>：</td><td>'+record.data.agntnum+'</td><td>：</td><td>'+record.data.enterdate+'</td></tr></table><table border="0" cellspacing="0" cellpadding="0"><tr><td width="90" height="22">：</td><td width="125">'+record.data.dz1+'</td><td width="100" height="22">：</td><td width="150">'+record.data.dz2+'</td></tr></table>'

}]

]

}]

})

win.show()

}

}

]

})

grid.store.load()

大概就是这样了，对于数据库的访问可以自己实现哦，很简单的。

试试这样

{

layout : 'form',

border : false,

id :'result_items',

items : []

}

var panel = new Ext.Panel({

id : 'itemPanel',

layout : 'form',

border : false,

items : []

})

for(var j = 0j <dataList[0].items.lengthj ++){

subPanel = getLink(dataList[0].items[j])

Ext.getCmp('itemPanel').add(subPanel)

}

Ext.getCmp('result_items').add(panel)

最外层那个formpanel调用一下doLayout()方法。

要重新添加组件就先Ext.getCmp('result_items').remove(Ext.getCmp('itemPanel'))

再像上面那样做

---