I have a tabpanel which is part of a form (input fields are on different tabs). I need to inform the user on submission if a form has invalid fields even if they are not on the current tab. I think the best way would be to change the tabs color.
The question is how can I get the reference for the tab button, without introducing a new id?
Here is what i was trying to do, turned out to be a dead end since i get reference to the tab inner body, and with one more up to the entire tab panel
...
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:190,
margin: '10 0 0 0',
items: [{
title: 'Personal',
layout:'column',
border:false,
items:[{
columnWidth:.5,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Email',
name: 'user[email]',
allowBlank: false,
listeners: {
'validitychange': function(th, isvalid, eOpts) {
if(!isvalid) {
alert(this.up().up().getId());
};
}
},
vtype:'email',
anchor:'95%'
}]
}]
}]
Try this:
From your field or any other Component in the panel (like a button) :
this.up('tabpanel').down('tab').el.applyStyles('background:red')
if the tab in question is not the first tab, you can use any tab property in the selector like this: ...down('tab[text=Example]') . You can use id property if you have it, if not you can just make up any property and set it to something meaningful like "ref:FirstTab".
If you have access to the tabPanel then you can access the items of its tabBar directly with:
this.up('tabpanel').getTabBar().items.get(0)
this.up('tabpanel').getTabBar().items.get(1)
etc.
See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tab.Bar-property-items
Related
I am using formPanel like:
tbar: [
{
iconCls:'icon-previous',
hidden: true,
//id:'previous',
name:'previous',
handler:'onPClick'
},
{
xtype: 'tbfill'
},
{
iconCls:'icon-next',
hidden:true,
//id: 'next',
name: 'next',
handler:'onNClick'
}
],
initComponent: function(){
Ext.apply(this, {
layout: 'fit',
items: [
{
xtype:'textareafield',
name: 'name',
autoScroll: true
}]
});
this.callParent();
}
On click of next or previous icon, I want to hide previous and next icon which I am handling in controller.
To show Icon, I am using Ext.getCmp(id of icons).show();
It works fine but If two tabs calls the same view It give Duplicate id Error.
I want to show()/hide() on the basis of name field specified in tbar.
How should I do it?
I would suggest to use ComponentQuery to iterate through the element of any ExtJS component,if you don't want to hard code the id.For Ex:-
var tabBar = Ext.ComponentQuery.query('tab');
Then you can further iterate through the element of tabBar element to operate on them.
tabBar.forEach(function(i){
//Here you can further iterate through another level if any,and operate on the elements
i.setHidden(true);
});
For more information Refer:-Sencha Docs For Component Query
I'm working with Extjs 4.0.7, and I am using a panel, and inside that panel I'm using two tabs, each tab contains a form for inserting data.
For each form I added a dockedItem component with same id. From here my problems started, that component was added to display error message from server or validation error of form.
If we are using that form only one time in a window there is no problem, I used Ext.getCmp('component-id'); to setError to that component.
But while using two or more forms in an active window, displays form1's error in some times in form2 error fieldl, because every form uses the same component id.
I read that you should try to avoid the usage of getCmp() in extjs.
How can I solve this problem?
Use an itemId. The itemId only needs to be unique inside it's container hierarchy:
Ext.require('*');
Ext.onReady(function() {
new Ext.form.Panel({
renderTo: document.body,
width: 300,
items: {
xtype: 'textfield',
fieldLabel: 'Field 1',
itemId: 'field1'
},
tbar: [{
text: 'Mark',
handler: function(){
this.up('form').down('#field1').markInvalid('Foo');
}
}]
});
new Ext.form.Panel({
renderTo: document.body,
width: 300,
items: {
xtype: 'textfield',
fieldLabel: 'Field 1',
itemId: 'field1'
},
tbar: [{
text: 'Mark',
handler: function(){
this.up('form').down('#field1').markInvalid('Foo');
}
}]
});
});
While you are creating the form object pass id dynamically so that you will have different form ids.
You can try with component query as well.
I have a toolbar with some buttons and one of the buttons needs to be invisible at creation and visible at some point in my app.
I'm currently adding the button when it needs to be visible but that is not exactly what I want.
When you create the button you can set hidden: true in the config.
Or you can 'hide()' the button soon after adding it and then 'show()' it at a later date.
find the button and make it invisible
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 400,
items: [
{
text: 'Button',
id: 'my-btn',
hidden: true
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});
I need to implement validation messages that appear right next to invalid field. Any help would be appreciated.
msgTarget: 'side' will Add an error icon to the right of the field, displaying the message in a popup on hover only.
if you read the documentation carefully, one more option is there for msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget
[element id] Add the error message directly to the innerHTML of the specified element.
you have to add a "td" to the right side of the control dynamically with the id. then if you specify msgTarget: 'element id' it will work.
The msgTarget: 'elementId' can work, but it seem very limited, particularly when you want multiple instances of one reusable ExtJs component (and therefor multiple instances of the same msgTarget element). For example I have an MDI style editor where you can open multiple editors of one type in a tab interface. It also doesn't seem to work with itemId or recognize DOM/container hierarchy.
I therefor prefer to turn off the default handling if I don't want exactly one of the built in message display options by setting msgTarget: none and then performing my own message display by handling the fielderrorchange event which is designed for exactly this scenario. In this case I can now respect hierarchy of my forms even with multiple instances of the same editor form as I can select the error display element relative to the editor.
Here's how I do it:
{
xtype: 'fieldcontainer',
fieldLabel: 'My Field Label',
layout: 'hbox', // this will be container with 2 elements: the editor & the error
items: [{
xtype: 'numberfield',
itemId: 'myDataFieldName',
name: 'myDataFieldName',
width: 150,
msgTarget: 'none', // don't use the default built in error message display
validator: function (value) {
return 'This is my custom validation message. All real validation logic removed for example clarity.';
}
}, {
xtype: 'label',
itemId: 'errorBox', // This ID lets me find the display element relative to the editor above
cls: 'errorBox' // This class lets me customize the appearance of the error element in CSS
}],
listeners: {
'fielderrorchange': function (container, field, error, eOpts) {
var errUI = container.down('#errorBox');
if (error) {
// show error element, don't esape any HTML formatting provided
errUI.setText(error, false);
errUI.show();
} else {
// hide error element
errUI.hide();
}
}
}
}
See the msgTarget config of the control. msgTarget: 'side' would put the validation message to the right of the control.
Use msgTarget 'side' for validation in right side and msgTarget 'under' for bottom
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
allowBlank: false,
name: 'name',
msgTarget: 'side',
blankText: 'This should not be blank!'
}]
You can use 'msgTarget: [element id]'. You have to write html in order to use element id instead of itemId. The validation function adds a list element under an element that you set as 'msgTarget'.
In case you want to show elements that you want for the validation, you can pass html instead of just a text.
{
xtype: 'container',
items: [
{
xtype: 'textfield',
allowBlank: false,
msgTarget: 'hoge'
blankText: '<div style="color:red;">validation message</div>', // optional
},
{
xtype: 'box',
html: '<div id="hoge"></div>' // this id has to be same as msgTarget
}
]
}
To show the error message under/side the input text box, msgTarget property will work only in case of you are using the form layout.
To work around this in other than form layout we need to wrap the element in "x-form-field-wrap" class.
you can find more on thread :
https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem
Here, the Sencha team explains how to have a one to many relationship:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store
And you get more in detail here:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
where they explain that
"This may be a lot to take in - basically a User has many Orders, each
of which is composed of several OrderItems. Finally, each OrderItem
has a single Product."
Nice.
Now I want to have a Form where there's the user information PLUS a grid of the user's orders (not the MVC framework, just a a derived class of form.Panel).
How can I do this? Here's the beginning of my form.Panel class, where there are only fields. I just want to add to it a datagrid that is linked with Product.
So I create my store, like in the example, Sencha gave, then I create a grid that is linked to a MyFramework.form.Panel, and everything works fine. I just want to make something like a "nested table", a one to many grid in that class, to display the products that belong to the current user.
Any idea how to do this?
Ext.define('MyFramework.form.Panel', {
extend: 'Ext.form.Panel',
alias: 'widget.writerform',
requires: ['Ext.form.field.Text'],
initComponent: function(){
this.addEvents('create');
Ext.apply(this, {
activeRecord: null,
iconCls: 'icon-user',
frame: true,
title: 'User',
defaultType: 'textfield',
bodyPadding: 5,
fieldDefaults: {
anchor: '100%',
width: 500,
labelWidth: 200,
labelAlign: 'right'
},
items: [{
xtype:'tabpanel',
activeTab: 0,
defaults:{
layout: 'fit',
bodyStyle:'padding:10px'
},
items:[{
title:'General information',
defaultType: 'textfield',
items: [{
fieldLabel: 'Titre ',
name: 'titre',
allowBlank: false
},{
fieldLabel: 'Image grande ',
name: 'imgGrande'
}]
},{
title:'Products',
defaultType: 'textfield',
items: [
/*
* Advices/example here!
* I'm stuck!
*/
]
}]
}]
});
this.callParent();
}
});
You can work with the concept of Dynamic Form interacting with an embbed grid.
Of course that doesn't suit your needs right away. My advice, though, is to start from there and try to implement a field that will be related to an embbed grid, in your case a grid of products.
With that said, you wouldn't have a form that is filled by the embbed grid selection, but a single field that gets filled like a ComboBox, but by the grid selection.
Maybe try the Ext.form.LookUp field, a component that I've created that is kinda related to that problem.
This component is not exactly what you are looking for, since it works with single records, like with one to one relationships. But you can try to implement something from there.