一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 18:29:06 编辑:袖梨 来源:一聚教程网


该示例基于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组件被顺利加载出来了。
..

热门栏目