0
Я разрабатываю приложение extjs и spring. Я застрял в визуализации в новой вкладке в центральной области области просмотра. Я не смог создать экземпляр представления, используя ref в контроллере. пожалуйста, помогите и дайте мне знать, где я делаю неправильно ..ExtJS 4 Render Errors on Viewport в новой вкладке
Controller js
Ext.define('Book.controller.NewBook', {
\t extend : 'Ext.app.Controller',
\t \t views : ['book.NewBook'],
\t refs : [ {
\t \t ref : 'bookViewport',
\t \t selector : 'viewport' //whatever the xtype is of your viewport class
\t }, { ref : 'newBookForm',
\t \t selector : '#newBook panel',
\t \t autoCreate: true//whatever the xtype is of your viewport class
\t } ],
\t init : function() {
\t \t // add the components and events we listen to
\t \t this.control({
\t \t \t 'viewport > panel' : {
\t \t \t \t render : this.onPanelRendered
\t \t \t },
\t \t \t 'viewport' : {
\t \t \t \t afterrender : this.onNewBookLinkClick
\t \t \t \t }
\t \t \t \t });
\t },
\t \t onNewBookLinkClick : function() {
\t \t var view = this.getBookViewport();
\t \t var newBook = this.getNewBookForm();
\t \t alert(newBook.id);
\t \t Ext.get('tab1').on('click', function() {
\t \t \t \t var tabExists = false;
\t \t \t \t var p1=Ext.getCmp('panel').getLayout();
\t \t \t \t var p2=Ext.getCmp('panel');
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t \t var items = p2.items;
\t \t \t \t \t \t for (var i = 0; i < items.length; i++) {
\t \t \t \t \t \t \t alert(items[i].id);
\t \t \t \t \t \t \t if (items[i].id === 'NewBook') {
\t \t \t \t \t \t \t \t this.getViewport().panel.setActiveTab(i);
\t \t \t \t \t \t \t \t tabExists = true;
\t \t \t \t \t \t \t \t this.getViewport().panel.setActiveTab(i);
\t \t \t \t \t \t \t }
\t \t \t \t \t \t }
\t \t \t \t \t \t if (!tabExists) {
\t \t \t \t \t \t \t p2.insert(1, newBook);
\t \t \t \t \t \t \t p2.setActiveTab(0);
\t \t \t \t \t \t \t
\t \t \t \t \t \t }
\t \t \t \t \t });
\t \t \t \t },
\t \t \t
\t \t
\t onPanelRendered : function() {
\t \t
\t }
});
View
Ext.define('Book.view.book.NewBook', {
extend : 'Ext.form.Panel',
\t alias : 'widget.newBook',
\t config: {},
constructor: function (config) {
this.initConfig(config);
return this.callParent(arguments);
},
initComponent: function() {
Ext.apply(this, {
\t layout : 'vbox',
\t contentEl : 'center2',
\t title : 'New Book',
\t store : 'Books',
\t id : 'NewBook',
\t defaults : {
\t \t bodyPadding : 10
\t },
\t items : [ {
\t \t xtype : 'panel',
\t \t width : 900,
\t \t collapsible : true,
\t \t title : 'Book Details',
\t \t defaults : {
\t \t \t width : 230,
\t \t \t cls : 'form-field'
\t \t },
\t \t defaultType : 'textfield',
\t \t items : [ {
\t \t \t fieldLabel : 'Book Id',
\t \t \t name : 'bookId',
\t \t \t value : '',
\t \t // validator : function(event) {
\t \t // if (!(/[0-9]/.test(this.getValue()))) {
\t \t // return "This Field should be in Numbers only";
\t \t // }
\t \t // return true;
\t \t // }
\t \t } ]
\t }]
\t \t });
this.callParent(arguments);
}
});
ViewPort
Ext.define('Book.view.Viewport', {
\t
\t extend: 'Ext.container.Viewport',
\t \t alias : 'widget.viewport',
\t requires: [
\t \t \t 'Book.view.book.catCombo',
\t \t \t 'Book.view.book.subCatCombo',
'Book.view.book.NewBook',
\t \t \t \t 'Book.view.book.BookGrid',
\t \t \t \t 'Book.view.book.SearchBook',
'Book.view.book.ModifyBook'
\t ],
id : 'borderViewPort',
layout : 'border',
\t \t \t \t
items : [
Ext.create('Ext.Component', {
\t \t \t \t \t \t \t \t region : 'north',
\t \t \t \t \t \t \t \t height : 0
\t \t \t \t \t \t \t }),
{
region : 'west',
stateId : 'navigation-panel',
id : 'west-panel',
title : 'Navigation Menu',
split : true,
width : 200,
minWidth : 175,
maxWidth : 400,
collapsible : true,
animCollapse : true,
margins : '0 0 0 5',
layout : 'accordion',
items : [ {
contentEl : 'west',
title : '<b>Books</b>',
html : '<div id="west" class="x-hide-display"><ul> <li><a href="#" id="tab1" class="newBook">New Book</a></li> <li><a href="#" class="searchBook">Search Book</a></li> </ul></div>',
iconCls : 'nav'
\t \t \t
}, {
title : 'Purchase Order',
iconCls : 'settings'
}, {
title : 'Total Sales',
iconCls : 'info'
} ]
},
panel = Ext.create('Ext.tab.Panel', {
region : 'center',
id : 'panel',
deferredRender : false,
activeTab : 0
}) ]
});
app.js
Ext.application({
name: 'Book',
\t models: ['Book'],
\t stores: ['Books','BookCategories','BookSubCategories'],
\t controllers: ['NewBook', 'SearchBook'],
autoCreateViewport: true,
launch: function() {
\t Ext.create('Book.view.Viewport');
}
}
);
Спасибо за ответ. Проблема здесь в том, что я не получаю ссылку на мой newBook view в контроллере, используя var newBook = this.getNewBookForm(); \t \t alert (newBook.id); Идентификатор отображает некоторое значение компонента нежелательной почты, а не идентификатор моего представления «NewBook» –
Попробуйте изменить свой селектор на просто-селектор: «#newBook» – mindparse
Не повезло. он все еще не работает. Я попробовал много сочетаний, чтобы предоставить такие запросы компонентов, как «viewport> container> NewBook», «viewport> # center-region> NewBook», «viewport»> newBook »,« viewport> # center-region> newBook ». ничего не работает. newBook.id - это всегда некоторый идентификатор компонента. –