I wish to have an icon displayed as "value" for a form "displayfield". This is to display read-only values like true/false and yes/no with icons like "tick mark/cross mark". How to do it? There are many posts on labels but that is not what I am looking for. I need a "fieldLabel" and then the icon (it is not mandatory to use a form though, I may use any component for this).
Yes we can do that try with my example and I am attaching screenshot too.
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 200,
height: 150,
bodyPadding: 10,
title: 'Final Score',
items: [{
xtype: 'displayfield',
fieldLabel: 'home ',
name: 'home_score',
value: '<img src="home.png"></img> '
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor ',
name: 'visitor_score',
value: '<img src="visitor.png"></img>'
}],
buttons: [{
text: 'Update'
}]
});
});
Just change the path of your image in your code.If you are not using form apply the same in label field.
Finally, I did the following in items of form-panel to make it work:
{
xtype: 'fieldcontainer',
fieldLabel: 'Label 1',
flex: 1,
name: 'Name 1',
items: [{
xtype: 'image',
glyph: 'something#FontAwesome'
}]
},{
xtype: 'fieldcontainer',
fieldLabel: 'Label 2',
flex: 1,
name: 'Name 2',
items: [{
xtype: 'image',
glyph: 'something#FontAwesome'
}]
}
I put Ext.Img in 'requires' of form-panel class.
Related
I am currently working on ExtJs and I am stuck at a place where I want to iterate through all components and find the parent tab of each component.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
items : [{
xtype: 'fieldset',
itemId: 'fieldsetId',
items: [{
xtype: 'checkbox',
fieldLabel: 'Check 1'
},{
xtype: 'checkbox',
fieldLabel: 'Check 2'
},{
fieldLabel: 'Combo 1',
xtype: 'combobox',
store: ['value1','value2','value3']
}]
},
{
xtype: 'button',
text: 'Reset',
}]
},
{
title: 'Tab 2',
html : 'Another one',
items: [{
xtype: 'button',
text: 'Test',
}]
}
],
renderTo : Ext.getBody()
});
}
});
In above code, when I iterate through all components and log name of the parent tab whether it is Tab 1 or Tab 2
Whenever you are iterating through all the components, just do
field.up().up()
where field is the component of your tab and above statement will return you the parent tabpanel and so with
field.up().up().title
will return you "Tab 1"
In the same way for tab 2 components it will be
field.up() only.
If you have only one loop or something to go through all components then you can put a condition that
if(field.up()) returns you the panel then read it\'s title
else do field.up().up() and then read the title.
I hope this solves you issue.
You can use , field.up('tabPanel') to get the reference of the tabPanel, and then from the reference you can get name,title for the tabPanel
Can a panel with table layout of 3 columns be made to add buttons vertically into the first column until that column is full and then continue adding buttons at the top of the second column etc? tia.
Its a bit hacky but you can use a RadioGroup and put some buttons into it:
Ext.create('Ext.form.Panel', {
title: 'RadioGroup Example',
width: 200,
height: 200,
bodyPadding: 10,
renderTo: Ext.getBody(),
items:[{
xtype: 'radiogroup',
columns: 2,
vertical: true,
items: [
{ xtype: 'button', text: 'Item 1' },
{ xtype: 'button', text: 'Item 2' },
{ xtype: 'button', text: 'Item 3' },
{ xtype: 'button', text: 'Item 4' },
{ xtype: 'button', text: 'Item 5' },
]
}]
});
I have following code-
{ fieldLabel: 'Date', name: 'Date', xtype: 'datefield' }
{ fieldLabel: 'Name', name: 'PerName', xtype: 'textfield' },
{
xtype: 'panel',
layout: 'form',
border: false,
labelWidth: 200,
items: [
this.fields.check1 = { xtype: 'checkbox', name: 'Check1', fieldLabel: 'Checkbox 1', width: 320 },
this.fields.check2 = { xtype: 'checkbox', name: 'Check2', fieldLabel: 'Checkbox 2', width: 320 }
]
}
Here, I am taking the checkboxes inside a panel as I need to increase the label width.
The label is showing but checkbox is not displaying .
What I am doing wrong
How about you add your checkboxes inside a FormPanel something like this:
var myPanel = new Ext.form.Panel({
alias: 'widget.myformPanel',
renderTo: Ext.getBody(),
defaults: {
labelWidth: 100,
},
items: [{
xtype: 'checkbox',
name: 'Check1',
fieldLabel: 'Checkbox 1'
}, {
xtype: 'checkbox',
name: 'Check2',
fieldLabel: 'Checkbox 2'
}]
});
In that way, you can set the labelWidth of the formPanel items.
Try to play it with jsfiddle.
Build your application with
sencha app build
It seems that you need to build only for deployment, however, development version uses production css. Therefore, anytime you add a new class you need to build the app to re-create css to include the new class styling.
I'm using siesta to test a large scrolling page, and some of the elements are not visible unless you scroll down first. Siesta runner seems to assume that the elements that need to be clicked are visible, so when it tries to click those elements, it actually misses the target by far. How can I overcome this?
I have modified an existing testcase just to add a large panel that would push down the target elements.
Any help would be appreciated.
StartTest(function (t) {
var fp = Ext.create('Ext.FormPanel', {
title: 'Check/Radio Groups Example',
frame: true,
fieldDefaults: {
labelWidth: 110
},
width: 700,
height: 1700,
renderTo:Ext.getBody(),
bodyPadding: 10,
items: [
{
xtype: 'panel',
title: 'a LARGE panel',
height: 1500
},
{
xtype: 'fieldset',
title: 'Checkbox Groups (initially collapsed)',
layout: 'anchor',
defaults: {
anchor: '100%',
labelStyle: 'padding-left:4px;'
},
items: [{
xtype: 'checkboxgroup',
fieldLabel: 'Favorite browser',
// Put all controls in a single column with width 100%
columns: 1,
items: [
{id : 'cb-chrome', boxLabel: 'Chrome', name: 'cb-col-1'},
{id : 'cb-ff', boxLabel: 'Firefox', name: 'cb-col-2'},
{id : 'cb-safari', boxLabel: 'Safari', name: 'cb-col-3'}
]
},{
xtype: 'checkboxgroup',
fieldLabel: 'Random questions',
allowBlank: false,
msgTarget: 'side',
autoFitErrors: false,
anchor: '-18',
layout: 'column',
defaultType: 'container',
items: [{
columnWidth: .33,
items: [
{xtype: 'component', html: 'IE 6 is:', cls:'x-form-check-group-label'},
{xtype: 'checkboxfield', boxLabel: 'Awesome', name: 'cb-cust-1'},
{xtype: 'checkboxfield', boxLabel: 'Not so awesome', name: 'ie6-not-awesome'}
]
},{
columnWidth: .33,
items: [
{xtype: 'component', html: 'Chrome is', cls:'x-form-check-group-label'},
{xtype: 'checkboxfield', boxLabel: 'Fast', name: 'cb-cust-3'},
{xtype: 'checkboxfield', boxLabel: 'Not so fast', name: 'cb-cust-3'}
]
},{
columnWidth: .34,
items: [
{xtype: 'component', html: 'This demo is powered by', cls:'x-form-check-group-label'},
{xtype: 'checkboxfield', boxLabel: 'ActiveX', name: 'cb-cust-4'},
{xtype: 'checkboxfield', boxLabel: 'Ext JS', name: 'cb-cust-5'}
]
}]
}]
}]
});
// Making use of Ext.ComponentQuery
t.chain(
{ action : 'click', target : '>>[id="cb-chrome"]' },
{ action : 'click', target : '>>[name="ie6-not-awesome]' },
{ action : 'click', target : '>>[boxLabel="Fast"]' },
{ action : 'click', target : '>>[boxLabel="Ext JS"]' },
function() {
t.pass('All boxes could be clicked ok');
}
);
});
In your harness file you can configure this option:
autoScrollElementsIntoView : true,
Now Siesta should automatically scroll to that element for click.
Also you can set up size of the view-port window:
viewportHeight : 1200,
viewportWidth : 1200,
And if the scroll bar is directly in your app, you should be able to move with it using Siesta functions:
http://www.bryntum.com/docs/siesta/#!/api/Siesta.Test.Element-method-scrollVerticallyTo
Or using ExtJS functions:
http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Component-method-setScrollX
I am having trouble making ExtJS field set elements appear correctly without overlapping. I use a FieldSet class and each row is a hbox container. My goal is to leave the layout the same but somehow make the values automatically show up on more than one line if needed.
Below is a sample of what my code looks like and a screenshot.
var genInfoFieldSet = new Ext.form.FieldSet({
title: '<b>TEST FIELD SET</b>',
height: '100%',
autoWidth: true,
items: [
//ROW 1
{
xtype: 'container',
layout: 'hbox',
defaults: { labelWidth: 120, align: 'stretch', labelStyle: 'font-weight:bold;font-size:11px', flex: 1,
fieldStyle: 'font-size:11px'
},
items: [
{
xtype: 'displayfield',
fieldLabel: 'field 1',
value: 'ABCDESDAVBABVA'
},
{
xtype: 'displayfield',
fieldLabel: 'field 2',
value: 'ZXCVZXVCZXZX'
},
{
xtype: 'displayfield',
fieldLabel: 'field 3',
value: 'ZXZXZXZX'
},
{
xtype: 'displayfield',
fieldLabel: 'field 4',
value: 'AKHAKSHASH'
}
]
},
//ROW 2
{
xtype: 'container',
layout: 'hbox',
defaults: { labelWidth: 120, align: 'stretch', labelStyle: 'font-weight:bold;font-size:11px', flex: 1,
fieldStyle: 'font-size:11px'
},
items: [
{
xtype: 'displayfield',
fieldLabel: 'field 5',
value: 'xxxxxxxxxxxxxxxxxxAAAAAAAXXX',
width: '10px'
},
{
xtype: 'displayfield',
fieldLabel: 'field 6',
value: 'AB'
},
{
xtype: 'displayfield',
fieldLabel: 'field 7',
value: 'ABC'
},
{
xtype: 'displayfield',
fieldLabel: 'field 8',
value: 'ABC'
}
]
}
]
});
You have provided flex:1 to every element (by using it in defaults). Instead of this, you should prefer providing flex:1 to one of the element, and give fixed width (or minWidth maxWidth) to others.
Giving flex:1 to every element tries to distribute the total width equally to all the elements and if the available width is not enough then the overlap occurs.
Thus, to remove the overlap, take off flex:1 from the defaults and assign flex:1 to any one element and give widths to others.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Box-cfg-flex
Hope this helps.