Results 1 to 2 of 2

Thread: ExtJS 4 Render Errors On Viewport in a New Tab

  1. #1

    Default ExtJS 4 Render Errors On Viewport in a New Tab

    I am developing an extjs and spring application. I got stuck in rendering view in new tab in center region of viewport. I have not able to create an instance of the view using ref in controller. please help and let me know where i am doing wrong..


    Controller js

    Ext.define('Book.controller.NewBook', {
    extend : 'Ext.app.Controller',
    views : ['book.NewBook'],
    refs : [ {
    ref : 'bookViewport',
    selector : 'viewport' //whatever the xtype is of your viewport class
    }, { ref : 'newBookForm',
    selector : '#newBook panel',
    autoCreate: true//whatever the xtype is of your viewport class
    } ],

    init : function() {
    // add the components and events we listen to
    this.control({
    'viewport > panel' : {
    render : this.onPanelRendered
    },
    'viewport' : {
    afterrender : this.onNewBookLinkClick
    }
    });
    },
    onNewBookLinkClick : function() {
    var view = this.getBookViewport();
    var newBook = this.getNewBookForm();
    alert(newBook.id);

    Ext.get('tab1').on('click', function() {
    var tabExists = false;
    var p1=Ext.getCmp('panel').getLayout();
    var p2=Ext.getCmp('panel');



    var items = p2.items;
    for (var i = 0; i < items.length; i++) {
    alert(items[i].id);
    if (items[i].id === 'NewBook') {
    this.getViewport().panel.setActiveTab(i);
    tabExists = true;
    this.getViewport().panel.setActiveTab(i);
    }
    }
    if (!tabExists) {
    p2.insert(1, newBook);
    p2.setActiveTab(0);

    }
    });
    },



    onPanelRendered : function() {

    }
    });

    View
    Ext.define('Book.view.book.NewBook', {
    extend : 'Ext.form.Panel',
    alias : 'widget.newBook',

    config: {},
    constructor: function (config) {
    this.initConfig(config);
    return this.callParent(arguments);
    },

    initComponent: function () {
    Ext.apply(this, {

    layout : 'vbox',
    contentEl : 'center2',
    title : 'New Book',
    store : 'Books',
    id : 'NewBook',
    defaults : {
    bodyPadding : 10
    },
    items : [ {
    xtype : 'panel',
    width : 900,
    collapsible : true,
    title : 'Book Details',
    defaults : {
    width : 230,
    cls : 'form-field'
    },
    defaultType : 'textfield',
    items : [ {
    fieldLabel : 'Book Id',
    name : 'bookId',
    value : '',
    // validator : function(event) {
    // if (!(/[0-9]/.test(this.getValue()))) {
    // return "This Field should be in Numbers only";
    // }
    // return true;
    // }
    } ]
    }]

    });
    this.callParent(arguments);
    }

    });


    ViewPort

    Ext.define('Book.view.Viewport', {


    extend: 'Ext.container.Viewport',
    alias : 'widget.viewport',
    requires: [
    'Book.view.book.catCombo',
    'Book.view.book.subCatCombo',
    'Book.view.book.NewBook',
    'Book.view.book.BookGrid',
    'Book.view.book.SearchBook',
    'Book.view.book.ModifyBook'


    ],
    id : 'borderViewPort',
    layout : 'border',

    items : [

    Ext.create('Ext.Component', {
    region : 'north',
    height : 0

    }),
    {
    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'

    }, {
    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',
    models: ['Book'],
    stores: ['Books','BookCategories','BookSubCategories'],
    controllers: ['NewBook', 'SearchBook'],

    autoCreateViewport: true,
    launch: function() {
    Ext.create('Book.view.Viewport');

    }
    }
    );

  2. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120

    Default

    Hi--

    Can you share what errors you're getting? Also, if possible, creating a runnable test case of your issue would help debug this for you. If you can create a test case, I'll be happy to test it along with you.

    Thanks!
    Joel

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •