View Full Version : Ext-JS 4 border layout inside card layout

23 Sep 2012, 2:02 PM
I am creating an application with Ext-JS 4.
1.) Login card
2.) Application card
Application card has a border layout.
When I show them separately, they work but when I put them in a Viewport together, they don't work.
Here is my Viewport:

Ext.define('MyApp.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'card',

items: [
xtype: 'loginform',
xtype: 'mainapp'
Here is a part of my Login card:

Ext.define('Sabrina.view.login.Form' ,{
extend: 'Ext.form.FormPanel',
alias : 'widget.loginform',

name: 'loginform',
frame: true,
title: 'Login',
bodyPadding: '5px 5px 0',
width: 350,
Here is a part of my Application card:

Ext.define('Sabrina.view.Main', {
extend: 'Ext.panel.Panel',
alias: ['widget.mainapp'],
layout: 'border',
items: [
//here I have 'west' and 'center' regions
I've created the same components in a different application separately and they work but here not. Do I have to put something more if I want a border layout inside card layout?
I'm getting this:

Uncaught TypeError: Cannot call method 'substring' of undefined
Thank you. :)

24 Sep 2012, 12:47 PM
You are trying to access a type that is not available. Please check the following:

You have requires:[] where needed
That you have not use the wrong case when accessing a type 'loginForm' instead of 'loginform'
Use ext-dev.js instead of ext.js to display warnings in your console about possible problems.


24 Sep 2012, 12:51 PM
Finally... Someone with a great answer!

I'll try it and if this is the case, I'll mark this as "accepted" answer.

Thank you @scottmartin.