PDA

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



floraoma2000-extjs
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:

index.html

<!DOCTYPE html>
<!-- Auto Generated with Ext Designer -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXX</title>
<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>
</head>
</html>

designer.js

/*
* 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.
*/

Ext.Loader.setConfig({
enabled: true
});



Ext.application({
name: 'XXX',
stores: [
'land'
],
model: ['land'],

launch: function() {
Ext.QuickTips.init();

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


xxx.js


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

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

but it doesen't work.

Can anybody help me? Thanks in advance.

tvanzoelen
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.

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

Ext.define('XXX.view.xxx',
{ 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.
Thanks

tvanzoelen
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' }];

this.callParent();
}
});


Something like that

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

floraoma2000-extjs
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

tvanzoelen
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.

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

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

Is this right?

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

floraoma2000-extjs
25 Jun 2013, 8:45 AM
Hi,

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!:)