该示例基于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组件被顺利加载出来了。
..
extjs4动态加载panel|Extjs4动态加载Panel内的组件实例
http://m.bbyears.com/wangyezhizuo/45081.html
推荐访问: