Ext rowexpander动态获取数据示例

  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动态获取数据示例

评论(0)Web开发网
阅读(404)喜欢(0)extjs开发技巧