View Full Version : Getting an extjs layout into a html div

24 Jun 2013, 12:08 AM
Hi all,

I've an application generated by the Tool "Ext Designer version 1.2.3".
The output is like the following:


<!DOCTYPE html>
<!-- Auto Generated with Ext Designer -->
<!-- Modifications to this file will be overwritten. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-gray.css"/>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="designer.js"></script>


* File: designer.js
* Date: Mon Dec 17 2012 11:17:48 GMT+0100 (CET)
* This file was generated by Ext Designer version 1.2.3.
* http://www.sencha.com/products/designer/
* This file will be auto-generated each and everytime you export.
* Do NOT hand edit this file.

enabled: true

name: 'XXX',
stores: [
model: ['land'],

launch: function() {

var cmp1 = Ext.create('XXX.view.xxx', {
renderTo: Ext.getBody()


Ext.define('XXX.view.xxx', {
extend: 'Ext.container.Viewport',

//autoScroll: true,
layout: {
type: 'border'

I want to set a maxwidth to my application. Ive read that 'viewport' always takes the whole browser.
But I want to have a width of 600px. I tried to put all in a div like

<div id="cmp1" style="width:600px"></div>

but it doesen't work.

Can anybody help me? Thanks in advance.

24 Jun 2013, 3:58 AM
Don't use a viewport in that case, just a panel and render it to the document body. Viewport streches up.

24 Jun 2013, 4:11 AM
Ok I change my xxx.js to

{ extend: 'Ext.container.Panel',
//autoScroll: true,
layout: { type: 'border' }

and an error occurs. Where and what I have to change in my code?
Please give me another hint or example.

24 Jun 2013, 4:23 AM
If you specify a border layout you must specify as well a center panel in it.

Ext.define('XXX.view.xxx', {
extend: 'Ext.panel.Panel',
width: 600,
height: 600,
//autoScroll: true,
layout: {
type: 'border'
initComponent: function(){

this.items: [{ xtype: 'panel', region:'center' }];


Something like that

extend: 'Ext.container.Panel' should be Ext.panel.Panel

24 Jun 2013, 11:01 PM
Thank you very much for your answer.
It works fine. But its not the 100% solution for my idea.
I like to have my application in the center of my browser. On the right and left side there
should be a frame. Always I minimize my browser first the frame gets smaller like this forum application.
My idea : to make a viewport with a background color und set the application panel inside??

Any other ideas?
Thanks in advance

24 Jun 2013, 11:30 PM
You could try your original idea to render the panel on the div you created and center that div. In your case you could use a window as well.

25 Jun 2013, 12:22 AM
So I have to put the <div> in the index.html between the <body> tags.

<div id="panel_id" style="width:600px"></div>

Is this right?

25 Jun 2013, 12:24 AM
that would be better then somewhere else :) Between the body tags it will be visible

25 Jun 2013, 8:45 AM

thanks for your answer. This day is a confusing day.:-/ I solved my problem with inserting

style: "margin: 0px auto 0px auto;"

to my panel

and that was the solution of my probelm

Thanks for helping me!:)