I would like to display a vertical scrollbar into the second fieldset but it seems that the fieldset height always adapts to its content.
The scrollable parameter doesn't change anything.
Ext.create('Ext.window.Window', {
width: 800,
height: 300,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'fieldset',
items: [{
fieldLabel: 'foo',
xtype: 'textfield'
}]
}, {
xtype: 'fieldset',
scrollable: 'y',
items: [{
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}]
}]
}).show();
For the secound fildset set flex: 1 to get a visible scrollbar.
It will then receive the remaining height of the window container.
Ext.create('Ext.window.Window', {
width: 800,
height: 300,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'fieldset',
items: [{
fieldLabel: 'foo',
xtype: 'textfield'
}]
}, {
xtype: 'fieldset',
scrollable: 'y',
flex: 1, // <---------- here
items: [{
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}, {
fieldLabel: 'foo',
xtype: 'textfield'
}]
}]
}).show();
Related
I'm working on a Sencha ExtJS 6.5 project. I have two gridpanels, one next to each other, and I need them to be scrollable, but no matter what I try, I can't seem to accomplish that.
I must add that this two gridpanels are inside another panel, which is also within a ViewPort.
This is a picture of what I need:
And this the code I have written so far:
Ext.define('ScrollTest.view.MyViewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.myviewport',
requires: [
'ScrollTest.view.MyViewportViewModel',
'Ext.toolbar.Toolbar',
'Ext.button.Button',
'Ext.grid.Panel',
'Ext.grid.column.Column',
'Ext.view.Table'
],
viewModel: {
type: 'myviewport'
},
layout: 'fit',
items: [
{
xtype: 'panel',
alignOnScroll: false,
border: false,
itemId: 'oMainPanel',
title: 'Familias de Activos',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
itemId: 'oGridToolbar',
items: [
{
xtype: 'button',
text: 'Agregar Familia'
},
{
xtype: 'button',
text: 'Modificar Familia'
},
{
xtype: 'button',
text: 'Eliminar Familia'
},
{
xtype: 'button',
text: 'Detalle'
}
]
}
],
items: [
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'gridpanel',
flex: 1,
alignOnScroll: false,
scrollable: true,
title: 'Familias',
headerBorders: false,
bind: {
store: '{oStore}'
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'blah blah'
}
],
viewConfig: {
scrollable: 'vertical'
}
},
{
xtype: 'gridpanel',
flex: 1,
alignOnScroll: false,
scrollable: 'vertical',
title: 'Articulos',
bind: {
store: '{oStore2}'
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'blop blop'
}
]
}
]
}
]
}
]
});
What am I doing wrong? Thank you very much in advance.
You have an unnecessary layer of nesting, there is a panel with no layout defined. Remove it:
Ext.define('ScrollTest.view.MyViewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.myviewport',
layout: 'fit',
items: [{
xtype: 'panel',
border: false,
itemId: 'oMainPanel',
title: 'Familias de Activos',
layout: {
type: 'hbox',
align: 'stretch'
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
itemId: 'oGridToolbar',
items: [{
xtype: 'button',
text: 'Agregar Familia'
}, {
xtype: 'button',
text: 'Modificar Familia'
}, {
xtype: 'button',
text: 'Eliminar Familia'
}, {
xtype: 'button',
text: 'Detalle'
}]
}],
items: [{
xtype: 'gridpanel',
flex: 1,
title: 'Familias',
store: {
data: (function() {
var data = [],
i;
for (i = 1; i <= 100; ++i) {
data.push({id: i});
}
return data;
})()
},
columns: [{
dataIndex: 'id',
text: 'blah blah'
}]
}, {
xtype: 'gridpanel',
flex: 1,
title: 'Articulos',
store: {
data: (function() {
var data = [],
i;
for (i = 1; i <= 100; ++i) {
data.push({id: i});
}
return data;
})()
},
columns: [{
dataIndex: 'id',
text: 'blop blop'
}]
}]
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
new ScrollTest.view.MyViewport();
}
});
the label of my textfield in ExtJS will not get bigger no matter what I try. It seems to be moving to 2 rows to accommodate size. Can anyone see what I am doing wrong?
I have a form, inside a fieldset, inside a panel.
Ext.define('ExtApplication4.view.admin.Admin', {
extend: 'Ext.panel.Panel',
xtype: 'app-admin',
controller: 'admin',
itemId: 'adminItemId',
requires: [
'ExtApplication4.view.admin.AdminController',
'ExtApplication4.util.GlobalVar'
],
title: 'Admin',
//html: 'This is my Admin Panel',
items: [{
xtype: 'fieldset',
title: 'database values',
width: 400,
items: [{
xtype: 'form',
//labelWidth: 200,
monitorValid: true,
formBind: true,
items: [{
//xtype: 'fieldset',
//title: 'database values',
//width: '100%',
defaultType: 'textfield',
margin: '10px,0,10px,0',
fieldDefaults: {
labelWidth: 200
},
items: [
{
allowBlank: false,
fieldLabel: 'Accrued',
itemId: 'itemIdAccrued',
name: 'nameAccrued',
emptyText: 'Accrued'
},
{
allowBlank: false,
fieldLabel: 'YTD End Val',
name: 'YTDEndVal',
emptyText: 'YTDEndVal',
itemId: 'itemIdYTDEndVal'
},
{
allowBlank: false,
fieldLabel: 'Margin Req',
name: 'MarginReq',
emptyText: 'MarginReq',
itemId: 'itemIdMarginReq'
},
{
allowBlank: false,
fieldLabel: 'MarginExc',
name: 'MarginExc',
emptyText: 'MarginExc',
itemId: 'itemIdMarginExc'
},
{
xtype: 'displayfield',
hideEmptyLabel: false,
value: 'All fields must be filled out',
style: 'text-align:left'
}
],
buttons: [{
text: 'Submit',
formBind: true,
listeners: {
click: 'onButtonSubmitPTValues'
}
}]
Instead of fieldDefaults use defaults as config property.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
itemId: 'adminItemId',
title: 'Admin',
//html: 'This is my Admin Panel',
items: [{
xtype: 'fieldset',
title: 'database values',
width: 400,
items: [{
xtype: 'form',
//labelWidth: 200,
monitorValid: true,
formBind: true,
items: [{
//xtype: 'fieldset',
//title: 'database values',
//width: '100%',
defaultType: 'textfield',
margin: '10px,0,10px,0',
defaults: {
labelWidth: 200
},
items: [
{
allowBlank: false,
fieldLabel: 'Accrued',
itemId: 'itemIdAccrued',
name: 'nameAccrued',
emptyText: 'Accrued'
},
{
allowBlank: false,
fieldLabel: 'YTD End Val',
name: 'YTDEndVal',
emptyText: 'YTDEndVal',
itemId: 'itemIdYTDEndVal'
},
{
allowBlank: false,
fieldLabel: 'Margin Req',
name: 'MarginReq',
emptyText: 'MarginReq',
itemId: 'itemIdMarginReq'
},
{
allowBlank: false,
fieldLabel: 'MarginExc',
name: 'MarginExc',
emptyText: 'MarginExc',
itemId: 'itemIdMarginExc'
},
{
xtype: 'displayfield',
hideEmptyLabel: false,
value: 'All fields must be filled out',
style: 'text-align:left'
}
],
buttons: [{
text: 'Submit',
formBind: true,
}]
}]
}]
}]
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>
I have two vbox that I want right next to each other. However, only the first one is showing up. Why is this and how do I change it? Here is my code
layout: 'fit',
title: 'Avail Requests Details',
minWidth: 1000,
minHeight: 600,
width: 1174,
height: 600,
autoShow: true,
//listeners: {
// beforedestroy: 'onBeforeDestroy'
//},
items: [{
xtype: 'form',
reference: 'viewForm',
bodyPadding: 10,
defaults: {
xtype: 'container',
height: 25,
layout: {
type: 'column'
},
defaults: {
columnWidth: 0.3,
labelWidth: 140
}
},
layout: {
type: 'vbox',
},
items: [{
xtype: 'displayfield',
fieldLabel: 'CHANNEL',
name: 'Channel'
},
{
xtype: 'displayfield',
fieldLabel: 'ADVERTISER',
name: 'AdvertiserName'
},
{
xtype: 'displayfield',
fieldLabel: 'DEMO',
name: 'Demo'
},
{
xtype: 'displayfield',
fieldLabel: 'COMMENTS',
name: 'comments'
}],
layout: {
type: 'vbox',
},
items: [{
xtype: 'displayfield',
fieldLabel: 'CHANNEL',
name: 'Channel'
},
{
xtype: 'displayfield',
fieldLabel: 'ADVERTISER',
name: 'AdvertiserName'
},
{
xtype: 'displayfield',
fieldLabel: 'DEMO',
name: 'Demo'
},
{
xtype: 'displayfield',
fieldLabel: 'COMMENTS',
name: 'comments'
}]
}]
});
You have two items definition in your form, so second just overrite first, not adding new one. Also you have to use hbox layour for parent component.
I updated your code, check this fiddle.
It seems ridiculous to have to ask this question - but here we go. How do you align a Label with a textfield horizontally?
I need:
Label Text
Label
TextArea
Here is my code. I've tried everything, including a labelField but the text does not appear in my view.
Ext.define('CAMSApp.view.OpBuyoffVoidView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffvoidview'], //ToDo Use I18N
config: {
xtype: 'Ext.form.Panel',
cls: 'dialogview formview',
centered: true,
scrollable: 'vertical',
modal: true,
screenId: 'opbuyoffvoidview',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Void Buyoff',
cls: 'grey-bold-34pt',
ui: 'transparent',
items: [{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Cancel',
idForAction: 'opbuyoff-void-cancel_btn',
}, {
xtype: 'spacer',
},{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Save',
idForAction: 'opbuyoff-void-save_btn',
}],
},
{
xtype: 'panel',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
padding: 5
},
items: [
{
xtype: 'label',
cls: 'block',
text: 'tesdfasrewaer'
},
{
fieldLabel: 'label',
labelWidth: 300,
xtype: 'textfield',
value: 'blahhhhh',
}, {
// xtype: 'panel' implied by default
xtype: 'textfield',
value: 'blahhhhhhhhhhh',
fieldLabel: 'text 2',
},{
xtype: 'textareafield',
width: 460,
height: 230,
idForUpdate: 'buyoff_reason_void',
//cls: 'priorityMedLabel',
}],
},
],
listeners: {
initialize: function(me, eOpts) {
CAMSApp.util.I18N.resolveStaticUIBindings(me);
},
show: function (me, eOpts) {
// Publish the screen id event.
log('[OpBuyoffVoid.show]');
CAMSApp.app.fireEvent('setscreenfocus', this);
},
},
}
});
So far I understood from your question that you need structure like below:
Label Text
Label
TextArea
Put below items in your view file:
items: [{
xtype: 'fieldset',
title: 'Enter your name and bio',
items: [{
xtype: 'textfield',
label: 'Name',
name: 'name'
}, {
xtype: 'textfield', // This textfield is dummy.
label: 'Bio', // You can simply put html here
labelWidth: '100%' // And can put your css to mimic default sencha label
}, {
xtype: 'textareafield',
name: 'bio'
}]
}]
Here is the fiddle for ref. Let me know if it serves your purpose or not.
I need to create several views, with the same content, having only a grid that will be a little different from each others.
My idea is to create a base view, but I don´t know how change this grid in the inherited classes.
Base:
Ext.define('App.view.cadastro.FiltroBase',{
extend: 'App.controls.CoWindow',
alias: 'widget.filtrobase',
modal: false,
width: 800,
height: 400,
layout: 'vbox',
items: [
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'middle'
},
width: '100%',
defaults: {
padding: 4
},
items: [
{
xtype: 'label',
text: i18n.procurarPor
},
{
xtype: 'combobox',
itemId: 'comboBox',
queryMode: 'local',
forceSelection: true,
width: 150
},{
xtype: 'label',
text: 'Filtro:'
},
{
xtype: 'textfield',
itemId: 'filtro',
enableKeyEvents: true,
flex: 1
},
{
xtype: 'container',
width: 100,
layout: 'fit',
items: [
{
xtype: 'button',
text: i18n.pesquisar,
action: 'pesquisar',
itemId: 'botaoPesquisa',
icon: 'assets/img/16/find.png'
}
]
}
]
},
{
xtype: 'grid', ******************
flex: 1,
width: '100%',
itemId: 'grid',
columns: [
{
text: i18n.nome,
dataIndex: 'nome',
flex: 1
}
],
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true
}]*****************
}
],
buttons: [
{
text: i18n.incluir,
action: 'incluir',
itemId: 'botaoIncluir',
icon: 'assets/img/16/new.png'
},
{
text: i18n.editar,
action: 'editar',
itemId: 'botaoEditar',
icon: 'assets/img/16/edit.png'
}
]
});
The general idea is to do something like this:
Ext.define('BaseGrid', function(){
initComponent: function(){
this.columns = this.getColumns();
this.callParent();
},
getColumns: Ext.emptyFn
});
Ext.define('SubGrid', {
getColumns: function(){
return [];
}
});