I have a FormPanel with several textfield items and a fieldset that contains a combobox and a button. The fieldset has a column layout in order to make the combobox and button display side-by-side. However, the fieldset's field label does not display, even though it is inside a FormPanel. When I make the fieldset's layout form, only the label separator appears. Why is this happening? Is there a better way to have a form with several textfields and then a combobox and button side-by-side?
Here's what I have:
this.searchPanel = new Ext.FormPanel({
border: false,
frame: true,
style: 'width:50%',
bodyStyle: 'padding:6px 10px 0px 10px',
items: [{
//Several textfields
},{
xtype: 'fieldset',
border: false,
autoHeight: true,
fieldLabel: 'Sort by',
labelStyle: 'font-weight: normal',
style: 'padding:0;margin-bottom:0',
layout: 'column',
items: [
{
xtype: 'combo',
name: 'sort',
style: 'width:100%',
columnWidth: .5,
hiddenName: 'sort',
store: //Commented out for brevity
mode: 'local',
editable: false,
forceSelection: true,
triggerAction: 'all'
},{
xtype: 'button',
style: 'margin-left: 10px',
columnWidth: .5
}
]
}
]
});
FieldSet's do not have a fieldLabel like other form components, instead they have a title like a panel.
Related
In my extJs 6.5 project, I am trying to change the background color of a toolbar.
This is only for 1 component and can't seem to figure out the best way with cls or ui. Can someone show me how to change background color?
Ext.define('App.view.menu.Menu', {
extend: 'Ext.panel.Panel',
xtype: 'app-menu',
controller: 'menu',
itemId: 'menuItemID',
requires: [
'App.view.menu.MenuController'
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'left',
cls: 'app-menu',
//ui: 'mainmenuTest',
//ui: 'dark',
style: 'padding: 0; margin: 0;',
items: [
{
xtype: 'combobox',
itemId: 'comboboxClientItemID',
emptyText: 'Select Client...',
editable: false,
displayField: 'clientName',
valueField: 'clientName',
bind: {
store: '{myClientListStore}',
selection: '{selectedClientListModel}'
},
listeners: {
select: 'onComboboxSelect'
},
queryMode: "local"
}
]
}
]
});
In your Menu.scss file add a ui with
#include toolbar-ui(
$ui: 'toolbar-red',
$background-color: #ff0000 // your background color here
);
Then on your toolbar simply add the ui 'toolbar-red'.
{
layout: {
type: 'hbox'
},
items: [
{
xtype: 'selectfield',
placeHolder: 'selectfield',
autoSelect: false,
},
{
xtype: 'textfield',
placeHolder: 'textfield'
}
]
},
I want to use 'hbox' layoout with selectfield and textfield for horizontal components using Sencha Touch 2.0
but like this image, underlines for second component(textfield) in fieldset are not seen. What's wrong?
screenshot
Hi its nothing with hbox layout and fieldset. Its is due to selectField.these lines are the border of selectField. If you want to remove it you need something like this
{
xtype: 'selectfield',
placeHolder: 'selectfield',
autoSelect: false,
border: 0,
},
this will make it disappear these line
i hope you get it ;)
here is a simple fiddle
And In case if you want to have borders follow this code
{
xtype: 'selectfield',
border: 3,
style: 'border-color: blue; border-style: solid;',
flex: 1,
placeHolder: 'selectfield',
autoSelect: false,
},
{
xtype: 'textfield',
border: 3,
style: 'border-color: blue; border-style: solid;',
flex: 1,
placeHolder: 'textfield'
}
I have a form panel created in EXtjs 4.1 in which there are 7 fieldsets. Default fieldset type is text field. Some of them are search box text fields. Form Panel has height specified. So if I scroll down to bottom of form panel and make change in fieldset (like searching for word and selecting one of the options form results), Scrollbar jumps a bit to top. This happens in update layout, Is there any way to prevent this?
My form panel code is as below.
Ext.define('MyApp.view.Form', {
extend: 'Ext.form.FormPanel',
overflowY: 'auto',
defaults: {
anchor: '98%',
msgTarget: 'side',
disabledCls: ''
},
disabledCls: '',
bodyBorder: false,
bodyPadding: '0 8 10 8',
border: '0',
waitMsgTarget: true,
frame: false,
fieldDefaults: {
labelAlign: 'top',
bodyPadding: 0,
labelSeparator: '',
msgTarget: 'side',
disabledCls: ''
},
defaultType: 'textfield',
items:[
{ xtype: 'item 1' },
{
xtype: 'item2'
},
{ xtype: 'item3'},
{ xtype: 'item4' },
{
xtype: 'item5'
},
{ xtype: 'item6' },
{ xtype: 'item7' }
]
});
This is happening for all fieldset changes.
I want to create a form to provide optional parameters for search query in Ext js 4.
I have implemented this by using menuitem so far. It works fine but it has strange behavior which I need to get rid of:
In mouse over textfield, which is menu item, it gets focus without waiting for click and it loses focus on mouse out. That means, if I want to type something I should hover it, and if I move my mouse to somewhere else it loses focus and I cannot continue typing until I bring my mouse back. This is actually correct for menu item because it is supposed to be button.
{
xtype: 'button',
action: 'chooseOptions',
text: 'Options',
menu: new Ext.menu.Menu({
plain: true,
allowOtherMenus: true,
items: [
{
xtype: 'textfield',
name: 'login',
fieldLabel: 'Login',
labelWidth: 100,
margin: '10 10 10 10',
width: 300
},
{
xtype: 'combobox',
fieldLabel: 'Type',
name: 'type_id',
store: 'MyStore',
displayField: 'value',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
},
{
xtype: 'combobox',
fieldLabel: 'Agent',
name: 'a_id',
store: 'Agents',
displayField: 'name',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
}
]
})
},
Is there any alternatives to implement this?
Try this and let me know what's happening ( prevent loosing by adding delay )
{
xtype: 'button',
action: 'chooseOptions',
text: 'Options',
menu: new Ext.menu.Menu({
plain: true,
allowOtherMenus: true,
items: [
{
xtype: 'textfield',
name: 'login',
fieldLabel: 'Login',
labelWidth: 100,
margin: '10 10 10 10',
width: 300,
listeners: {
afterrender: function(field) {
field.focus(false, 1000)
// or try without parameter
}
}
},
{
xtype: 'combobox',
fieldLabel: 'Type',
name: 'type_id',
store: 'MyStore',
displayField: 'value',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
},
{
xtype: 'combobox',
fieldLabel: 'Agent',
name: 'a_id',
store: 'Agents',
displayField: 'name',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
}
]
})
},
Or just try to get by ComponentQuery and set focus() method values:
var txtField = Ext.ComponentQuery.query('textfield[name=login]');
txtField.focus(false, 500);
I had the same problem.
I tried many workaround but nothing really worked.
I ended up to add a listener on the button menu to catch mouseover event and then focus the textfield everytime. This works only if you have ONE textfield otherwise you have to add tests to determine which textfield to focus on mouseover.
lets try this :
,listeners: {
mouseover : function (menu, item, e, eOpts) {
//fix bug of loosing focus on combo
menu.down("combo[name=myComboName]").focus();
}
}
I have a form with dynamically added fields (varying sizes).
I would like to put a number of form fields in a fieldset, and have the fieldset border just large enough to contain all the fields.
Here is an (ugly) example that shows the issue:
var win = new Ext.Window({
xtype: 'form',
layout: 'form',
height: 200,
width: 500,
title: 'Testing',
items: [{
xtype: 'fieldset',
layout: 'hbox',
autoHeight:true,
autoWidth: false,
title: 'Fieldset',
defaults: {
border: false,
layout: 'form',
labelAlign: 'top',
labelSeparator: ''
},
items: [{
items: new Ext.form.TextField({
fieldLabel: 'Col1',
name: 'col1',
value: 'nothing',
})
}, {
items: new Ext.form.TextField({
fieldLabel: 'Col2',
name: 'col2',
value: 'something'
})
}]
},
new Ext.form.TextField({
fieldLabel: 'Col3',
name: 'col3',
value: 'anything'
})
]
}).show();
This is what it looks like:
I will not know the width of the contained fields beforehand, so I can't specify a width.
Thanks for any suggestions.
Not what you asked for, but adding flex: 1 to the defaults for the fieldset makes the fields arrange themselves evenly within the bounds of the fieldset.
Ok, works by changing some fieldset properties:
layout to 'table',
autoWidth to true,
adding a cls with 'float:left', (putting this in style doesn't seem to help)
and adding a dummy element to clear the float:
{
xtype: 'component',
style: 'clear:both'
}
It now shows as desired!