it's EXT JS 4.
A simple question,
how do i align items in layout column?
layout:'column',
border: false,
items:
[
{
columnWidth:.5,
xtype: 'label',
text: 'item 1'
},
{
columnWidth: .5,
xtype: 'label',
text: 'item 2'
}
]
All I need is just align the 'item 1' to the right, and 'item 2' to the left. So, they'll be meet in the center.
Just using 'align:right' isn't work.
Any suggestion?
Try this:
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 200,
height: 200,
layout: 'column',
items: [{
columnWidth: 0.5,
xtype: 'label',
text: 'item 1',
style: 'text-align: right;'
}, {
columnWidth: 0.5,
xtype: 'label',
text: 'item 2'
}]
});
});
Here is quote from Sencha docs: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Label
NOTE: in most cases it will be more appropriate to use the fieldLabel and associated config properties (Ext.form.Labelable.labelAlign, Ext.form.Labelable.labelWidth, etc.) in field components themselves, as that allows labels to be uniformly sized throughout the form. Ext.form.Label should only be used when your layout can not be achieved with the standard field layout.
Related
layout:{
type:'vbox',
align:'center',
}
This code i am using,
Now i want to add this functionality also
layout:'fit'
But I am not getting any syntax to do so,
I mean what is the name for fit property when writing layout as object.
I am using ExtJs 6.0.2
You can for example add some containers with center layout into a parent container, this will do as you want: horizontally centered, displayed vertically and every child container will have to width of the parent container. See code below, I added colour so you can see the width of containers:
Ext.create({
renderTo: Ext.getBody(),
xtype: 'container',
items: [{
xtype: 'container',
layout: 'center',
style: {
background: 'lightBlue'
},
items: [{
xtype: 'component',
html: '1. Lorem ipsum dolor sit amet',
}]
}, {
xtype: 'container',
layout: 'center',
items: [{
xtype: 'component',
html: '2. Lorem ipsum dolor sit amet',
}],
style: {
background: 'lightBlue'
},
}, {
xtype: 'container',
layout: 'center',
items: [{
xtype: 'component',
html: '3. Lorem ipsum dolor sit amet',
}],
style: {
background: 'lightBlue'
},
}]
});
What you need is:
layout: {
type: 'fit'
}
Even if you supply it as a string config, once applied the container setLayout will transform it to an object.
// https://docs.sencha.com/extjs/6.0.2/classic/src/Container.js-3.html#Ext.container.Container-method-setLayout
setLayout: function(layout) {
///...
if (typeof layout === 'string') {
layout = {
type: layout
};
}
///...
}
conv.ask(new Table({
title: 'Emissions due to different gases',
// subtitle: 'Table Subtitle',
image: new Image({
uri: 'https://www.scienceabc.com/wp-content/uploads/2015/05/Walking-in-Rain.jpg',
alt: 'Emissions Image'
}),
columns: [
{
header: 'CO2',
align: 'CENTER',
},
{
header: 'CH4',
align: 'CENTER',
},
{
header: 'N20',
align: 'CENTER',
},
],
rows: [
// {
// cells: [carbonEmission, methaneEmission, nitrousEmission],
// dividerAfter: true,
// },
{
cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
dividerAfter: true,
},
{
cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
},
],
buttons: new Button({
title: 'Read More',
url: 'https://assistant.google.com'
}),
I have added this code, I am able to see the table with the given fields but the image is not coming up in the table instead I am getting this error even when the image is https URL.
MalformedResponse
expected_inputs[0].input_prompt.rich_initial_prompt.items[1].table_card.image: the protocol must be http or https.
I believe the issue is that the property inside the Image class should probably be called url and not uri.
I have a multiselect with search bound to a store (with attribute string_value). Search only searches strings that start with "string to search" instead of contains "string to search" (similar to searching for '%string%' instead of 'string%'). Is there a way to do this by extending 'multiselector-search'?
Below is my multiselector control bound to a form:
var ms = Ext.widget('form', {
xtype: 'multi-selector',
width: 400,
height: 300,
requires: [
'Ext.view.MultiSelector'
],
layout: 'fit',
renderTo: Ext.getBody(),
items: [{
bbar: [{
xtype: 'button',
itemId: 'button',
html: 'Toolbar here',
text: 'Submit request to API',
// get submitted array
handler: function() {
if (cardioCatalogQT.config.mode === 'test') {
console.log('In submitted values handler: ');
}
var submitted = Ext.getCmp('test');
var dx = [];
Ext.Array.each(submitted.store.data.items, function (item) {
dx.push(item.data.string_value);
}); // each()
Ext.Msg.alert('Submitted Values',
'The following diagnoses will be sent to the server: <br
/>' + dx);
if (cardioCatalogQT.config.mode === 'test') {
console.log(dx);
}
}
}],
xtype: 'multiselector',
title: 'Selected Dx',
id: 'test',
name:'test',
fieldName: 'string_value',
viewConfig: {
deferEmptyText: false,
emptyText: 'No Dx selected'
},
// TODO: fix ability to remove selected items when box is unchecked
search: {
field: 'string_value',
store: 'Diagnoses'
}
}]
}).center();
The closest I could find to this problem was http://www.sencha.com/forum/showthread.php?240887. I tried making it work with the multiselect search with no success.
The MultiSelector uses the Ext.util.Filter to narrow the results based on the typed text. You need to enable the anyMatch property for it to match anywhere.
To do that, you'll have to include a new "search" function in your multiselector's search object that will have anyMatch=true.
Please see my fiddle, https://fiddle.sencha.com/#fiddle/jf5, for an example of how to do this.
I have an element defined as this:
var m1 = new joint.shapes.devs.Model({
position: { x: 100, y: 50 },
size: { width: 190, height: 50 },
inPorts: ['in'],
outPorts: ['out'],
attrs: {
'.label': { text: 'Model','ref-x': .4, 'ref-y': .25 ,fill: '#fefefe',
'font-size': 14,
'font-weight': 'bold',
'font-variant': 'small-caps' },
rect: { fill: '#fefefe'},
'.inPorts circle': { r:5 ,fill: '#16A085' ,magnet: 'passive', type: 'input'},
'.outPorts circle': { r:5, fill: '#E74C3C',magnet: 'passive',type: 'output' },
}
THe question is how can I get the '.label' attribute?
E.g, I need to get the text "Model", what should I do?
If I want to get the 'fill' attr of 'rect' , I can simply use m1.get('attrs').rect.fill.
But I don't know HOW TO GET the '.label' attr.
Use the attr() method for both setting attributes and getting them back:
m1.attr('.label/text') // 'Model'
m1.attr('.label/text', 'New Model')
m1.attr('.label/text') // 'New Model'
'/' is a path separator into the nested attrs object.
var rootnode = new joint.shapes.basic.Circle({
position: { x: 20, y: 220 },
size: { width: 60, height: 30 },
attrs: {
text: { text: 'parent' },
circle: { fill: 'yellow', hasChildren:false }
},
name: 'parent'
});
graph.addCell(rootnode);
I am new in sencha touch and need to achieve this layout on a single simple page:
I need an image and below the image, there should be a carousel containing two another images which the user can swipe.
Here is my code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
html: "<img src='teil1.jpg' width='320' height='60' alt='' border='0'>"
},
{
html: "<img src='teil2.jpg' width='320' height='60' alt='' border='0'>"
}
]
});
var panel = new Ext.Panel({
fullscreen: true,
html: "<img src='sport1_top.jpg' width='320' height='302'>"
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [panel, carousel1]
});
}
});
The carousel and the panel containing the first image are displayed on the same portion of the page.
Am I missing something?
Thanks for your interest.
leon.
Removing the
fullscreen: true
from the sport1_top panel worked for me
Mark
This problem was nagging me too. After trying everything I could think of, what appears to help was to get rid of all of those fullscreen properties except on the main Ext.Panel, and use "layout:'fit'" on all of the cards, which I added to my defaults in the Ext.Carousel object.
var toolbar = new Ext.Toolbar({ title: 'testing', dock: 'top'});
var around = new Ext.Carousel({
ui: 'dark',
direction: 'horizontal',
defaults: { cls: 'card', layout:'fit' },
items: [
{ html: 'card 1'},
{ html: 'card 2'},
{ html: 'card 3'},
{ html: 'card 4'},
]
})
var panel = new Ext.Panel({
fullscreen: true,
layout: {
type : 'fit',
align: 'top'
},
defaults: {
flex: 1
},
items: [ around ],
dockedItems: [ toolbar ]
});
panel.show();
I believe you have to use layout: 'fit' for your Carousel (In your Panel, instead of vbox). Or you could make another panel SubPanel that has your vbox and that SUbPanel({layout: 'fit'});
I came across the same problem, I believe this works.
GL