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.
Related
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.
A modal panel on top of another modal panel?
Is this possible in Sencha? My modal window opens, but it opens behind my already open modal. Any help would be greatly appreciated.
Also...not sure if this matters but I am using the same controller for both modals.
Here is my second modal view:
Ext.define('CAMSApp.view.OpBuyoffVoidView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffvoidview'], //ToDo Use I18N
config: {
xtype: 'panel',
cls: 'dialogview formview',
centered: true,
scrollable: 'vertical',
modal: true,
screenId: 'opbuyoffvoidview',
layout: {
type: 'vbox',
align: 'center',
},
defaults: {
minHeight: 46
},
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',
textI18N: 'Save',
idForAction: 'opbuyoff-void-save_btn',
}],
},
{
xtype: 'container',
ui: 'transparent',
layout: 'vbox',
cls: 'OpBuyoffVoidContainer',
items: [{
xtype: 'panel',
flex: 1,
ui: 'transparent',
items: [{
xtype: 'container',
cls: 'formContainer dialogContentScrolling',
items: [{
xtype: 'formpanel',
scrollable: null,
ui: 'transparent',
cls: 'fieldSetReadOnly',
defaults: {
xtype: 'textfield',
labelCls: 'lightgrey-bold-28pt',
readOnly: true,
},
items: [{
labelI18N: 'Buyoff:',
},{
id: 'buyoff_group_void',
},{
labelI18N: 'User:',
},{
id: 'buyoff_user_void',
}],
}],
},{
xtype: 'label',
htmlI18N: 'You are voiding the above Buyoff. Please enter the reason for the void below:',
//cls: 'priorityLowLabel',
},{
xtype: 'textareafield',
idForUpdate: 'buyoff_reason_void',
//cls: 'priorityMedLabel',
},{
xtype: 'label',
htmlI18N: '*Reason is required to void a buyoff',
//cls: 'priorityHighLabel',
}],
}],
}],
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);
},
},
}
});
That should not be a problem. When you open 2 modal windows, the second one overlaps the first one with a z-index 10 higher than the first. I think the problem is with the order in which you are showing the modal windows. Check out a quick fiddle I created to validate on ExtJS 6
https://fiddle.sencha.com/#fiddle/133n
I try to understand the basics of the extjs MVC.
I created the example app with the Sencha CMD. This comes with some basic things. What i try to make is a panel with a toolbar where i have a menu. When i click on a item in the menu i want to load a grid into the panel.
What function do i need to do this?
This is my mainmodel
Ext.define('JustRent.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'JustRent.view.main.MainController',
'JustRent.view.main.MainModel',
'JustRent.view.main.ProductenType'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
region: 'center',
id: 'contentBlock',
xtype: 'panel',
layout: 'fit',
title: 'JustRental',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Menu',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'verhuur',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Offertes',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
},{
xtype: 'menuitem',
text: 'Nieuwe offerte'
},{
xtype: 'menuitem',
text: 'Openstaande offertes'
},{
xtype: 'menuitem',
text: 'Geannuleerde offertes'
}]
}
}, {
xtype: 'menuitem',
text: 'Projecten',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
}]
}
}, {
xtype: 'menuitem',
text: 'Producten',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
},{
xtype: 'menuitem',
text: 'Artikelen'
},{
xtype: 'menuitem',
text: 'Groepen'
},{
xtype: 'menuitem',
text: 'Type',
handler: 'onClickButton',
},{
xtype: 'menuitem',
text: 'Soort'
},{
xtype: 'menuitem',
text: 'Merk'
}]
}
}, {
xtype: 'menuitem',
text: 'Klanten'
}]
}
},
{
xtype: 'menuitem',
text: 'verkoop'
}
]
}
}]
}]
}
]
});
when i click on an item i use a basic handler. This is located in my mainController file:
Ext.define('JustRent.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
],
alias: 'controller.main',
onClickButton: function () {
console.log('click works');
}
});
this is my ProductenType
Ext.define('JustRent.view.main.ProductenType', {
extend: 'Ext.grid.Panel',
alias: 'widget.ProductenType',
requires: [
// alerts
],
xtype: 'gridpanel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
]
});
but now is my question how can i load the JustRent.view.main.ProductenType into the panel with the id 'contenBlock'.
I would use a Viewport as my main container
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport
with a border layout http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.layout.container.Border
and then use add http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport-method-add
and remove methods http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport-method-remove
for component manipulation within the Viewport
pro tip: avoid unnecessary over nesting of components, use the lighter Component possible in each case. e.g containers are lighter in the DOM compared to panels so if you only need a container don't use a panel (not saying this is the case) .
Also I recommend Extjs in Action, awesome book that will help you really understand the framework.
SOLUTION:
To better show the problem our actual code was facing, the following code works.
The keys for me to get this to work were to give border layout an 'align' config of stretch, and to ensure that containers had 'flex' config of 1 where necessary.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{text: 'First Name'}],
store: Ext.create('Ext.data.Store', {fields: ['fname']})
});
Ext.define('MyView', {
extend: 'Ext.container.Container',
alias: 'widget.myView',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myGrid',
title: 'My First Grid',
flex: 7,
bodyStyle: {
backgroundColor: '#ff0000'
}
}, {
xtype: 'myGrid',
title: 'My Second Grid',
flex: 3,
bodyStyle: {
backgroundColor: '#0000ff'
}
}]
});
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
layout: {
type: 'border',
align: 'stretch'
},
items: [{
xtype: 'container',
region: 'center',
itemId: 'gridsContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myView',
flex: 1
}]
}]
}]
});
});
ORIGINAL POST:
In the code below, if you replace:
Ext.create('Ext.container.Container'
with:
Ext.create('Ext.container.Viewport'
The grids correctly occupy 70%/30% of the available area.
But when the code has Container and not Viewport, the grids are very small.
Of course my real code is within a larger application, so I cannot use a Viewport at that point, I must use container.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{
text: 'First Name',
dataIndex: 'fname'
}],
store: Ext.create('Ext.data.Store', {
fields: ['fname']
})
});
Ext.onReady(function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
autoScroll: true,
bodyPadding: 0
},
items: [{
xtype: 'myGrid',
itemId: 'grid1',
flex: 7
}, {
xtype: 'splitter'
},{
xtype: 'tabpanel',
itemId: 'mypanel',
width: 400,
height: 400,
renderTo: document.body,
flex: 3,
scroll: true,
resizable: false,
activeTab: 0,
items: [{
xtype: 'myGrid',
itemId: 'tabgrid1',
title: 'My Grid Tab One'
},{
xtype: 'myGrid',
itemId: 'tabgrid2',
title: 'My Grid Tab Two'
}],
tabBar:{
//plain:true,
items:[{
xtype: 'tbfill'
},{
text:'????',
xtype:'image',
src: 'panelCollapseBtn.png',
closable: false,
listeners:{
'afterrender':function (comp) {
comp.getEl().on('click', function (el) {
// alert(comp.up('#mypanel').getCollapsed());
var panel = comp.up('#mypanel');
var isCollapsed = panel.getCollapsed();
//alert('is collapsed: ' + isCollapsed);
panel.header = !isCollapsed;
//panel.collapsible =isCollapsed;
comp.setSrc(isCollapsed?"panelCollapseBtn.png":"panelExpandBtn.png");
panel.toggleCollapse();
}, this);
comp.getEl().on('mouseover', function (el) {
el.target.style.cursor = "pointer";
}, this);
}
}
}]
}
}]
}]
});
});
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 [];
}
});