该示例基于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组件被顺利加载出来了。
..
时间： 2024-12-24 21:53:29