PDA

View Full Version : Modal window from other modal: TypeError: alignToEl is null



Forn
10 Oct 2012, 6:44 AM
Hello.

I have the one modal window with fomr on it, and open other one from it with another form.

If the second form have NOT any component - it\s open clear from norm. If I add the component to it (hidden field) i get the next error:


TypeError: alignToEl is null



chrome://firebug/content/blank.gif


alignToElPosition = alignToEl.getAnchorXY(align2, false);




Main window:


Ext.define('WebAdmin.view.forms.FormCompendiumTown', {
extend: 'Ext.window.Window',
alias: 'widget.formCompendiumTown',

width: 800,
height: 520,
layout: 'fit',
resizable: false,
modal: true,
maximizable: false,
closable: true,
closeAction: 'destroy',
border: false,
bodyBorder: false,

tabId: '',
actionCode: '',

setTabId: function(tabIdForSet) {
this.tabId = tabIdForSet;
},
setActionCode: function(actionCodeForSet) {
this.actionCode = actionCodeForSet;
},

listeners: {
beforeclose: {
fn: function(){
if (this.down('form').down('#formErrorState').tip){
this.down('form').down('#formErrorState').tip.hide();
}
}
},
beforehide: {
fn: function(){
if (this.down('form').down('#formErrorState').tip){
this.down('form').down('#formErrorState').tip.hide();
}
}
}
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [{
xtype: 'form',
frame: true,
autoScroll: true,
bodyPadding: 10,
bodyBorder: true,

defaults: {
anchor: '100%'
},

fieldDefaults: {
labelAlign: 'left',
labelWidth: 150,
labelStyle: 'font-weight:bold',
msgTarget: 'none',
invalidCls: ''
},

listeners: {
fieldvaliditychange: function() {
this.updateErrorState();
},
fielderrorchange: function() {
this.updateErrorState();
}
},

updateErrorState: function() {
var me = this,
errorCmp, fields, errors;
if (me.hasBeenDirty || me.getForm().isDirty()) { //prevents showing global error when form first loads
errorCmp = me.down('#formErrorState');
fields = me.getForm().getFields();
errors = [];
fields.each(function(field) {
Ext.Array.forEach(field.getErrors(), function(error) {
errors.push({name: field.getFieldLabel(), error: error});
});
});
errorCmp.setErrors(errors);
me.hasBeenDirty = true;
}
},

items: [{
xtype: 'tabpanel',
border: false,
items: [{
title: 'Основные настройки',
frame: true,
items: [{
xtype: 'numberfield',
name: 'id',
fieldLabel: 'ID',
afterLabelTextTpl: required,
allowBlank: false,
maxValue: 2147483647,
maxLength: 9
},{
xtype: 'combobox',
name: 'parentId',
store: 'WebAdmin.store.DSCompendiumTownForCombo',
fieldLabel: 'Родительский город',
allowBlank: true,
displayField: 'name',
valueField: 'id',
forceSelection: true
}, {
xtype: 'textfield',
name: 'name',
fieldLabel: 'Наименование',
allowBlank: false,
labelAlign: 'left',
afterLabelTextTpl: required
}, {
xtype: 'textfield',
name: 'alias',
fieldLabel: 'Алиас',
allowBlank: false,
labelAlign: 'left',
vtype: 'alias',
afterLabelTextTpl: required
}, {
xtype: 'textfield',
name: 'skype',
allowBlank: true,
fieldLabel: 'Skype',
labelAlign: 'left'
}, {
xtype: 'textfield',
name: 'icq',
fieldLabel: 'ICQ',
allowBlank: true,
labelAlign: 'left'
}, {
xtype: 'textfield',
name: 'spaId',
fieldLabel: 'Spa Id',
allowBlank: true,
labelAlign: 'left'
}, {
xtype: 'numberfield',
name: 'order',
fieldLabel: 'Порядок',
allowBlank: true,
maxValue: 2147483647,
maxLength: 9
},{
xtype: 'textfield',
name: 'phone',
fieldLabel: 'Телефон',
allowBlank: true
}, {
xtype: 'combobox',
name: 'landscapeId',
store: 'WebAdmin.store.DSCompendiumLandscapeForCombo',
fieldLabel: 'Ландшафт',
allowBlank: false,
displayField: 'name',
valueField: 'id',
forceSelection: true,
afterLabelTextTpl: required,
editable: false
}, {
xtype: 'combobox',
name: 'warehouseAssembly',
store: 'WebAdmin.store.DSShopListForCombo',
fieldLabel: 'Склад сборки',
allowBlank: true,
displayField: 'name',
valueField: 'id',
labelAlign: 'left',
forceSelection: true,
editable: false
}, {
xtype: 'combobox',
name: 'warehouseDelivery',
store: 'WebAdmin.store.DSShopListForCombo',
fieldLabel: 'Склад доставки',
allowBlank: true,
displayField: 'name',
valueField: 'id',
labelAlign: 'left',
forceSelection: true,
editable: false
}, {
xtype: 'combobox',
name: 'warehouseOrder',
store: 'WebAdmin.store.DSShopListForCombo',
fieldLabel: 'Склад подзаказа',
allowBlank: true,
displayField: 'name',
valueField: 'id',
labelAlign: 'left',
forceSelection: true,
editable: false
}
]
},{
title: 'Настройка складов для категорий товаров',
frame: true,
items: [{
xtype: 'gridpanel',
id: 'gridTownGoodsCategoryShop',
autoScroll: true,
store: 'WebAdmin.store.DSTownGoodsCategoryShop',
columns: [
{
dataIndex: 'id',
header: 'ID',
flex: 1
},
{
dataIndex: 'goodCategoryTitle',
header: 'Категория',
flex: 4
},
{
dataIndex: 'warehouseAssemblyTitle',
header: 'Склад доставки',
flex: 3
},
{
dataIndex: 'warehouseDeliveryTitle',
header: 'Склад сборки',
flex: 3
},
{
dataIndex: 'warehouseOrderTitle',
header: 'Склад подзаказа',
flex: 3
}
],

listeners : {
itemdblclick: function(view, record, item, index, e, eOpts) {
editWindow2 = new WebAdmin.view.forms.FormTownGoodsCategoryShop();
editWindow2.setActionCode("TownGoodsCategoryShopStore");
editWindow2.title = "Редактирование настройки складов";

editWindow2.down("form").getForm().getFields().get(2).store.load();
editWindow2.down("form").getForm().getFields().get(3).store.proxy.extraParams.selectedTown = record.data.townId;
editWindow2.down("form").getForm().getFields().get(3).store.load();
editWindow2.down("form").getForm().getFields().get(4).store.proxy.extraParams.selectedTown = record.data.townId;
editWindow2.down("form").getForm().getFields().get(4).store.load();
editWindow2.down("form").getForm().getFields().get(5).store.proxy.extraParams.selectedTown = record.data.townId;
editWindow2.down("form").getForm().getFields().get(5).store.load();

editWindow2.show();
editWindow2.down("form").getForm().setValues({
id: record.data.id,
townId: record.data.townId,
categoryId: record.data.goodCategoryId,
warehouseAssembly: record.data.warehouseAssemblyId,
warehouseDelivery: record.data.warehouseDeliveryId,
warehouseOrder: record.data.warehouseOrderId
});
editWindow2.down("form").getForm().getFields().get(5).store.load();
}
},

dockedItems:[{
xtype: 'toolbar',
dock: 'bottom',
items: [{
id: 'gridTownGoodsCategoryShop_btnAdd',
iconCls: 'add',
text: 'Добавить',
handler: function() {
createWindow = new WebAdmin.view.forms.FormTownGoodsCategoryShop();
createWindow.setActionCode("TownGoodsCategoryShopAdd");
createWindow.title = "Создание настройки складов";
createWindow.down("form").getForm().setValues({
townId: this.up().up().up().up().up().getForm().getFields().get(0).value
});

// createWindow.down("form").getForm().getFields().get(2).store.load();
// createWindow.down("form").getForm().getFields().get(3).store.proxy.extraParams.selectedTown = this.up().up().up().up().up().getForm().getFields().get(0).value;
// createWindow.down("form").getForm().getFields().get(3).store.load();
// createWindow.down("form").getForm().getFields().get(4).store.proxy.extraParams.selectedTown = this.up().up().up().up().up().getForm().getFields().get(0).value;
// createWindow.down("form").getForm().getFields().get(4).store.load();
// createWindow.down("form").getForm().getFields().get(5).store.proxy.extraParams.selectedTown = this.up().up().up().up().up().getForm().getFields().get(0).value;
// createWindow.down("form").getForm().getFields().get(5).store.load();
createWindow.show();
}
},
{
iconCls: 'delete',
text: 'Удалить',
handler: function() {
var grid = Ext.getCmp('gridTownGoodsCategoryShop');
var sm = grid.getSelectionModel();
var townId = this.up().up().up().up().up().getForm().getFields().get(0).value;


Ext.Msg.show({
title:'Удаление',
msg: 'Вы точно хотите удалить пользователя: "'+sm.getSelection()[0].data.login+'"?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(buttonId, text, opt){
if (buttonId == 'yes'){
grid.store.remove(sm.getSelection());
var action = new WebAdmin.utils.JavaAction();
action.setActionCode("TownGoodsCategoryShopDelete");
var json = Ext.JSON.encode(action);

grid.store.proxy.extraParams.action = json;

grid.store.sync({
failure: function(batch, options) {
Ext.Msg.show({
title:'Ошибка',
msg: batch.proxy.reader.jsonData["errorMessage"],
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});

var grid = Ext.getCmp('gridTownGoodsCategoryShop');
grid.store.load({
params: {
selectedTown: townId
}
});
},
success: function(form, action){
var grid = Ext.getCmp('gridTownGoodsCategoryShop');
grid.store.load({
params: {
selectedTown: townId
}
});
}
});
}
}
});

}
},
{
iconCls: 'refresh',
text: 'Обновить',
handler: function() {
var grid = Ext.getCmp('gridTownGoodsCategoryShop');

var action = new WebAdmin.utils.JavaAction();
action.setActionCode("UserList");
var json = Ext.JSON.encode(action);
grid.store.load({
params: {
Action: json
}
});
}
}]
}]
}]
}]
}],

dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',

items: [{
xtype: 'component',
id: 'formErrorState',
baseCls: 'form-error-state',
flex: 1,
validText: 'Все поля заполнены верно',
invalidText: 'Не все поля заполнены.',
tipTpl: Ext.create('Ext.XTemplate', '<ul><tpl for="."><li><span class="field-name">{name}</span>: <span class="error">{error}</span></li></tpl></ul>'),

getTip: function() {
var tip = this.tip;
if (!tip) {
tip = this.tip = Ext.widget('tooltip', {
target: this.el,
title: 'Заполните следующие поля:',
autoHide: false,
anchor: 'top',
mouseOffset: [-11, -2],
closable: false,
constrainPosition: false,
cls: 'errors-tip'
});
tip.show();
}
return tip;
},

setErrors: function(errors) {
var me = this,
baseCls = me.baseCls,
tip = me.getTip();

errors = Ext.Array.from(errors);

// Update CSS class and tooltip content
if (errors.length) {
me.addCls(baseCls + '-invalid');
me.removeCls(baseCls + '-valid');
me.update(me.invalidText);
tip.setDisabled(false);
tip.update(me.tipTpl.apply(errors));
//tip.show();
} else {
me.addCls(baseCls + '-valid');
me.removeCls(baseCls + '-invalid');
me.update(me.validText);
tip.setDisabled(true);
tip.hide();
}
}
}, {
xtype: 'button',
formBind: true,
disabled: true,
text: 'Сохранить',
iconCls: 'save',
handler: function() {
if (this.up('form').getForm().isValid()) {

var action = new WebAdmin.utils.JavaAction();
action.setActionCode(this.up().up().up().actionCode);
var json = Ext.JSON.encode(action);

this.up('form').getForm().submit({
url: baseJavaUrl,
submitEmptyText: false,
clientValidation: true,
params: {
Action: json
},
waitMsg: 'Отправка данных на сервер...',
failure: function(form, action){
Ext.Msg.show({
title:'Ошибка',
msg: action.result.errorMessage,
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
},
success: function(form, action){
var tree = Ext.getCmp('treeCompendiumTowns');
tree.store.load();
form.owner.up('window').close();
}
});
}
}
}, {xtype:'tbspacer', width: 10}, {
xtype: 'button',
text: 'Отменить',
iconCls: 'delete',
handler: function() {
this.up('form').getForm().reset();
if (this.up('form').down('#formErrorState').tip){
this.up('form').down('#formErrorState').tip.hide();
}
this.up('window').close();
}
}]
}]
}]
});
me.callParent(arguments);
}
});


