ExtJS中ToolPanel的Items如何接受后台程序的Json?
0
悬赏园豆：100
[已解决问题]
解决于 2010-05-25 09:44
我想在工具栏中动态添加按钮，按钮配置信息（json）由后台程序取数据库记录而生成。
代码
var json; //如何从后台获取?
ToolBar = function() {
ToolBar.superclass.constructor.call(this, {
id: 'tool_bar',
cls: 'top-toolbar',
items: json //按钮配置信息
})
};
Ext.extend(ToolBar, Ext.Toolbar);
问题补充：
ToolBar = function(A) {
Ext.Ajax.request({
url: 'rolegroup.aspx',
params: '',
method: 'POST',
success: function(response, options) {
//alert('success');
var rsp = Ext.util.JSON.decode(response.responseText);
var total = rsp.totalProperty;
//alert(total);
//alert(rsp.result[0].text);
var arrays = new Array(total);
for (var i = 0; i < total; i++) {
arrays[i] = new Ext.Button({ text: rsp.result[i].text, iconCls: 'icon-home' });
}
//alert(arrays.length);
alert(arrays[1]['text'] + ',' + arrays[1]['iconCls']); //这里显示有值了！
var o = { items: arrays };
Ext.apply(this, A, o); //这里为何不成功？
},
failure: function() {
Ext.Msg.alert("提示信息", "按钮加载失败,请稍后重试！");
}
});
ToolBar.superclass.constructor.call(this, {
id: 'tool_bar',
cls: 'top-toolbar'
})
};
Ext.extend(ToolBar, Ext.Toolbar);
-----------------------
arrays 中确定有数据了，但items中没有传入成功。这是为何？如何修改？
最佳答案
0
因为AJAX通常是异步的，所以这样实现有问题，你不如这样
var ToolBar = function() {
var $this = this;
Ext.ajax(
//各种参数
//成功回调
function(items) {
Toolbar.superclass.constructor.call($this, { id: 'tool_bar', cls: 'top-toolbar', items: items });
}
);
};
收获园豆：50
其他回答(1)
0
是不是可以尝试使用这个方法：http://www.javaeye.com/problems/28899
收获园豆：50
我要从后台数据库取数据，再根据后台值动态添加按钮。
我现在取后台数据是成功了，但赋给Toolbar的items项却不成功。
请帮我看看代码！错在何处，该如何修改？谢谢！
ToolBar.superclass.constructor.call(this, {
id: 'tool_bar',
cls: 'top-toolbar'
})
};
Ext.extend(ToolBar, Ext.Toolbar);
这一段要放在success函数里面
问题解决了！我认为主要是ajax异步原因，
创建toolbar后，后台数据并没有读取。等读取后台数据后，再赋值就晚了。
我改了一下代码如下，就OK了！
SetToolButtons = function(tbr) {
Ext.Ajax.request({
url: 'rolegroup.aspx',
params: '',
method: 'POST',
success: function(response, options) {
var rsp = Ext.util.JSON.decode(response.responseText);
var total = rsp.totalProperty;
var arrays = new Array(total);
for (var i = 0; i < total; i++) {
arrays[i] = new Ext.Toolbar.Button({ text: rsp.result[i].text, iconCls: 'icon-home' });
}
tbr.add(arrays);
tbr.addFill();
tbr.addButton(
{
text: '我的桌面',
iconCls: 'icon-desktop',
scope: this
});
tbr.addSeparator();
tbr.addButton([
{
text: '重新登录',
iconCls: 'icon-user'
},
{
text: '退出系统',
iconCls: 'icon-exit'
}]);
},
failure: function() {
Ext.Msg.alert("提示信息", "按钮加载失败,请稍后重试！");
}
});
};
Ext.onReady(function() {
Ext.QuickTips.init();
var toolbar = new Ext.Toolbar({
id: 'tool_bar',
cls: 'top-toolbar'
});
SetToolButtons(toolbar);
}
希望对大家有帮助！
