等待ext高手到来,Ext实现表格上显示层
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了等待ext高手到来,Ext实现表格上显示层相关的知识,希望对你有一定的参考价值。
现在做一个页面,先显示一个table表格,然后选择表格里面的标题(从数据库中读出),然后鼠标放在标题上显示详细信息!最好有写好的js源码,附上我的邮箱! 2543639229@qq.com。有好的方法尽管出招吧!
重赏之下必有勇夫!!呵呵
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:400px;height: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();
大概就是这样了,对于数据库的访问可以自己实现哦,很简单的。 参考技术A 就这么点分,也想要源码
以上是关于等待ext高手到来,Ext实现表格上显示层的主要内容,如果未能解决你的问题,请参考以下文章
使用 Ext.util.TaskRunner 在负载掩码中显示时钟
EXT JS 如何从后台生成一个table表格 在线等 30分