Related
I'm trien to make a resizable panel layout. I've made a fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/3c94
Why can't I use the resizer between test1 and test2 while the resizer between test3 and test4 is working.
I tried adding flex/fit to a few container, tried removing unimportant stuff, can't find a solution.
Because you have used fit layout in the first panel and hbox (it works) in the second one:
Ext.create('Ext.form.Panel', {
xtype: 'main_customer',
itemId: 'main_customer',
renderTo: Ext.getBody(),
flex: 1,
items: [{
xtype: 'panel',
itemId: 'maincontainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
padding: 0,
scrollable: true,
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
height: '63%',
resizable: {
split: true,
edges: ['south']
},
items: [{
xtype: 'panel',
resizable: {
split: true,
edges: ['east'],
},
items: [{
xtype: 'panel',
html: 'test 1',
}]
}, {
xtype: 'panel',
html: 'test 2',
}]
}, {
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items: [{
xtype: 'panel',
width: '50%',
resizable: {
split: true,
edges: 'east'
},
html: 'test 3',
}, {
xtype: 'panel',
html: 'test 4',
}]
}]
}],
collapsible: false
});
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 have a problem like in this topic: Extjs how to make the scrollbar appear?, but too many things are confusing for me.
I need to show a scrollbar as soon as the form is wider than the containing container. Why is autoScroll: true not working?
I will give three different examples, combined with this problem. The most needed - the first ex.
1. https://fiddle.sencha.com/#fiddle/j2c
var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'anchor',
items: [{
itemId: "TPMethodContentProvider",
xtype: "form",
autoScroll: true,
layout: 'anchor',
anchor: "100%",
items: [{
xtype: "container",
padding: 5,
layout: 'anchor',
anchor: "100%",
autoScroll: true,
items: [{
margin: 5,
padding: 5,
width: 850,
xtype: "container",
autoScroll: true,
anchor: "100%",
layout: 'column',
items: [{
columnWidth: 0.7,
items: [{
itemId: "S1",
margin: 5,
xtype: 'textfield',
anchor: "95%",
fieldLabel: "type:",
labelWidth: 140,
tabIndex: 0,
value: "bd",
}],
layout: "anchor"
}, {
columnWidth: 0.3,
items: [{
itemId: "S2",
margin: 5,
xtype: 'textfield',
anchor: "95%",
fieldLabel: "num:",
labelWidth: 140,
}],
layout: "anchor"
}, ] //panel items
}] // some container items
}] // form items
}] }); win.show();
No scrollbar.
..fiddle.sencha.com/#fiddle/j2f
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyPadding: '5 5 0',
width: 600,
items: [{
xtype: 'container',
padding: '5',
layout: 'anchor',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
anchor: '-5',
name: 'first',
}]
}, {
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
anchor: '100%',
name: 'last'
}]
}],
}],
}); //Ext.create('Ext.container.Viewport', {});
It works, until commented last line Ext.create('Ext.container.Viewport', {});
If I remove the code inside items Viewport observed the same behavior.
..fiddle.sencha.com/#fiddle/j2g..
Ext.create('Ext.container.Viewport', {
padding: '5',
items: [{
id: 'mainPanelContainer',
autoScroll: true,
xtype: 'container',
padding: '5',
layout: 'anchor',
//width: 600,
items: [{ //outer container
autoScroll: true,
xtype: 'container',
padding: '5',
layout: 'anchor',
width: 600,
items: [{
xtype: 'container',
padding: '5',
layout: 'column',
items: [{
xtype: 'textfield',
fieldLabel: 'text1',
name: 'Name1',
columnWidth: .3
}, {
xtype: 'textfield',
fieldLabel: 'text2',
name: 'Name2',
columnWidth: .7
}], //container items
}], //outer container items
}, ] //form items
}, ]});
Scroll works until width: 600 set in that place, but doesn't work in the commented place.
Sorry for outer code in 2, 3 ex. Some unhandy snippets code.
You shouldn't use 'anchor' layout in case of scroll usage.
As you can see in the fiddle, I used 'fit' layout instead.
If you use ExtJS5 I do not recommend you to use 'autoScroll' config(it's deprecated), use 'scrollable' instead. (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-scrollable)
var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'fit',
items: [{
itemId: "TPMethodContentProvider",
xtype: "form",
layout: 'fit',
width: 600,
items: [{
margin: 10,
padding: 5,
xtype: "container",
scrollable: 'horizontal',
layout: 'hbox',
items: [{
itemId: "S1",
margin: 5,
xtype: 'textfield',
fieldLabel: "type:",
scrollable: 'horizontal',
labelWidth: 140,
tabIndex: 0,
value: "bd",
}, {
itemId: "S2",
margin: 5,
xtype: 'textfield',
scrollable: 'horizontal',
fieldLabel: "num:",
labelWidth: 140,
}] //panel items
}] // form items
}] //win items
});
win.show();
I changed the layout to auto, which did the trick for me. Now it is possible to added/remove panels and the scroll-bar will automatically show/hide.
var workActivityPanel = new Ext.Panel({
region: 'center',
autoScroll: true,
layout: {
type: 'auto',
align: 'stretch'
}
});
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 [];
}
});
I'm creating a toolbar then later adding it to a Panel in ExtJS. It looks great except in IE7 where it has a much larger height than other browsers. ExtJS is hardcoding the height in an inline CSS style. Some of the menus are created before the toolbar...
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
style: {
overflow: 'visible'
},
items: [
{
text: 'choice1'
},{
text: 'choice2'
},{
text: 'choice3'
}]
});
var tb = Ext.create('Ext.toolbar.Toolbar');
tb.suspendLayouts();
tb.add({
text:'Choice 1',
iconCls: 'bmenu',
menu: menu
},{
xtype: 'tbfill'
},{
xtype: 'tbtext',
text: 'Last name'
});
menu.add(' ');
tb.add('-', {
iconCls: 'icon-help',
clickEvent: 'mousedown'
});
tb.resumeLayouts(true);
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
id: 'North',
items: [{
region: 'center',
style: {
overflow: 'visible'
},
}, tb]
},{
region: 'west',
id: 'West',
xtype: 'panel',
layout: 'vbox',
collapsible: true,
split: true,
width: 200,
items: [{
xtype: 'panel',
id: 'upperWest',
width: 200,
flex: 1,
html: myAlerts
},{
xtype: 'panel',
id: 'lowerWest',
width: 200,
flex: 3,
html: quickView
}
]
]
},{
region: 'center',
id: 'center',
height: '100%',
minheight: 200,
minwidth: 200,
layout: 'border',
border: false,
autoScroll:true,
tbar: [
{xtype: 'tbfill'},
{
xtype: 'combo',
height: 20,
editable: false,
store: [
'choice1',
'choice2',
'choice3',
],
value: 'choice1'
},
{xtype: 'tbfill'}
],
items: [{
region: 'east',
id: 'center-east',
height: '100%',
minheight: 200,
width: 200,
items: barChartPanel
},{
region: 'center',
id: 'center-center',
layout: 'fit',
baseCls:'x-plain',
items: columnChartPanel
}]
},{
region: 'east',
id: 'moreOptions',
xtype: 'panel',
title: 'More Options',
collapsible: true,
split: true,
width: 200,
items: [
{xtype: 'panel',
id: 'rightPanel1',
collapsible: true,
collapsed: true,
}
]
},{
region: 'south',
xtype: 'container',
}]
});
Found the solution. HTML 5 Boilerplate included a CSS property that was adding bottom padding to some elements. This was causing ExtJS to also add top padding to the toolbar. I removed the CSS element and the issue went away