0
我正在使用ExtJS和Rails进行类似桌面的应用程序，其中几个人同时在应用程序的不同部分工作。Extjs with Rails - > Viewport - 分布式应用程序中的面板显示问题
这里是简要描述应用程序的： 的主屏幕显示在有4个部分视口 - 北，南，中部和西部。 西部地区包含一些按钮，单击该按钮会导致添加/打开新选项卡。选项卡内容显示在视口的中心区域，其中包含具有表格面板或网格面板（子）的面板（父）。
单独执行时一切正常，但是当我将组件集成到主项目时，组件不会按预期在视口上呈现。是否有任何亲子关系与UI组件相关？渲染面板到视口是否有其他选择？
在此先感谢！
P.S：以下代码仅供参考。测试1（主/父控制器），单元（子控制器）
//** MyViewport.js in Test1 Controller **//
var unit_bt =Ext.getCmp('btnUnit');
unit_bt.on('click', function(){
var unit_el =Ext.getCmp('tabcon');
var tab = unit_el.getItem('tab_unit');
if(tab)
{
tab.show();
}else{
unit_el.add({
title : 'Unit of Measurement',
html : 'I am new unit',
activeTab: 0,
closable : true ,
id: 'tab_unit',
autoLoad:{url:'/units',scripts:true}
//store.load({params:{start:0, limit:25}})
}).show();
}
});
//** Unit UI.js in Units Controller **//
MyUnitUi = Ext.extend(Ext.Panel, {
title: '',
width: 451,
height: 446,
initComponent: function() {
this.items = [
{
xtype: 'editorgrid',
title: '',
store: 'MyUnitStore',
url : '/units.json',
id: 'maingrid',
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 441,
height: 300,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'unitname',
header: 'Unit Name',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'description',
header: 'Description',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
}
]
},
{
xtype: 'form',
title: 'My Form',
id: 'myform',
standardSubmit: true,
height: 300,
hidden: true,
items: [
{
xtype: 'textfield',
fieldLabel: 'Unit Name',
id: 'unitname',
name:'data[unitname]',
anchor: '100%',
width: 70,
x: 150,
y: 30,
region: 'center',
autoWidth: true
},
{
xtype: 'textfield',
fieldLabel: 'Description',
anchor: '100%',
id: 'description',
name:'data[description]',
x: 150,
y: 75,
region: 'west',
width: 70,
autoWidth: true
}
]
}
];
this.tbar = {
xtype: 'toolbar',
height: 45,
items: [
{
xtype: 'button',
text: 'ADD',
height: 45,
width: 100,
id: 'btnAdd'
},
{
xtype: 'button',
text: 'UPDATE',
height: 45,
width: 100,
id: 'btnUpdate'
},
{
xtype: 'button',
text: 'DELETE',
height: 45,
width: 100,
id: 'btnDelete'
},
{
xtype: 'button',
text: 'SAVE',
hidden: true,
id: 'btnSave',
type: 'submit'
},
{
xtype: 'button',
text: 'CANCEL',
hidden: true,
id: 'btnCancel'
}
]
};
MyUnitUi.superclass.initComponent.call(this);
}
});
//** myunitstore.js in Units Controller **//
Ext.data.Api.restActions = {
//create : 'POST',
//read : 'GET',
update : 'PUT'
//destroy : 'DELETE'
};
MyUnitStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
MyUnitStore.superclass.constructor.call(this, Ext.apply({
idProperty: 'id',
storeId: 'MyUnitStore',
root: 'data',
autoLoad: true,
autoSave: false,
restful:true,
writer: new Ext.data.JsonWriter({
encode : false,
listful:false
}),
url: '/units.json',
fields: [
{
name: 'unitname'
},
{
name: 'description'
}
] ,
listeners: {
load:function(){
Ext.MessageBox.alert("listener");
},
exception: function(proxy, type, action, o, response, args) {
var jsonData = Ext.util.JSON.decode(response.responseText);
//Ext.MessageBox.alert("hello");
Ext.MessageBox.alert('Error Occurred', jsonData.message);
}
}//end listeners
}, cfg));
}
});
new MyUnitStore();
您在js调试器中是否出现错误？ – 2011-04-27 07:00:39
铬控制台中的错误 - “未捕获的TypeError：无法调用未定义的方法'焦点'，没有错误的Firefox，但不显示..是否有任何亲子关系与UI组件相关？ – Rashmi 2011-04-27 07:30:01
你什么时候遇到这个错误？你说萤火虫没有显示任何错误？！你是否将这些新面板添加到Tabpanel？ – 2011-04-27 07:36:45