Related
I'm using Extjs for testing purposes and I'm stucked trying to use a component within another. Here is what I have:
This is the main component:
var component = Ext.create('mypackages.mycomponent');
Ext.define('mypackages.maincomp', {
extend: 'Ext.window.Window',
itemId: 'maincomp',
xtype: 'maincomp',
modal: true,
bodyPadding: 10,
height: 350,
width: 270,
closeAction: 'destroy',
resizable: false,
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 1
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Phone',
name: 'phone',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
item: component
}
]
});
and this is the component I would like to render:
Ext.define('mypackages.component', {
extend: 'Ext.Component',
id: 'component',
alias: 'component',
items: [
{
xtype: 'textfield',
fieldLabel: 'Address',
name: 'address',
id: 'address',
labelAlign : 'right',
width: 265,
allowBlank: false
}
],
constructor: function () {
this.callParent();
console.log('I am entering here!!!');
}
});
As you can see I'm tring to load the component like this item: component and it is actually calling the component due to the browser's console shows me the I am entering here!!! message. The problem is the component is not displayed after Phone textfield. What am I missing here? Is it necessary to force the component to be shown? If so, how can I achieve this?
You want to declare your own field type:
Ext.define('mypackages.component', {
extend: 'Ext.container.Container',
xtype: 'myaddressfield',
items: [
{
xtype: 'textfield',
fieldLabel: 'Address',
name: 'address',
id: 'address',
labelAlign : 'right',
width: 265,
allowBlank: false
}
],
constructor: function () {
this.callParent();
console.log('I am entering here!!!');
}
});
Ext.define('mypackages.maincomp', {
extend: 'Ext.window.Window',
itemId: 'maincomp',
xtype: 'maincomp',
modal: true,
bodyPadding: 10,
height: 350,
width: 270,
closeAction: 'destroy',
resizable: false,
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 1
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Phone',
name: 'phone',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'myaddressfield'
}
]
});
In main component :
First: remove the first line. You dont need to create new instance here.
var component = Ext.create('mypackages.mycomponent');
Next change invalid line:
{
item: component
}
To:
{
xtype: 'newComponent'
}
And finally set the alias in second component:
alias: 'widget.newComponent',
I am beginner to sencha architect and in ExtJS. When I placed error message in below textfield, this textfield moved little up because of vertical-align: middle has been assigned by sencha architect. How to fix that issue.
https://docs.sencha.com/extjs/6.0.2/guides/components/forms.html
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
width: 300,
bodyPadding: 10,
defaultType: 'textfield',
items: [{
xtype: 'textfield',
flex: 1,
cls: [
'customInput',
'formTextBlack'
],
minHeight: 55,
fieldLabel: 'Pack Type',
labelAlign: 'top',
labelCls: 'blackLabelText14',
labelSeparator: ' ',
msgTarget: 'under',
name: 'packType',
fieldStyle: 'background:transparent',
readOnly: false,
allowBlank: false,
allowOnlyWhitespace: false
},
{
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
});
For this there is two way
Using height and scrollable:'y' or scrollable:true of form component. In this case scroll-able height of form will automatically increase/decrease when error message show/hide respectively. Please refer this working FIDDLE for this way.
Without height and scrollable of form
component. In this case height of form will
automatically increase/decrease when error message show/hide
respectively. Please refer this working
FIDDLE for this way.
I hope this will help you or guide you to achieve your requirement.
Code Snippet with height and scroll-able config
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
scrollable: 'y',//true
width: '100%',
bodyPadding: 10,
defaults: {
flex: 1,
anchor: '100%',
labelSeparator: '',
margin: '10 20',
minHeight: 55,
xtype: 'textfield',
labelAlign: 'top',
allowBlank: false,
msgTarget: 'under' // location of the error message
},
items: [{
fieldLabel: 'Last Login Time',
name: 'loginTime',
regex: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i,
maskRe: /[\d\s:amp]/i,
invalidText: 'Not a valid time. Must be in the format "12:34 PM".'
}, {
fieldLabel: 'First Name',
name: 'firstName'
}, {
fieldLabel: 'Middle Name',
allowBlank: true,
name: 'firstName'
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
fieldLabel: 'Email',
name: 'email'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Join',
name: 'joinDate',
invalidText: '"{0}" not valid.enter value should be like "{1}" .' // custom error message text
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate',
invalidText: '"{0}" bad. "{1}" good.' // custom error message text
}]
});
Code Snippet without height and without scroll-able config
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
width: '100%',
bodyPadding: 10,
defaults: {
flex: 1,
anchor: '100%',
labelSeparator: '',
margin: '10 20',
minHeight: 55,
xtype: 'textfield',
labelAlign: 'top',
allowBlank: false,
msgTarget: 'under' // location of the error message
},
items: [{
fieldLabel: 'Last Login Time',
name: 'loginTime',
regex: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i,
maskRe: /[\d\s:amp]/i,
invalidText: 'Not a valid time. Must be in the format "12:34 PM".'
}, {
fieldLabel: 'First Name',
name: 'firstName'
}, {
fieldLabel: 'Middle Name',
allowBlank: true,
name: 'firstName'
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
fieldLabel: 'Email',
name: 'email'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Join',
name: 'joinDate',
invalidText: '"{0}" not valid.enter value should be like "{1}" .' // custom error message text
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate',
invalidText: '"{0}" bad. "{1}" good.' // custom error message text
}]
});
I have my application (ExtJS 4.2.1) and I have a form:
xtype: 'form',
bodyPadding: 10,
autoScroll: false,
itemId: 'editForm',
defaults: {
msgTarget: 'side',
xtype: 'textfield'
},
//layout:'anchor',
items: [{
xtype: 'combobox',
itemId: 'cboEmployer',
store: Ext.create('App.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: false,
},{
xtype: 'radiogroup',
fieldLabel: 'Type',
name: 'RequestInAdvance',
columns: 2,
items: [{
boxLabel: 'Normal',
name: 'RequestInAdvance',
inputValue: 0,
checked: true
}, {
boxLabel: 'Advanced',
name: 'RequestInAdvance',
inputValue: 1
}
]
}, {
xtype: 'fieldset',
title: 'Date selection',
defaults: {
labelWidth: 89,
anchor: '100%',
layout: {
type: 'hbox',
defaultMargins: {
top: 0,
right: 5,
bottom: 0,
left: 0
}
}
},
items: [{
xtype: 'highlightdate', // <- This is a custom datepicker but I need it to be a field type
name: 'SelectedDates',
itemId: 'datePicker'
}],
},
],
buttons: [{
text: 'Save',
action: 'commit',
glyph: Glyphs.SAVE,
disabled: true
}],
xtype: 'highlightdate' is a custom datepicker and I need to do custom form Validation so I can mark the element as error:
In my validation method I have:
var fieldMatch = Ext.ComponentQuery.query('field[name=' + error.field + ']');
if (fieldMatch.length) {
// add extra validaiton message to the offending field
fieldMatch[0].markInvalid(error.message);
}
So when I try to set an error to my highlightdate xtype It can be found becuase is not a field.
Is there a way to workaround this?
xtype is just a shortname for your custom 'highlightdate' class and can be replaced by the new Namespace.CustomClass({cfg}) notation. What you need to figure out is: what base class does this custom class extend? If it extends Ext.form.field.Base or Ext.form.field.Text for ex. than it's also a field and inherits all the properties from it.
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 am working in extjs4. I am geting stuck at a point where I want to format items in a panel at a center position properly. But I don't know how.
Actually I want to display all items at middle position not left side..also I want display submit button at center position but it get display at left side.. I am facing this problem...
here Is my some code :
Ext.define('Am.user.Registration', {
extend:'Ext.form.Panel',
//extend:'Ext.window.Window',
id:'registationId',
alias:'widget.Registration',
title:'Registration form',
resizable:false,
buttonAlign:'center',
closable:true,
titleAlign:'center',
//autoScroll:true,
draggable:false,
//shadow:true,
height:350,
width:800,
floating:true,
bodyPadding: 30,
//collapsible:true,
requires:[
'Balaee.view.sn.user.Captcha'
],
defaults:{
//align:'center'
defaultAlign:'t1-c'
},
//bodyStyle: 'align:center',
// Ext.require(['Ext.form.field.Date']);
items:[
{
xtype:'combo',
fieldLabel:'Language',
name:'language',
emptyText: 'Language',
store: ['Marathi','Hindi','English'],
queryMode: 'local',
editable:false
},
{
xtype: 'fieldcontainer',
fieldLabel: 'Name',
layout: 'hbox',
combineErrors: true,
defaults: {
hideLabel: true
},
items: [
{xtype: 'textfield', fieldLabel: 'First', name: 'firstName', emptyText: 'First name',width: 80, allowBlank: false,margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'Middle', name: 'middleName',emptyText: 'Middle name', width: 80, allowBlank: true, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'Last', name: 'lastName', emptyText: 'Last name',width: 80, allowBlank: false,
validator: function(value) {
var password1 = this.previousSibling('[name=firstName]');
return (!(value === password1.getValue())) ? true : 'Dont give first name and last name same.'
}
}
]
},
{
xtype:'textfield',
fieldLabel:'Primary email',
name:'primaryEmail',
//anchor:'100%',
allowBlank:false,
emptyText: 'Email',
vtype:'email'
//labelAlign:'right',
},
---------------
--------------
],//End of items square
// buttons:[{
// xtype:'button',
// formBind: true,
// fieldLabel:'submitttttttt',
// action:'submitAction',
// text:'Submit',
// defaultAlign:'t1-c'
// }
// ],
bbar:
[
{
xtype:'button',
formBind: true,
fieldLabel:'submit',
action:'submitAction',
text:'Submit',
defaultAlign:'t1-c'
//flex:6,
},
],//End of buttons square
});// End of login class
You should apply an HBox layout (with pack: 'center') to your form and ditto for your toolbar.
You can see an example of how this is done for the form here. And for the toolbar:
var toolbar = new Ext.Toolbar({
dock: 'bottom',
layout:{
pack: 'center'
},
items: [{
xtype: 'button',
text: 'foobar',
handler: function(){
alert('ok');
}
}]
});