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.
Related
I want to group textfields by columns & rows, I have tried with layout type 'table' but I'm unable to group the textfields, I need Like below, please help me, Im completely new to Ext jS,thanks in advance.
column 1 column 2 column 3
Row 1 Name: textfield RollNo: textfield Language: textfield
Row 2 Age: textfield Ph: textfield Class: textfield
Row 3 ID: textfield Email: textfield Class: textfield
There is multiple ways how to achieve this but what you could do is to set the layout of the main form to hbox (horizontal box) than add 3 containers (or you could use fieldset, fieldcontainers) and in them set the layout to default or vbox (vertical). You can also play with the flex config to position your fields correctly.
You can always add more containers and play with their layouts.
Also you could try to use table layout http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#layout-table
I personally use Sencha Architect so it's much faster for me to create such form with hbox and vbox layouts.
Check out this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/200h
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias: 'widget.myform',
requires: [
'Ext.form.FieldContainer',
'Ext.form.field.Text'
],
bodyPadding: 10,
title: 'My Form',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
},
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
},
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
}
]
});
I have a fieldset defined on my page. Now I want to enable or disable this field set on button click event. But it is not working properly. Below is the code I have written:
To Disable:
this.mySettings.query('[name="fieldsetName"]').forEach(function (field) {
field.disable();
});
To Enable:
this.mySettings.query('[name="fieldsetName"]').forEach(function (field) {
field.enable();
});
Issue-1 : When I disable fieldset, it seems to be disabled visually. But still I can access controls inside it.
Issue-2 : Once it is disabled, I cannot re-enable it.
I need a working sample with these two issues resolved.
Currently I am using version 4.2 of ExtJs
You should call the setDisabled function on the fieldset. It will disable all containing components.
fieldset.setDisabled(true);
// the fieldset and all inner components are disabled
fieldset.setDisabled(false);
// the fieldset and all inner components are enabled
See the Sencha ExtJs 4.2.0 documentation and
the following minimal working example can be found on Sencha Fiddle.
Ext.create('Ext.panel.Panel',{
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: 'Disable fieldset',
handler: function (button) {
var fieldset = Ext.ComponentQuery.query('panel > #fieldsetId')[0];
var toggle = !fieldset.isDisabled();
var text = (toggle ? 'Enable' : 'Disable') + ' fieldset';
fieldset.setDisabled(toggle);
button.setText(text);
}
}],
renderTo: Ext.getBody()
});
Paste this into a Sencha fiddle and hit Run:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
Ext.create('Ext.window.Window', {
height: '100%',
width: '100%',
autoShow:true,
bodyPadding: 25,
title:'win',
items: [{
xtype: 'fieldset',
items: [{
xtype: 'checkbox',
fieldLabel: 'field1'
},{
xtype: 'checkbox',
fieldLabel: 'field2'
},{
fieldLabel: 'field3',
xtype: 'combo',
store: ['asdf','zzasdf','dfdf']
}]
}, {
xtype: 'button',
text: 'Enable/Disable entire fieldset',
handler: function(btn){
var fset = btn.up('window').down('fieldset');
fset.setDisabled(!fset.disabled);
}
}, {
margin: '0 0 0 10',
xtype: 'button',
text: 'Enable/Disable each field in fieldset individually',
handler: function(btn){
var fset = btn.up('window').down('fieldset');
fset.items.each(function(i){
i.setDisabled(!i.disabled);
});
}
}]
});
}
});
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.
I'd like to achieve this behavior:
If a field (combo, text, date ...) in a form panel has a custom property set true
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name',
customProp: true
},
then add a button or other components behind the actual component. Writen in json it would look like this:
{
xtype: 'container',
margin: '0 0 8 0',
layout: 'hbox',
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name',
},
{
xtype: 'button',
text: 'xxx',
tooltip: 'I\'m a custom tooltip'
}
]
}
I'm wondering how i could achieve this. Is this even possible ?
It is.
Ext.require('*');
Ext.onReady(function() {
var form = new Ext.form.Panel({
renderTo: document.body,
width: 400,
height: 100,
items: {
xtype: 'textfield',
fieldLabel: 'Foo'
}
});
setTimeout(function() {
var field = form.down('textfield');
// We have a reference to the field, let's go!
var owner = field.ownerCt;
owner.remove(field, false);
owner.add({
xtype: 'container',
layout: 'hbox',
items: [field, {
xtype: 'button',
text: 'Foo'
}]
});
}, 1000);
});
Where container is a reference to the container with the hbox layout.
I want to display the label on top of text field, but it is not displaying. Below is the code.(in fact the below code displays the label at the right side of text field).I am using extjs 3.4, note : Using form panel is also not working as expected (have pasted the code below)
Any help is much appreciated.
Ext.onReady(function () {
var contentsPanel = new Ext.Panel({
labelAlign: 'top',
renderTo: Ext.getBody(),
layout: 'form',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first'
}]
});
contentsPanel.show();
});
Ext.onReady(function () {
var contentsPanel = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
defaultType: 'textfield',
labelAlign: 'top',
items: [{
fieldLabel: 'First Name',
name: 'first',
labelAlign: 'top'
}]
});
contentsPanel.show();
});
labelAlign is a property of field, not panel property. Need to configure field:
items:[{
fieldLabel: 'FirstName',
labelAlign: 'top',
name: 'first'
}]
If you want set labelAlign for all panel fields, you can add in panel config:
var contentsPanel = new Ext.Panel({
fieldDefaults: {
labelAlign: 'top'
},
...