I'm unable to remove scrollbar in the textarea. Data for textarea is coming from a json file.
{
xtype: "fieldcontainer",
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 2,
items: [{
xtype: "textareafield",
name: "Message",
anchor: '100%',
grow:true,
scrollable: false,
value: widgetConfig.NOTES,
//width: "100%",
readOnly: true,
cls: "textareaStyles"
}]
}
scrollbar should be removed and the textarea height should auto increase
When you use grow:true in textareafield you have to adjust its height using growMin and growMax, in your case you are setting a height using flex:2
See a fiddle example
Related
{
layout: {
type: 'hbox'
},
items: [
{
xtype: 'selectfield',
placeHolder: 'selectfield',
autoSelect: false,
},
{
xtype: 'textfield',
placeHolder: 'textfield'
}
]
},
I want to use 'hbox' layoout with selectfield and textfield for horizontal components using Sencha Touch 2.0
but like this image, underlines for second component(textfield) in fieldset are not seen. What's wrong?
screenshot
Hi its nothing with hbox layout and fieldset. Its is due to selectField.these lines are the border of selectField. If you want to remove it you need something like this
{
xtype: 'selectfield',
placeHolder: 'selectfield',
autoSelect: false,
border: 0,
},
this will make it disappear these line
i hope you get it ;)
here is a simple fiddle
And In case if you want to have borders follow this code
{
xtype: 'selectfield',
border: 3,
style: 'border-color: blue; border-style: solid;',
flex: 1,
placeHolder: 'selectfield',
autoSelect: false,
},
{
xtype: 'textfield',
border: 3,
style: 'border-color: blue; border-style: solid;',
flex: 1,
placeHolder: 'textfield'
}
My panel is using an hbox layout. I am including "split: true" in the config for the panel's child containers. Can I adjust the width of the splitters?
First of all split: true is part of border layout, not hbox.
You can adjust width of the splitters with width (percentage or absolute value) config.
For hbox layout you can use flex config.
For HBox, you are supposed to add splitters in between your elements. You can then just set its width
https://fiddle.sencha.com/#fiddle/18h2
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: {
type: 'hbox'
},
items: [{
xtype: 'label',
text: 'column 1',
flex: 1
}, {
xtype: 'splitter',
width: 20,
style: 'border: 1px solid green'
}, {
xtype: 'label',
text: 'column 2',
flex: 2
}]
})
datefield in scrollable container is not rendering its picker properly. Here is the fiddle.
https://fiddle.sencha.com/#fiddle/17l8
Ext.application({
launch : function() {
Ext.create('Ext.container.Container', {
layout:'anchor',
scrollable:true,
width: 400,
height:'100px',
renderTo: Ext.getBody(),
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
defaults: {
labelWidth: 80,
// implicitly create Container by specifying xtype
xtype: 'datefield',
flex: 1,
style: {
padding: '10px'
}
},
items: [{
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'DOB'
},{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},{
xtype: 'textfield',
name: 'age',
fieldLabel: 'Age'
}]
});
}
});
Go to the fiddle, First enter the date, scroll down and enter name and age. Now again scroll to top and try to modify the date. Screen goes off. Screen will return when you give a mouse click.
PS: this is occuring only in EXt js 6. Not in any earlier version.
Figured it out...
in scorallable container, picker is not aligning to component after layout. We are doing it manually with the below override.
Ext.override(Ext.picker.Date, {
afterComponentLayout: function (width, height, oldWidth, oldHeight) {
var field = this.pickerField;
this.callParent([
width,
height,
oldWidth,
oldHeight
]);
// Bound list may change size, so realign on layout
// **if the field is an Ext.form.field.Picker which has alignPicker!**
if (field && field.alignPicker) {
field.alignPicker();
}
}
});
I am new to Ext.js & am having some issues scrolling a nested form on mobile devices. I have a grid panel & a form panel both inside the 'center' panel & I hide one depending on which selection was chosen in west panel. The grid section works fine (& scrolls in mobile thanks to the bufferedrenderer plug-in.) but I can't get the form to. It scrolls fine in desktop view & it even scrolls when I preview the mobile view in Chrome dev tools but when I try to use it on an actual device, there are no scroll bars & I can not drag the screen either. I've tried so many different ways but here's the gist of what I have. Any suggestions are appreciated.
Ext.define('App.view.main.Main', {
extend: 'Ext.container.Container',
plugins: ['viewport', 'responsive'],
xtype: 'app-main',
autoscroll: true,
defaults: {autoscroll: true},
overflowY: 'auto',
responsiveConfig: {
tall: {
layout: {
type: 'auto'
}
},
wide: {
layout: 'border'
}
},
items [{
xtype: 'panel',
region'north'
},{
xtype: 'panel',
region'west'
},{
xtype: 'panel',
region:'center'
autoscroll: true,
layout: 'fit',
items: [{
xtype: grid,
......
},{
xtype: 'form',
layout: 'fit',
height: '500',
autoscroll: true, //this does nothing??
overflowY: auto, //this does nothing either???
responsiveConfig: {
wide: {
layout: 'hbox'
},
tall: {
layout: 'auto'
}
},
layout: {
type: 'box',
align: 'stretch'
},
items: [{
xtype: 'textfield'
},{
xtype: 'textfield'.....
}]
}]
}]
I am working on ExtJs collapsible panel in table layout.
Whenever I open the page the panel comes up perfectly fine (width wise).
Please check the below images
But when I collapse the panel, the width changes!
See the below image:
A sample code to replicate this issue:
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
scrollable: true,
autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});
I have also created a fiddle with the same code.
JSFiddle Demo
Please help me in resolving this issue.
I want the width of the panel to remain fixed whether it is collapsed or not.
But I WANT to set width in the terms of percentage and not fixed absolute number.
To set the column width to '100%' use tableAttrs
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
}
Also 'scrollable' and 'autoScroll' need not to be set to true since the column width will be '100%'