Ext rowexpander动态获取数据示例
Ext rowexpander动态获取数据示例

示例在ext-4.1.1a,ext-4.2.1.883,ext-5.1.0版本下测试成功,其他版本自己查看API进行修改。
<title>Ext rowexpander动态获取数据示例</title>
<script type="text/javascript">
Ext.Loader.setConfig({ enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require(['Ext.ux.RowExpander']);
Ext.onReady(function () {
var grid = Ext.create('Ext.grid.Panel', {
store: Ext.create('Ext.data.Store', { autoLoad: true, proxy: { url: 'data.asp', type: 'ajax', reader: { type: 'json', root: 'users', idProperty: 'id' } }, fields: ['id', 'name'] }),
columns: [{ text: "id", flex: 1, dataIndex: 'id' }, { text: "name", dataIndex: 'name' }],
viewConfig: {
listeners: {
expandbody: function (rowNode, record, expandRow, eOpts) {
var loaded = expandRow.getAttribute('loaded') == '1';
if (expandRow.getAttribute('loaded') != '1')//判断ajax是否已经加载过,未加载过启用ajax请求服务器获取数据
Ext.Ajax.request({
url: 'data.asp',
params: { id: record.get('id') },
success: function (response) {
var text = response.responseText;
Ext.get(expandRow).down('div.x-grid-rowbody').dom.innerHTML = text;
expandRow.setAttribute('loaded', 1);//标记为成功加载
},
failure: function (response, opts) {
var text = response.responseText;
alert('出错,服务器返回内容:' + text);
Ext.get(expandRow).down('div.x-grid-rowbody').dom.innerHTML = text;
}
});
}
}
},
width: 400, height: 300, title: 'Ext rowexpander动态获取数据示例', renderTo: Ext.getBody(),
plugins: [{ ptype: 'rowexpander', rowBodyTpl: 'loading...' }]
});
});
</script>
data.asp
<%id=request.form("id") &""
if isnumeric(id) then'读取数据
response.Write "server return userinfo:"&id&"--"&now
else%>
{"users":[{"id":1,"name":"name1"},{"id":2,"name":"name2"},{"id":3,"name":"name3"}]}<%
end if
%>
加支付宝好友偷能量挖...

原创文章,转载请注明出处:Ext rowexpander动态获取数据示例
