i have the problem with displaying fields on form
var test = Ext.create('Ext.form.Panel', {
renderTo: 'test',
title: '1. zzzz',
width: 800,
bodyPadding: 5,
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fieldset',
defaults: {
anchor: '100%'
},
layout: 'column',
items: [
{
xtype: 'panel',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
columnWidth: .5,
flex: 1,
defaultType: 'textfield',
defaults: {
anchor: '100%',
flex: 1
},
items: [
{
xtype: 'numberfield',
hideTrigger: true,
fieldLabel: 'zzzz',
//anchor: '100%',
//anchor: '-5',
name: 'SRD_NUMBER'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'SRD_NAME_BR'
},
{
fieldLabel: 'zzzzz',
//anchor: '-5',
name: 'SRD_NAME_FL'
},
{
xtype: 'numberfield',
hideTrigger: true,
fieldLabel: 'zzzz',
disabled: true,
//anchor: '-5',
name: 'SRD_FOP'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'SRD_NAME_ORDER'
},
{
xtype: 'panel',
id: 'dep-img',
border: false,
height: 50,
width: 100,
cls: 'x-form-item',
html: '<img src="http://dep-image/id/10000001482" width="100" height="50" title="zzz">'
},
{
xtype: 'filefield',
name: 'file1',
msgTarget: 'side',
border: 3,
//anchor: '100%',
fieldLabel: 'zzzz',
buttonText: 'zzzzzz'
},
{
fieldLabel: 'zzz',
//anchor: '-5',
name: 'company'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'company'
}]
}
]
} //fieldset
]//glob
});
i need to fit fields width to column width.
on this page http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.FieldContainer 2 examples
and in second example they set defaults {layout: '100%'} and it looks like it does not work.
found own salvation: by adding layout: 'fit' or layout: 'anchor' to fieldset anchor
defaults: {
layout: 'fit',
flex: 1
},
thanks to all
You must set height property to your form and if it still is not displaying then give height to fieldset too.
found own salvation: by adding layout: 'fit' or layout: 'anchor' to fieldset anchor
defaults: {
layout: 'fit',
flex: 1
},
thanks to all
I would specify layout:'fit' on the formPanel since you are using a single fieldset.
The rest i dont understand. It looks like you specify column layout but using just one column.
Could you clean up the example and i would be happy to help.
After a quick look... Have you tried putting anchor: '0' on both fields and containers?
Also, you should use fieldDefaults instead of
defaults: {
anchor: '100%',
flex: 1
},
Related
I am looking for best practises or advice in how to create interactive elements within Shapes (elements) using the JointJS (Rappid) library.
This is what I have done currently:
The code
const shape = new joint.shapes.basic.Generic({
type: 'shape',
attrs: {},
markup: [
{
tagName: 'foreignObject',
selector: 'foreignObject',
attributes: {
x: '10',
y: '10',
width: '60',
height: '100',
},
children: [
{
tagName: 'div',
namespaceURI: 'http://www.w3.org/1999/xhtml',
selector: 'content',
style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
children: [
{
tagName: 'select',
selector: 'select',
style: {
'z-index': 1,
},
children: [
{
tagName: 'option',
value: 'test1',
textContent: 'test 1',
},
{
tagName: 'option',
value: 'test2',
textContent: 'test 2',
},
],
},
],
},
],
},
],
});
You can see there is a shape rendered and it has a select element in it by using a foreignObject (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject).
However, using foreignObject is troublesome due to that they do not play well in browsers and the drop down you see here doesn't actually work.
I could start hacking around and get it to work but this is the point of the question, is there a cleaner way in achieving this?
I need something like this
https://resources.jointjs.com/tutorial/html-elements
But the html library is now decrepitated and JointJS wants you to use markup JSON instead.
Lastly, I have seen this post which doesn't fill me much with confidence...
https://groups.google.com/g/jointjs/c/-yXXlnreq6M
But I am hoping as this is from 5 years ago, it is outdated and we don't need to have to do the workarounds as it suggests?
HTML can be added inside foreignObject, but as you mentioned there can be some issues in browsers. One example of using foreignObject can be found here.
The code demonstrates how to create a text input with foreignObject.
var paper = new joint.dia.Paper({
el: document.getElementById('paper'),
width: 650,
height: 400,
gridSize: 10,
model: graph,
guard: function(evt) {
return evt.target instanceof HTMLInputElement;
}
});
paper.on('blank:pointerdown cell:pointerdown', function() {
document.activeElement.blur();
});
var Example = joint.dia.Element.define('example.ForeignObject', {
attrs: {
body: {
refWidth: '100%',
refHeight: '100%',
stroke: '#333333',
fill: '#ffffff',
strokeWidth: 2
},
foreignObject: {
refWidth: '100%',
refHeight: '100%'
}
}
}, {
markup: [{
tagName: 'rect',
selector: 'body'
}, {
tagName: 'foreignObject',
selector: 'foreignObject',
attributes: {
'overflow': 'hidden'
},
children: [{
tagName: 'div',
namespaceURI: 'http://www.w3.org/1999/xhtml',
selector: 'content',
style: {
fontSize: 14,
width: '100%',
height: '100%',
position: 'static',
backgroundColor: 'transparent',
textAlign: 'center',
margin: 0,
padding: '0px 10px',
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
children: [{
tagName: 'span',
textContent: 'First Name'
}, {
tagName: 'input',
selector: 'firstname',
attributes: {
'type': 'input',
'name': 'firstname'
},
style: {
position: 'static',
width: '100%'
}
}, {
tagName: 'span',
textContent: 'Last Name'
}, {
tagName: 'input',
selector: 'lastname',
attributes: {
'type': 'input',
'name': 'lastname'
},
style: {
position: 'static',
width: '100%'
}
}]
}]
}]
}, {
attributes: {
value: {
set: function(text, _, node) {
if ('value' in node) node.value = text;
}
}
}
});
joint.shapes.example.ForeignObjectView = joint.dia.ElementView.extend({
events: {
'change input': 'onInputChange'
},
onInputChange: function(evt) {
var input = evt.target;
this.model.attr(input.name + '/value', input.value);
}
});
The article that you linked is deprecated, but there is an updated version of creating elements with a HTML face here. You can see some select fields demonstrated there, but it is a little more involved.
I was wondering what would be the best way of achieving a layout like this in extJS:
I have 4 different components that I would like to place in each respective box but am having trouble figuring out exactly how I can do it.
Here is a snippet of some code I have been working on:
Ext.define('/../../../chefCreateAndPinRolesLayoutContainer', {
extend: 'Ext.container.Container',
height: '100%',
width: '100%',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
items: [
Ext.create('/../../../chefRequiredCookbooksGridPanel'),
Ext.create('/../../../chefRoleSetupFormPanel')
]
}, {
flex: 1,
items: [
Ext.create('/../../../chefOptionalCookbooksGridPanel'),
Ext.create('/../../../chefAttributeGridContainer')
]
}]
});
Here is what my current layout comes out to:
I'd like for it to fill the whole Tab Panel and have equal widths and heights per section.
Any ideas?
Thanks
You can try the below snippet, where internal container items(A, B, C, D) can be replaced with your custom items.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
border: 1,
items: [
{
xtype: 'container',
html: 'Cell A content',
flex: 1
},{
xtype: 'container',
html: 'Cell B content',
flex: 1
}
]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'container',
html: 'Cell C content',
flex: 1
},{
xtype: 'container',
html: 'Cell D content',
flex: 1
}
]
}]
}]
});
}
});
I have a panel with an hbox layout and a single line of components in it: A combobox and text field. What I am trying to do is replicate that exact same line of components beneath the existing components. How can you break a line inside of an hbox layout in Ext JS? (Similar to in HTML).
Here's my code:
{ xtype: 'panel', padding: '5 5 5 5', layout: 'hbox', height: 170, width: '100%', id: 'main', collapsible: true,
//Query Builder
items: [
{ xtype: 'combobox', padding: 5, store: filters, id: 'criteria_1_drop_down', displayField: 'field1' },
{ xtype: 'textfield', padding: 5, id: 'criteria_1_input'}
//code to start new line...
Here's what I'm trying to achieve:
Line 1 will be just text, sort of like a column header
Line 2 is the code I have now
Line 3 will be just like line 2
Oh and there's a button :)
I would use an anchor layout for the panel, with a container having an hbox layout for each row.
{
xtype: 'panel',
layout: 'anchor',
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'component',
html: 'Text Field'
}, {
xtype: 'component',
html: 'Text Field'
}]
}, {
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'combo',
...
}, {
xtype: 'textfield',
...
}]
}, {
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'combo',
...
}, {
xtype: 'textfield',
...
}, {
xtype: 'button',
...
}]
}]
}
I have to do the following layout :
The red container has the layout card and contains :
A titlebar
A container : This one display a map and should take all the size of the screen below the titlebar
A panel : This is to display custom control buttons, it should be over the map and not hide it (background is transparent)
I tried the following code but it didn't work, I can't figure out how to place components over another one. If I use the hbox layout, the custom control buttons will be below the map, and not on the map...
Ext.define('Sencha.view.MapPanel', {
extend: 'Ext.Container',
requires: ['Ext.ux.LeafletMap'],
xtype: 'mappanel',
config: {
itemId: 'mapanel',
layout: 'card',
items: [{
xtype: 'titlebar',
title: 'title',
docked: 'top'
}, {
xtype: 'panel',
config:{
layout: 'fit',
height: '100px',
width: '100px',
itemId: 'controlButtons'
}
}, {
xtype: 'leafletmap',
mapOptions: {
zoom: 13,
zoomControl: false
},
config: {
layout: 'fit'
}
}]
}
});
Here the controlsButton show but not the map. If I put the controlsButton after the leafletMap, the map shows but not the buttons...
Any help welcome!
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
html: 'Main Container',
style: 'border: 2px solid black;',
layout: {
type: 'card'
},
items: [
{
xtype: 'container',
style: 'border:2px solid red',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Title Bar'
},
{
xtype: 'container',
html: 'Container',
style: 'border:2px solid blue;',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'panel',
docked: 'bottom',
height: '20%',
html: 'Panel that holds buttons',
style: 'border: 2px solid green;',
top: '',
width: '50%'
}
]
}
]
}
]
}
});
This is as same as you have wanted (per screenshot). Please ignore the border style. That was just to show you the difference. Hope you get an idea from this. :) Best luck!!
everyone!
I need this layout position for my application in Sencha Touch 2.
Code with xtype: 'panel' working correctly
items: [
{
xtype: 'panel',
docked: 'left',
items: [
{
xtype: 'panel',
docked: 'top',
html: '1'
},
{
xtype: 'panel',
docked: 'top',
html: '2'
}
]
},
{
xtype: 'panel',
docked: 'top',
html: '3'
}
]
But if I replace one panel to xtype: 'list'
items: [
{
xtype: 'panel',
docked: 'left',
items: [
{
xtype: 'panel',
docked: 'top',
html: '1'
},
{
xtype: 'list',
docked: 'top',
store: 'mystore',
itemTpl:'<div>{Caption}</div>'
}
]
},
{
xtype: 'panel',
docked: 'top',
html: '3'
}
]
it not show in browser, only panels with xtype: 'panel' are shown. What am I doing wrong?
Thank you.
try absolute position
{
xtype: 'list',
docked: 'top',
top: 0,
bottom: 0,
left: 0,
right: 0,
store: 'mystore',
itemTpl:'<div>{Caption}</div>'
}
Agree, it is one of unpleasant quirks of Touch 2.
Cheers, Oleg