Я работаю над настольным приложением, использующим ExtJS с Rails, где одновременно несколько человек работают над разными частями приложения.
Вот краткое описание приложения *1003*:
Главный экран отображается в окне просмотра, которое имеет 4 раздела - север, юг, центр и запад.
Западный регион содержит несколько кнопок, нажатие на которые приводит к добавлению / открытию новой вкладки. Содержимое вкладки отображается в центральной области области просмотра, которая содержит панель (родительскую) с панелью формы или сеткой (дочерняя).
Все работает нормально, когда выполняется по отдельности, но когда я интегрирую компоненты в основной проект, компоненты не отображаются в окне просмотра, как ожидалось. Существуют ли какие-либо отношения между родителями и детьми, связанные с компонентами пользовательского интерфейса, которые необходимо соблюдать? Есть ли альтернативы рендеринга панели в окне просмотра?
Заранее спасибо!
P.S .: Вот код для справки. Test1 (основной / родительский контроллер), блок (дочерний контроллер)
//** 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();