Child window:


Ext.define('WebAdmin.view.forms.FormTownGoodsCategoryShop', {
extend: 'Ext.window.Window',
alias: 'widget.formFormTownGoodsCategoryShop',

width: 800,
height: 520,
layout: 'fit',
resizable: false,
modal: true,
maximizable: false,
closable: true,
closeAction: 'destroy',
border: false,
bodyBorder: false,

tabId: '',
actionCode: '',

setTabId: function(tabIdForSet) {
this.tabId = tabIdForSet;
},
setActionCode: function(actionCodeForSet) {
this.actionCode = actionCodeForSet;
},

listeners: {
beforeclose: {
fn: function(){
if (this.down('form').down('#formErrorState').tip){
this.down('form').down('#formErrorState').tip.hide();
}
}
},
beforehide: {
fn: function(){
if (this.down('form').down('#formErrorState').tip){
this.down('form').down('#formErrorState').tip.hide();
}
}
}
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [{
xtype: 'form',
frame: true,
autoScroll: true,
bodyPadding: 10,
bodyBorder: true,

defaults: {
anchor: '100%'
},

fieldDefaults: {
labelAlign: 'left',
labelWidth: 150,
labelStyle: 'font-weight:bold',
msgTarget: 'none',
invalidCls: ''
},

listeners: {
fieldvaliditychange: function() {
this.updateErrorState();
},
fielderrorchange: function() {
this.updateErrorState();
}
},

updateErrorState: function() {
var me = this,
errorCmp, fields, errors;
if (me.hasBeenDirty || me.getForm().isDirty()) { //prevents showing global error when form first loads
errorCmp = me.down('#formErrorState');
fields = me.getForm().getFields();
errors = [];
fields.each(function(field) {
Ext.Array.forEach(field.getErrors(), function(error) {
errors.push({name: field.getFieldLabel(), error: error});
});
});
errorCmp.setErrors(errors);
me.hasBeenDirty = true;
}
},

items: [{
xtype: 'hiddenfield',
name: 'id'
},{
xtype: 'hiddenfield',
name: 'townId'
}
],

// items: [{
// xtype: 'hiddenfield',
// name: 'id'
// },{
// xtype: 'hiddenfield',
// name: 'townId'
// },{
// xtype: 'treecombo',
// name: 'categoryId',
// itemId: 'categoryTree',
// fieldLabel: 'Категория товара',
// treeWidth: 380,
// allowBlank: false,
// store: 'WebAdmin.store.DSGoodsCategoryForTree',
// editable: false
// }, {
// xtype: 'combobox',
// name: 'warehouseAssembly',
// store: 'WebAdmin.store.DSShopListForCombo',
// fieldLabel: 'Склад сборки',
// allowBlank: true,
// displayField: 'name',
// valueField: 'id',
// labelAlign: 'left',
// forceSelection: true,
// editable: false
// }, {
// xtype: 'combobox',
// name: 'warehouseDelivery',
// store: 'WebAdmin.store.DSShopListForCombo',
// fieldLabel: 'Склад доставки',
// allowBlank: true,
// displayField: 'name',
// valueField: 'id',
// labelAlign: 'left',
// forceSelection: true,
// editable: false
// }, {
// xtype: 'combobox',
// name: 'warehouseOrder',
// store: 'WebAdmin.store.DSShopListForCombo',
// fieldLabel: 'Склад подзаказа',
// allowBlank: true,
// displayField: 'name',
// valueField: 'id',
// labelAlign: 'left',
// forceSelection: true,
// editable: false
// }],

dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',

items: [{
xtype: 'component',
itemId: 'formErrorState',
baseCls: 'form-error-state',
flex: 1,
validText: 'Все поля заполнены верно',
invalidText: 'Не все поля заполнены.',
tipTpl: Ext.create('Ext.XTemplate', '<ul><tpl for="."><li><span class="field-name">{name}</span>: <span class="error">{error}</span></li></tpl></ul>'),

getTip: function() {
var tip = this.tip;
if (!tip) {
tip = this.tip = Ext.widget('tooltip', {
target: this.el,
title: 'Заполните следующие поля:',
autoHide: false,
anchor: 'top',
mouseOffset: [-11, -2],
closable: false,
constrainPosition: false,
cls: 'errors-tip'
});
tip.show();
}
return tip;
},

setErrors: function(errors) {
var me = this,
baseCls = me.baseCls,
tip = me.getTip();

errors = Ext.Array.from(errors);

// Update CSS class and tooltip content
if (errors.length) {
me.addCls(baseCls + '-invalid');
me.removeCls(baseCls + '-valid');
me.update(me.invalidText);
tip.setDisabled(false);
tip.update(me.tipTpl.apply(errors));
//tip.show();
} else {
me.addCls(baseCls + '-valid');
me.removeCls(baseCls + '-invalid');
me.update(me.validText);
tip.setDisabled(true);
tip.hide();
}
}
}, {
xtype: 'button',
formBind: true,
disabled: true,
text: 'Сохранить',
iconCls: 'save',
handler: function() {
if (this.up('form').getForm().isValid()) {

var action = new WebAdmin.utils.JavaAction();
action.setActionCode(this.up().up().up().actionCode);
var json = Ext.JSON.encode(action);

this.up('form').getForm().submit({
url: baseJavaUrl,
submitEmptyText: false,
clientValidation: true,
params: {
Action: json
},
waitMsg: 'Отправка данных на сервер...',
failure: function(form, action){
Ext.Msg.show({
title:'Ошибка',
msg: action.result.errorMessage,
buttons: Ext.Msg.OK,
icon: Ext.Msg.ERROR
});
},
success: function(form, action){
var tree = Ext.getCmp('treeCompendiumTowns');
tree.store.load();
form.owner.up('window').close();
}
});
}
}
}, {xtype:'tbspacer', width: 10}, {
xtype: 'button',
text: 'Отменить',
iconCls: 'delete',
handler: function() {
this.up('form').getForm().reset();
if (this.up('form').down('#formErrorState').tip){
this.up('form').down('#formErrorState').tip.hide();
}
this.up('window').close();
}
}]
}]
}]
});
me.callParent(arguments);
}
});

mitchellsimoens
15 Oct 2012, 7:43 AM
That's a bunch of code. Where in your code causes this? Have you started to break things down?