How to render responsive a Ext.form.TextArea - extjs

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

Related

"Layout run failed" error message when i hide toolbar in xtype: 'htmleditor'

I use xtype: 'htmleditor' in my code without toolbar. When I hide it I have a Layout run failed error message. What can I do to overcome this error?
{
xtype: 'htmleditor',
rows: 2,
itemId: 'display',
colspan: 6,
margin: '0 0 20 0',
rtl: true,
layout: {
type: 'vbox',
align: 'stretch'
},
readOnly: true,
height: 200,
width: 292
},
In another class I hide this toolbar:
{
xtype: 'triggerfield',
itemId: 'fml',
type: 'formula',
allowBlank: false,
editable: false,
layout: {
type: 'vbox',
align: 'stretch'
},
fieldLabel: Dufo.ux.fa.formula,
fieldStyle: 'direction: ltr !important',
onTriggerClick: function() {
Ext.create(Dufo.view.other.Formula, { opener: this}).show();
Ext.ComponentQuery.query('#display')[0].toolbar.hide(false);
Ext.ComponentQuery.query('#display')[0].toolbar.setVisible(false);
}
}
When I hide this toolbar I encountered the Layout run failed error. How can I fix this?
thank you for your attention and your answers.
I find out what can I do to hide my toolbar in xtype: 'htmleditor',
I write this code for doing this:
{
xtype: 'htmleditor',
rows: 2,
itemId: 'display',
colspan: 6,
margin: '0 0 20 0',
rtl: true,
layout: 'fit',
frame: false,
enableColors: false,
enableAlignments: false,
enableFont: false,
enableFontSize: false,
enableFormat : false,
enableLinks : false,
enableLists : false,
enableSourceEdit: false,
readOnly: true,
height: 200,
width: 292
},

Align : 'stretch' not working for Accordion layout

I have included an 'accordion' layout, which is included in 'west' region of a 'border' layout. But the align : 'stretch' property is not working for the accordion layout.
Accordion Layout
var user_menu_items = new Ext.Panel({
layout: 'accordion',
height: 565,
align: 'stretch',
id: 'usermenu',
items: [{
layout: 'fit',
title: 'Configuration',
id: 'menulist1',
html: 'Group1 Content',
collapseFirst: true
}, {
title: 'User Action Group2',
id: 'menulist2',
html: 'Group2 Content'
}, {
title: 'User Action Group3',
id: 'menulist3',
html: 'Group3 Content'
}]
});
Border Layout
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
layout: 'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:2px'
},
items: [{
title: 'USER MENU',
region: 'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 225,
minSize: 100,
maxSize: 250,
collapsible: true,
collapsed: false,
bodyStyle: 'padding:0px',
items: [user_menu_items]
}]
}],
renderTo: Ext.getBody()
});
I am using extjs-4.2.2
you can try below:
var user_menu_items = new Ext.Panel({
layout: 'accordion',
//height: 565,
//align: 'stretch',
id: 'usermenu',
items: [{
layout: 'fit',
title: 'Configuration',
id: 'menulist1',
html: 'Group1 Content',
collapseFirst: true
}, {
title: 'User Action Group2',
id: 'menulist2',
html: 'Group2 Content'
}, {
title: 'User Action Group3',
id: 'menulist3',
html: 'Group3 Content'
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
layout: 'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:2px'
},
items: [{
title: 'USER MENU',
region: 'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 225,
minSize: 100,
maxSize: 250,
collapsible: true,
collapsed: false,
bodyStyle: 'padding:0px',
layout: 'accordion', // <------- ADD THIS LINE TO WEST PANEL.------------------>
items: [user_menu_items]
}]
}],
renderTo: Ext.getBody()
});
If I am not mistaken, Ext.panel.Panel does not have a config option align.
What does have a config option align is the Ext.layout.container.Accordion.
So the code would be:
var user_menu_items = new Ext.Panel({
layout: {
type:'accordion',
align: 'stretch'
},
height: 565,
...

how to show data store grid on ext.window.window.modal

I have a problem rendering data store grid on window modal.
here's the code on data.store :
var list_pp = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
model: 'list_pp',
proxy: {
type: 'ajax',
api: {
read: pp_get_url,
create: pp_set_url,
update: pp_up_url,
destroy: pp_del_url
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
},
writer: {
type: 'json',
writeAllFields: true,
root: 'data'
}
},
//autoLoad: false,
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
}
}
});
here's the code that render on some page :
var grid_pp_list = Ext.create('Ext.grid.Panel',
{
width: '100%',
frame: false,
loadMask: true,
collapsible: false,
title: 'Detail PP',
store: list_pp,
columns: [
{
header: 'No PP',
width: 130,
sortable: true,
dataIndex: 'doc_no',
xtype: 'templatecolumn',
tpl: '{doc_no}<br/>{pp_id}/{sifat}<br/>'
}, {
header: 'Tgl.',
width: 100,
sortable: true,
dataIndex: 'pp_date',
xtype: 'datecolumn',
format:'y-m-d'
}, {
header: 'SBU Pemesan',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
},{
header: 'Validasi',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
},{
header: 'Action',
xtype: 'actioncolumn',
width: 60,
sortable: false,
menuDisabled: true,
xtype: 'templatecolumn',
tpl: 'Detail'
},{
header: 'Modified by',
width: 120,
dataIndex: 'modified_by',
sortable: true,
xtype: 'templatecolumn',
tpl: '<i class="icon-user"></i>{modified_by}'
},{
header: 'Modified Date',
width: 120,
sortable: true,
dataIndex: 'modified_date',
xtype: 'datecolumn',
format:'y-m-d H:m:s'
}]
here's the code on window modal :
var modal_pp = Ext.create('Ext.grid.Panel',
{
width: '100%',
frame: false,
loadMask: true,
collapsible: false,
title: 'Modal PP',
store: list_pp,
columns: [
{
header: 'No PP',
width: 130,
sortable: true,
dataIndex: 'doc_no',
xtype: 'templatecolumn',
tpl: '{doc_no}<br/>{pp_id}/{sifat}<br/>'
}, {
header: 'Tgl.',
width: 100,
sortable: true,
dataIndex: 'pp_date',
xtype: 'datecolumn',
format:'y-m-d'
}, {
header: 'SBU Pemesan',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
}],
dockedItems:
[{
xtype: 'pagingtoolbar',
store: list_pp, // same store GridPanel
dock: 'bottom',
displayInfo: true
}]
});
here's generate trigger button trigger for modal window:
text: 'Generate',
iconCls: 'icon-add',
handler: function(){
if (!win) {
win = Ext.widget('window', {
closeAction: 'hide',
width: 1000,
height: 620,
minWidth: 300,
minHeight: 300,
layout: 'fit',
resizable: true,
modal: true,
items: modal_pp
});
}
win.show();
}
in rendering page everything is fine, but in window modal i can't render data store. please if anyone can give a guide or help i will be really appreciate it.
Remove width attributes from the modal grid. You cant specify width in % and if your containing parent has fit layout it doesn't matter anyway.
Wrap items in an array: items: [modal_pp]

ExtJS HTMLEditor toolbar gets disappeared after reaching specified height

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();
});

Scrolling in extjs grids

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?

Resources