I'm striving to create an ExtJS form with two labeled text fields.
I would like both the labels and the input fields to appear on the same line.
The code I've come up with breaks the text fields, showing the labels on the first line and the input fields on the next line.
What I have: http://jsfiddle.net/aw2Pr/
The fix would be probably extremely simple but I can't seem to figure out. This would be a piece of cake to do in HTML, I mean, like this:
<label>Amount: <input /></label>
<label>Currency: <input /></label>
http://jsfiddle.net/AyqYr/
How do I get a similar layout in ExtJS?
I've already tried changing the layout, changing the with of the textfields, assigning a width to the field labels, asking Google... no help so far.
To achieve fields with label on same line, remove style from default config by creating a container with horizontal layout.
See example code below:
Ext.onReady(function() {
var addUserForm = Ext.create(
'Ext.container.Container',
{
renderTo: Ext.getBody(),
layout: {
type: 'hbox'
},
anchor: '100%',
defaults: {
width: 200,
xtype: 'textfield'
},
items: [{
name: 'amount',
fieldLabel: 'Amount'
},{
name: 'currency',
fieldLabel: 'Currency'
}]
}
);
});
Related
I hit what seems to be two bugs. Here is a fiddle which demonstrates these bugs. First of all, if you click on the first panel or any other ones, you will see there appear some new panel with a missing title:
And the second bug, is that it is impossible to see the contents of the panel (one textfield, which I put to every panel). The code is as simple as:
Ext.create("Ext.window.Window", {
width: 300,
height: 400,
layout: "fit",
items:[{
xtype: "panel",
layout: {
type: "accordion"
},
scrollable: true,
listeners: {
beforerender: function () {
var i;
for (i = 0; i < 30; i += 1) {
this.add({
title: i,
items:[{
xtype: "textfield",
value: i
}]
});
}
}
}
}]
}).show();
So, the question is how to fix it all?
The outer window should not have a fit layout as this will interfere with the way the accordion layout works as it uses more or less vertical space depending on the user's actions. Also, the accordion should not have scrollable set to true as it is the parent window that should scroll.
The title you are using for the items in the accordion are seen as integer values in JS and so the 0 is not being interpreted as you would like when used in a title (which expects a string). Explicitly converting i to a string will ensure the 0 shows correctly.
In summary, the following changes will enable your code to work better:
On the outer window: remove the layout:fit and add scrollable:true.
On the accordion: remove the scrollable:true.
On the items in the accordion: ensure the title is consistently converted to a string.
See updated fiddle here.
Ext.create("Ext.window.Window", {
width: 300,
height: 400,
scrollable: true,
items: [{
xtype: "panel",
layout: {
type: "accordion"
},
listeners: {
beforerender: function () {
var i;
for (i = 0; i < 30; i += 1) {
this.add({
title: 'box ' + i,
items: [{
xtype: "textfield",
value: i
}]
});
}
}
}
}]
}).show();
I need to add a loading window dialog to my chart while it gets its data, similair to a bufferRenderer in a grid, it should be a simple loading window about the same size as a loading dialog in a grid. I am just looking for something simple.
i think you should use maskElement however I do not know for sure, I just need the chart element to be hidden or greyed out.
heres my code
{
xtype: 'panel',
title: 'Charts',
items: [
{
xtype: 'component'
},
{
xtype: 'polar',
height: 520,
id: '',
width: '',
title: 'Pie Chart',
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'GenderStore',
series: [
{
type: 'pie',
label: {
field: 'types',
display: 'rotate',
contrast: true,
font: '12px Arial',
color: '#fff'
},
xField: 'counter',
yField: 'types'
}
],
interactions: [
{
type: 'rotate'
}
]
}
]
}
To mask loading components i usually use mask.
to mask a component:
.mask( [msg], [msgCls] )
Masks this component with a semi-opaque layer and makes the contents unavailable to clicks.
Parameters
•msg : String (optional)
A message to show in the center of the mask layer.
•msgCls : String (optional)
A CSS class name to use on the message element in the center of the layer.
but, if you mask manually a component you also have to unmask it when it is loaded, mask the chart on before render and unmask it on store load. when all the datas have been receved
I have a datefield in my form which is:
{
xtype: 'datefield',
id : 'usap3',
anchor: '100%',
name: 'stockAsOn',
format: 'd/m/Y',
width: 199
}
I get a value from the DB and when I try to set the same in this field, it won't display.
alert(stock_as_on); //17-OCT-14
parsed_stock_as_on = Ext.Date.parse(stock_as_on, "Ymd");
Ext.getCmp('usap3').setValue(parsed_stock_as_on);
I tried the above code after researching through various sources, but in vain.
What should I do to display the datefield with the value set in it?
Just add altFormats: 'd-M-y' to your date field. You don't need to use the Ext.Date.parse function because the setValue will work with a string. But if you want to keep parsing your date, just change the mask to 'd-M-Y'.
So:
{
xtype: 'datefield',
id : 'usap3',
anchor: '100%',
name: 'stockAsOn',
format: 'd/m/Y',
altFormats: 'd-M-y',
width: 199
}
alert(stock_as_on); //17-OCT-14
//parsed_stock_as_on = Ext.Date.parse(stock_as_on, "d-M-y");
Ext.getCmp('usap3').setValue(stock_as_on);
For my chart, I use pieChartDataSource as my doughnut chart's data source. I've been pouring over the documentation to figure out a way to, instead of labeling the segments with valueField, display an additional field that is not the argumentField.
In my console, I know that pieChartDataSource has the field I am looking for. It is an array of objects. Each object has several fields of which I have product as the argumentField and count as the valueField. My presumption is that I somehow have to use the tagField in order to pass additional properties.
To reiterate, I want to display owner (a third value), instead of product in the segment label of my chart. How would I customize the label so that it shows the owner?
// ...
dataSource: pieChartDataSource,
// ...
series: { type: 'doughnut',
argumentField: 'product',
valueField: 'count',
tagField: 'owner',
valueType: 'numeric',
label: { visible: true,
font: {
family: 'sans-serif',
},
connector: { visible: false },
radialOffset: 0,
position: 'inside',
rotationAngle: 0,
customizeText: function () {/* use tagField here? */},
},
// ...
Can retrieve tag from point, that is an attribute of customizeText parameter
label: {
customizeText: function () {
return this.point.tag;
}
}
i need a layout something like this:
https://fiddle.sencha.com/#fiddle/21i
I need the west filter panel to be collapsable and my content panel has a dynamic height.
A possibility could also be that the panel with the boarder layout has a full height and the overflow is just scrollable...
Though i dont get a valid border layout without setting a total height to my panel.
Please help
UPDATE
A nice workaround would be appreciated too...
EDIT
a new fiddler with dynamic generated content
https://fiddle.sencha.com/#fiddle/221
A quick and dirty workaround is to let render the body of the dynamic panel and adjust the height of your main container accordingly. You'll need to account for anything that adds height to the center panel's body.
For example, with your code, you can add a listener like this to your border layout container:
listeners: {
delay: 1,
afterrender: function() {
this.setHeight(
this.down('[region=center]').body.getHeight()
+ this.getHeader().getHeight()
// also account for borders, margins, etc. if needed
);
}
}
See your updated fiddle.
Update Toward a more robust solution
As I said in the comment, Ext4 makes it quite easy to make a panel collapsible with 'hbox' layout, and probably most other kinds.
Here's a good starter (fiddled there):
Ext.onReady(function() {
Ext.widget('viewport', {
layout: {
type: 'hbox'
,align: 'stretch'
}
,items: [{
title: 'left'
,width: 150
,resizable: true
,resizeHandles: 'e'
,style: {
borderRight: '2px solid #157FCC'
}
,collapsible: true
,collapseDirection: 'left'
,defaultType: 'button'
,layout: {
type: 'vbox'
,align: 'stretch'
}
,items: [{
text: "Foo"
},{
text: "Bar"
},{
text: "Baz"
}]
},{
title: 'center'
,flex: 1
,autoScroll: true
,tbar: [{
text: "Add content"
,handler: function() {
this.up('panel').add({
html: "<p>Lorem ipsum dolor sit amet...</p>"
})
}
}]
}]
});
});
You can use:
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start'
}
in a container ( window, panel, ..)
and:
Flex: 1
in a component within, like a grid.
Works pretty good, in my experience. ( as suggested in the layout examples from the Sencha site and Forum remarks )
Remove the 'border' layout and replace it with
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
Now you can remove the heights and it will fit dynamically