I have ExtJs text box. I want to view text box value as URL. but url view as pain text. I want to view url inside the text box. my text filed is below
MyTextField3Ui = Ext.extend(Ext.form.TextField, {
fieldLabel: 'Web Site',
anchor: '100%',
boxMaxWidth: 500,
readOnly: true,
id: 'website',
initComponent: function() {
MyTextField3Ui.superclass.initComponent.call(this);
}
});
I'm very new to ExtJs sorry for ask every small question. please help to me. Thankx
The best way is to define a widget from Ext.BoxComponent instead of Ext.form.TextField
and register some xtype like this.
Ext.reg('hreffield', "extended class name will go here");
and into extended class define a property
defaultAutoCreate : {tag: "div"/"text" whatever you like},
This will allow you to change.
usage will be
xtype: "hreffield",
id: "myid",
fieldLabel: "link",
width: 200,
tabIndex: 1,
value: "google.com"
Related
I need to add a little blip about an update to a form and I'm making it unnecessarily hard on myself. How do I add a text field that simply says Notice: XYZ underneath the Transfer date field? Is it a certain xtype I need to implement?
There are many possible way to add textfield/ displayfield in your form. Get hold of form and then add the textfield. Or simply add the textfield in form panel.
I created a fiddler for you in that I am adding next to 'Transfer Date' by this way.
{
xtype :'textfield',
name: 'last',
editable :false,
allowBlank: false,
fieldLabel: 'Notice',
value: 'xyz'
}
Since you asked for textfield so we can do like that and make editable :false, but the easier option is to achieve this is
{
xtype: 'displayfield',
fieldLabel: 'Notice',
value: 'xyz'
}
Both type of solution is available in fiddler. Have a look and choose as per your choice. Fiddle
Add in your form object
formPanel.add({
xtype: 'displayfield',
fieldLabel: 'Notice',
value: 'xyz'
})
try adding a new component of xtype: label to your form panel.
for example:
formPanel.add({
xtype: 'label',
text: 'Notice: XYZ'
});
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
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
I can't seem to be able to focus a field in a form in extjs 4.
The doc lists a focus function for Text field (inherited from Component) but it doesn't do anything in terms of focusing to the input field.
Here's a sample code from the docs
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false
}, {
xtype: 'textfield',
id:'email',
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email'
}]
});
If I call Ext.getCmp('email').focus() nothing visible happens.
What's the correct way to focus a field in extjs 4?
Sometimes a simple workaround is to slightly defer the focus call in case it's a timing issue with other code or even with the UI thread allowing the focus to take place. E.g.:
Ext.defer(function(){
Ext.getCmp('email').focus();
}, 0);
There isn't anything wrong with your code. I've made a jsfiddle for it and it works fine. Are you wrapping code in and Ext.onReady()? Also what browser are you using?
Try this:
Ext.getCmp('email').focus(false, 20);
Rather than work around with a delay, look for what is getting focus instead. Look out for focusOnToFront property on the parent.
I have a Panel layout with a TreePanel in one region. A user clicks on an node in the tree and a TabPanel should be displayed in another region with information, editing tools etc. for that tree node.
I have a working layout with tree panel and an on('click') event that fires. However, I don't seem to be able to get the TabPanel to be able to render in the layout.
If I allow the TabPanel to render as part of the panel rather than in the on click event it works as expected.
I'm not sure what I'm missing in terms of rendering the tab panel into a named element. Any help would be appreciated.
Below is the code in question.
Many Thanks
Stephen
var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title : 'Site Tree',
region : 'center',
height : 300,
minSize: 150,
autoScroll: true,
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,
dataUrl:'admin.page.getSiteTreeChildren',
root: {
nodeType: 'async',
text: 'nowt here',
draggable: false
}
});
treePanel.on('click', function(n){
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
renderPageTabs(n.id);
});
function renderPageTabs(resourceid) {
pageTabPanel.render('contentpanel');
alert('resourceid'+resourceid);
}
var pageTabPanel = new Ext.TabPanel({
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Page Overview',
html: 'This will be the page overview detail tab'
},{
title: 'Content Editor',
html: 'This will be the page editor tab'
},{
title: 'Property Editor',
html : 'This will be the property editor tab'
},{
title: 'Workflow',
html : 'This will be the workflow tab'
}
]
})
var contentPanel = {
id : 'contentpanel',
region : 'center',
margins : '0 0 0 0',
border : false
};
// TODO perhaps the tool bar should be in a north region of this panel
var dashPanel = new Ext.Panel({
layout : 'border',
height : 500,
items : [{
layout : 'border',
id : 'site-nav',
region : 'west',
collapsible : true,
border : false,
split : true,
margins : '0 0 0 0',
width : 275,
minSize : 100,
maxSize : 500,
items : [actionPanel, treePanel]
}, contentPanel],
renderTo : 'dashboardPanel'
});
I don't think you are using the render method in the correct way.
Tab Panel: render
If you are using a Container object to house this Component, then do not use the render method.
Is your tree going to allow a tab to be opened any time a tree node is clicked? Will there be multiple tabs at one time? If so, I think maybe you just want to use .add(), instead of .render(). After you do .add(), you will also need to call .doLayout() on the container panel as well so it will show up.
You may need to alter your renderPageTabs function so that it builds the pageTabPanel object inside of it for each tab, then uses .add() to place it in the contentpanel object.
I assume pageTabPanel isn't defined at the time you trigger the handler.
Try to remove the var keyword in front of "var pageTabPanel =" to make it a global variable.
If that works, it's a scope/variable issue.
The better solution is to give the tabpanel an id and call Ext.getCmp('tabpanelid').render('contentpanel') in your renderPageTabs method.
Hope that helps.
Regards,
Steffen