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();
});
Related
I have a panel which contains items in its body, and I would like the panel itself to be draggable, but only when the user drags the panelheader. (I don't want the user to be able to drag the panel by clicking and dragging in the body). Is there a simple way to do this?
Here is my code for creating the panel:
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: true,
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
EDIT: I was able to figure out the problem and correct it. The solution has to do with the handle property of the Ext.drag.Source object. You have to specify the CSS handle of the element you want to be able to initiate the drag. In My case, the corrected code is as follows.
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: {handle: 'x-panelheader'}, // <- This is the part that needed to be changed
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
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
As what the title suggest, is that I have a panel that will execute a command onRender to add items, like the code below, a treepanel. I wrapped treepanel in a layout - border and then on a vbox panel to be put on region west. Unfortunately the whole tree panel does not render. I inspected the HTML, and the elements are there but they are sort of disabled because the elements have that blurry font in the firebug. Why is it doing that? Please help.
Ext.define('anr.panels.report', {
extend : 'Ext.panel.Panel',
pageLimit : 15,
title : 'Report Generator',
layout : 'border',
border : false,
frame : true,
initComponent: function() {
this.callParent(arguments);
},
onRender:function() {
var me = this;
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
var reportItem = {
xtype: 'panel',
layout: 'vbox',
id:'westpanel',
region:'west',
width: 350,
height: 300,
minSize: 350,
maxSize: 350,
border: false,
split: true,
margin: '1 0 5 1',
items: [
{
border: false,
layout: 'border',
items:[
{
xtype: 'treepanel',
height: 250,
width: 200,
store: store,
id: 'menu-panel',
frame: false,
rootVisible: false
}
]
}
]
};
this.add(reportItem);
this.callParent(arguments);
}
});
Im not really sure why you are using the onRender method instead of placing the panels in the items but there are too many errors there anyway.
Every border panel needs height, width or flex and it is required to have one panel with the center region.
If you change your code to this, it will work but be careful with all these nested panels, it seems like you are getting lost.
CODE
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention", leaf: true
},{
text: "homework", expanded: true,
children: [{
text: "book report", leaf: true
},{
text: "algebra", leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
Ext.define('anr.panels.report', {
extend : 'Ext.panel.Panel',
width: 800,
height: 400,
border: true,
title : 'Report Generator',
layout : 'border',
items: [{
xtype: 'panel',
layout: 'vbox',
region:'west',
width: 350,
height: 300,
minSize: 350,
maxSize: 350,
border: false,
split: true,
margin: '1 0 5 1',
items: [{
xtype: 'panel',
border: false,
layout: 'border',
flex: 1,
width: 350,
items:[{
xtype: 'treepanel',
height: 250,
width: 200,
store: store,
id: 'menu-panel',
region: 'center',
frame: false,
rootVisible: false
}]
}]
},{
xtype : 'panel',
region: 'center'
}]
});
Ext.create('anr.panels.report',{
renderTo: Ext.getBody()
});
I've been digging my mind all this morning to find the solution to this, I have an Extjs window where I want to put a chart as an item. I'm using Extjs 4, here's my window :
Ext.define('Metrics.view.ChartWin', {
extend: ['Ext.window.Window'],
alias: 'widget.chartwin',
requires :['Ext.chart.*','Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox', 'Metrics.view.DrawChart'],
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
shadow: false,
maximizable: true,
title: 'Area Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}],
items:[{
//I guess the problem comes from here??
xtype : 'drawchart'
}]
});
My chart :
Ext.define('Metrics.view.DrawChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.drawchart',
requires: ['Ext.chart.*'],
renderTo: Ext.getBody(),
width: 700,
height: 600,
animate: true,
store: 'GraphData',
shadow : true,
legend: {
position: 'right'
},
axes: [
{
title: 'Week',
type: 'Numeric',
position: 'left',
fields: ['Week'],
grid : true
},
{
title: 'In Out Backlog',
type: 'Numeric',
position: 'bottom',
fields: ['BL1 Alt']
}
],
theme: 'Red',
series: [
{
//BLA BLA BLA
}]
});
My chart works fine. Now please tell me, how do I add this chart to my window ? I get this error message :
Cannot read property 'isInstance' of undefined
Thank you.
Remove
renderTo: Ext.getBody()
from your chart definition. The Chart should be rendered in the window.
Then instantiate a window and set the chart as an item there:
Ext.create('Ext.window.Window', {
...
items: [{
xtype: 'drawchart'
}]
...
Look at the code here: http://jsfiddle.net/AMx6r/1282/
I need align the formpanels to the center, so I used the vbox layout, and after I used it the autoscroll did not work as before, the code is as below:
Usr.VWPanel = Ext.extend(Ext.Panel, {
id: null,
rid: null,
closable: true,
autoScroll: true,
buttonAlign: 'center',
layout: {
type:'vbox',
padding:'5',
pack:'center',
align:'center'
},
initComponent: function () {
Ext.apply(this, {
items: [
{
xtype: 'spacer',
height: 16
},
{
xtype: 'usr.usrform',
itemId: 'usr.vwpain.usrformt',
width: 600,
height: 500
},
{
xtype:'spacer',
height: 16
},
{
xtype: 'usr.loginform',
itemId: 'usr.vwpain.loginform',
width: 600
},
{
xtype: 'spacer',
height: 16
},
{
xtype: 'usr.subsform',
itemId: 'usr.vwpain.subsform',
width: 600
}],
...
plz advise.
the vbox layout will never show the scroller.
{
xtype: 'window',
title: 'My Window',
width: 500,
height: 500,
layout: 'vbox',
layoutConfig: {
pack: 'center',
align: 'center'
},
items: [
{
xtype: 'panel',
title: 'My Panel',
anchor: '80% 100%',
height: 300,
width: 300,
autoScroll: true,
items: [
{
xtype: 'panel',
html: 'this isform1',
height: 100
},
{
xtype: 'panel',
html: 'this isform1',
height: 100
},
{
xtype: 'panel',
html: 'this isform1',
height: 100
}
]
}
]
}
in your css you can set your My Panel margins to {0 auto} which will center the My Panel inside the window. This means you don't need a special layout config for your window.
I have added a listener on resize event to get the vertical scroll as for Vbox we have to provide height to get scroll but when window size get change scroller height remain constant.
Ext.define('DataConfigurations', {
extend: 'Ext.form.Panel',
bodyStyle: 'padding:5px 5px;',
listeners: {
resize: {
fn: function(el) {
this.setHeight(this.up('window').getHeight()-150); // 150 is extra for my panel coz of headers so have minus it.
console.log("new height = " + this.up('window').getHeight()-150);
}
}
},
title: "Update Data Configurations",
Hopes this help.