Extjs4动态加载Panel内的组件实例

时间：2013-10-29 编辑：简简单单来源：一聚教程网

该示例基于Extjs 4.0.7版本。
像下面的代码所示，假如已经有一个Panel组件，然后我们希望这个form类型的Panel能够动态的加载显示不同的Display组件。

1. Web端代码

下面的代码截取关键部分显示:

代码如下

复制代码

}, {
    region: 'west',
    id: 'overviewPropertyPanel',
    xtype: 'form',
    margins: '0 5 0 0',
    bodyPadding: 10,
    width: 280,
    layout: 'anchor',

    // The form will submit an AJAX request to this URL when submitted
    url: 'Overview',
    reader: Ext.create('Ext.data.reader.Json', {
        model: 'OverviewProperties'
    }),

    defaults: {
        anchor: '100%',
        xtype: 'displayfield',
        labelWidth: 120,
        style: {
            'font-weight': 'bold',
            'font-family': 'Arial'
        },
        fieldStyle: {
            'font-weight': 'bold',
            'font-family': 'Arial'
        }
    },
    loader: {
        url: 'Overview',
        renderer: 'component',
        listeners: {
            'beforeload': function() {
                Ext.getCmp('overviewPropertyPanel').removeAll();
            }
        }
    }
}, {

首先动态加载的组件有很多是通用的参数，如css等，可以将其提出放到Panel的defaults参数中，然后增加一个loader参数。loader里重要的参数介绍如下：
url: 获取数据的路径
renderer: 加载的内容的类型，有html、data、component三种。其中component对应Ext.Component组件
autoLoad: 是否自动加载
baseParams: 可以定义Request参数，每一次请求都会附带上该参数，并且不会被load方法里的params里的参数覆盖
callback: 回调函数
failure: 加载数据失败的回调函数
success: 加载数据成功的回调函数
loadMask: 加载的时候是否显示Mask
listeners: 事件(beforeload, exception, load)
上面的代码中会通过’beforeload’事件在加载新的组件之前将之前的组件全部清除掉。

可以通过下面的方法让Panel执行加载操作：

代码如下	复制代码
Ext.getCmp('overviewPropertyPanel').load({ //property from update method: 'GET', params: { nodeId: getCurrentNodeId(), param: 'property' } });

后台代码

代码如下

复制代码

JSONArray dataArray = new JSONArray();

//DisplayField 1
JSONObject invNumObj = new JSONObject();
invNumObj.put("fieldLabel", "DisplayLabel 1");
invNumObj.put("name", "display1");
dataArray.add(invNumObj);

//DisplayField 2
JSONObject normalNumObj = new JSONObject();
normalNumObj.put("fieldLabel", "DisplayLabel 2");
normalNumObj.put("name", "display2");
dataArray.add(normalNumObj);

return dataArray.toString();

返回给前台的JSON数据为：

代码如下	复制代码
[{"fieldLabel":"DisplayLabel 1","name":"display1"},{"fieldLabel":"DisplayLabel 2","name":"display2"}]

这样就可以在前台看到新加载的两个Display组件被顺利加载出来了。
..

上一个： WordPress实现投稿与会员登录投稿功能
下一个： IE浏览器JQuery ajax返回值有问题总结

推荐专题

最新下载

热门教程

Extjs4动态加载Panel内的组件实例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程