View Full Version : Form title in frame header is cropped

19 Oct 2012, 8:22 AM
This image will tell everything I guess.

See the "WebIM" title there? at the very left side its cut. Its a form Panel which is in a accordion layout panel which is in east region of a border layout container. See my code.

var loginForm = Ext.create('Ext.form.Panel', {
title:'WebIM: Enter',
frame: true,
defaultType: 'textfield',
items: [{
fieldLabel: 'Nick',
emptyText: 'User name/login name',
name: 'nick',
fieldLabel: 'Password',
inputType: 'password',
name: 'password',
buttons: []

Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: header.html,
height: 120
region: 'center',
html: '<h3>Some text. Lorem ipsom?</h3>'
title: 'Access Panel',
region: 'east',
layout: 'accordion',
defaults: {
bodyPadding: '10 10 100 10',
collapsible: true,
layoutConfig: {
animate: true,
activeOnTop: true
width: 350,
items: [loginForm]

how can I fix this?

20 Oct 2012, 4:45 PM
I have tried your code with Ext 4.1.1 & Chrome. It does not cause the issue you mentioned. Everything is OK. However, try to change the title from "WebIM: Enter" to " WebIM: Enter" (with a space before "W").