I wan to apply horizontal scrollbar in my panel(ExtJS)
my code is...
var reportPanel = new Wtf.Panel({
border: false,
title: "Chart View",
autoScroll: true,
iconCls: "pwndCRM piechartIcon",
bodyStyle: 'background:white',
layout: 'border',
tbar: [this.pieChartButton, this.barChartButton],
closable: true,
items: [new Wtf.Panel({
id: mainpanid + "center_panel",
autoScroll: true,
//columnWidth:.47,
layout: "fit",
border: true,
region: "center",
width: '50%',
collapsible: true
})
, new Wtf.Panel({
id: mainpanid + "east_panel",
autoScroll: true,
border: true,
layout: "fit",
//columnWidth:.48,
region: "east",
width: '50%',
collapsible: true
})
]
});
It is not working can anybody tell what is wrong with code...?
Related
I have two panels inside a container (layout: fit) and both panels need to be collapsible horizontal.
To realize this I need to have three panels (2 panels with region: west and one panel region center) like this:
defaults: {
collapsible: true,
split: true,
margin: 1,
padding: 1,
height: '100%'
},
items: [{
title: 'west 1',
floatable: false,
flex: 100,
region: 'west'
}, {
hidden: true,
collapsed: true,
region: 'center',
flex: 1,
split: false
}, {
title: 'west 2',
floatable: false,
flex: 100,
floatable: false,
region: 'west',
split: false
}]
It works but the extra panel is very uggly!. Does anyone have a better sollution?
regards,
Arno
Use it like below code snippet:
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Container',
layout: 'hbox',
defaults: {
collapsible: true,
collapseDirection: 'left',
margin: 1,
height: '100%'
},
items: [{
title: 'west 1',
width: 100
}, {
title: 'west 2',
floatable: false,
flex: 1,
split: false
}],
renderTo: Ext.getBody()
});
Working Example
Hope this will help/guide you.
I need some help about a form with a textarea field.
My problem.
I have a simple Ext.window in which I have put an Ext.FormPanel. In this Ext.FormPanel I have put an Ext.form.FieldSet in which I have put some fields. One of these field is a textarea (Ext.form.TextArea),
Now, my objective is to render responsive this textarea when I resize the Ext.window.
It is possible to obtain this behavior?
This is my current code:
Window in which reside the Ext.FormPanel
var win = new Ext.Window({
id:'winTest',
layout:'fit',
modal:true,
title:'Title',
width:590,
height:300,
closeAction:'close',
plain: true,
autoScroll: true,
items:[form],
listeners: {
'beforeclose': function (p) {
}
}
});
Ext.FormPanel in which reside the Ext.form.FieldSet
var form = new Ext.FormPanel({
id:'FormTest',
layout : 'form',
width:510,
labelAlign: 'right',
labelWidth: 120,
autoScroll:true,
bodyStyle:'padding:2px;background-color:#E9EFF8;',
monitorValid:true,
waitMsgTarget: true,
border: true,
bodyBorder: true,
trackResetOnLoad:true,
items: [fieldset]
});
Fieldset in which I have put some fileds
var fieldset = Ext.form.FieldSet({
id:'fsTest',
autoHeight: true,
defaultType: 'textfield',
items:[.....,textarea]
//boxMaxWidth:450
//border:true
})
Textarea putted in the fieldset (to shorted, I have reported only the textarea)
var textarea = new Ext.form.TextArea({
id:'textareaTest',
name:'TextArea',
fieldLabel:'Insert',
hidden:false,
width:310,
height:60,
maxLength:500,
allowBlank: true
});
Thanks for any precious help.
Lorenzo.
It should be like this:-
var win = new Ext.Window({
id: 'winTest',
layout: 'vbox',
modal: true,
title: 'Title',
width: 590,
height: 300,
closeAction: 'close',
plain: true,
autoScroll: true,
items: [{
xtype: 'form',
id: 'FormTest',
flex: 1,
layout: 'vbox',
width: 510,
labelAlign: 'right',
labelWidth: 120,
autoScroll: true,
bodyStyle: 'padding:2px;background-color:#E9EFF8;',
monitorValid: true,
waitMsgTarget: true,
border: true,
bodyBorder: true,
trackResetOnLoad: true,
items: [{
xtype: 'fieldset',
id: 'fsTest',
//autoHeight: true,
flex: 1,
layout: 'vbox',
//defaultType: 'textfield',
items: [{
xtype: 'textarea',
flex: 1,
id: 'textareaTest',
name: 'TextArea',
fieldLabel: 'Insert',
hidden: false,
width: 310,
//height: 60,
maxLength: 500,
allowBlank: true
}]
//boxMaxWidth:450
//border:true
}]
}]
}).show();
Please have a look at this example
I got a viewport and within the center region a window.
When I try to move the window to the top of the center region, the window doesn't stay on the top.
I note that the window is positioned at the top + the height of the north region.
This is the code:
Ext.onReady(function(){
Ext.create('Ext.container.Viewport', {
layout: 'border',
forceFit: true,
hideMode: 'offsets',
items: [
{
region:'north',
id:'btns',
height: 150,
layout:
{
type: 'hbox',
padding:'5',
align:'stretch'
},
items:[]
}, {
region: 'east',
autoScroll: true,
border: false,
items:[{
xtype: 'container',
id: 'page_gauche1',
width: 500,
height: 920,
border: false
}]
}, {
region: 'center',
id: 'center',
autoScroll: true,
border: true,
items: {
xtype: 'container',
id: 'page_gauche4',
width: 1400,
height: 920,
border: false,
hidden: true
}
}]
});
Ext.create('Ext.Window', {
layout: 'fit',
border: false,
header: true,
draggable: true,
resizable: true,
autoShow: true,
constrain: true,
renderTo: 'center',
width: 300,
height: 200
});
});
A window is a floating component you should not use renderTo here! In addition you should never set the id on your own if it can be avoided!
Do you this?
Fiddle
{
region: 'center',
id: 'center',
autoScroll: true,
border: true,
items: {
xtype: 'container',
id: 'page_gauche4',
width: 1400,
height: 920,
border: false,
hidden: true
},
listeners: {
boxready: function(self) {
Ext.create('Ext.Window', {
layout: 'fit',
border: false,
autoShow: true,
constrain: true,
constrainTo: self.getEl(),
width: 300,
height: 200
});
}
}
}
I am using ExtJS HTMLEditor and set the properties as follows-
{ xtype: "htmleditor", width: 500, height: 250}
While entering the text, after reaching the specified height, the toolbar gets disappeared.
I tried removing the height and setting autoHeight: true but in both cases the HTML editor does not fit to the window (HTMLEditor is inside Ext.form.FormPanel).
Anyone having idea to solve it.
This is my code
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'This is Title',
resizable: false,
modal: true,
height: 300,
width: 500,
layout: 'fit',
closeAction: 'hide',
items: [
new Ext.form.FormPanel({
border: false,
autoHeight: true,
items: [
{ allowBlank: false, xtype:
"htmleditor", height: 250, width: 600, anchor:'100%'}
]
})
],
buttons: [
{text: 'Ok' },
{text: 'Cancel'}
]
}).show();
});
I have solved the problem- Added layout: 'fit' to Formpanel
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'This is Title',
resizable: false,
modal: true,
height: 300,
width: 500,
layout: 'fit',
closeAction: 'hide',
items: [
new Ext.form.FormPanel({
border: false,
layout: 'fit', // This fixed the issue
items: [
{ allowBlank: false,
xtype: "htmleditor",
height: 250,
width: 600
}
]
})
],
buttons: [
{text: 'Ok' },
{text: 'Cancel'}
]
}).show();
});
I'm about to go crazy.
I have my panels configured as follows:
accordion = new Ext.Panel({
id: 'accordionPanel',
title: 'Options',
region: 'center',
animCollapse: true,
border: false,
minWidth: 150,
maxWidth: 400,
autoScroll: true,
autoHeight: true,
layout: 'accordion',
layoutConfig: {
animate: true
}
});
var panelOne = new Ext.Panel({
region: 'center',
layout: 'border',
defaults: {
collapsible: true,
split: true
},
items: [{
title: 'Navigation',
region: 'west',
margins: '5 0 0 0',
animCollapse: true,
autoScroll: true,
autoHeight: true,
width: 200,
minWidth: 150,
maxWidth: 400,
layout: 'border',
layoutConfig: {
animate: true
},
items: [
Ext.Panel({
region: 'north',
border: false,
collapsible: false,
height: 65,
align: 'center',
html: myHtmlSource
}),
accordion
]
}, {
title: 'Main Content',
region: 'center',
layout: 'absolute',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
},
items: [someWindows],
collapsible: false,
margins: '5 0 0 0'
}]
});
viewport = new Ext.Viewport({
layout: 'border',
id: 'viewport',
items: [panelOne]
})
accordionPanel has a bunch of grids like this one inside of it:
var myGrid = new Ext.grid.Panel({
id: 'myGrid',
layout: 'anchor',
border: false,
title: 'My Grid',
width: 412,
store: store,
heigth: 300,
frame: false,
columns: [myColumns],
.....
});
Each of those grids is a separate accordion tab.
Now my problem is that those grids never display scrolls.
Just to be clear, this looks like the border layout that is displayed here.
Except that the navigation panel has an accordion inside of it with multiple grids in it.
Can't think of anything else to try.
Anyone?