I would like to put a red asterisk after a text . Is there a way to add directly css code in the js code? Like the parameter style for example but only for the asterisk.I'm working on Extjs 3.4
Here is the code.
{
xtype: 'label',
style: "font-size:11px;font-weight:bold;",
text: 'Note<span style="color:red">*</span> If any job applicant is failed,you can find it in the error log.',
// fieldLabel: 'Note<span style="color:red">*</span>: If any job applicant is failed,you can find it in the error log.',
}
,
If i use fieldLabel,the complete text printing only on left side.
and span is working for "fieldLable" but span is not working for "text".
Use html instead of text.
Ext.onReady(function() {
new Ext.FormPanel({
height: 100,
renderTo: Ext.getBody(),
items: [{
xtype: 'label',
style: "font-size:11px;font-weight:bold;",
html: 'Note<span style="color:red">*</span> If any job applicant is failed,you can find it in the error log.',
}]
});
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/3.4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/3.4.1.1/adapter/ext/ext-base-debug.js"></script><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/3.4.1.1/ext-all-debug.js"></script>
Add panel after label as:
{
xtype: 'label',
forId: 'myFieldId',
text: 'Note',
},{
xtype:'panel',
html:'<span style="color:red;">*</span> If any job applicant is failed,you can find it in the error log.'
}
Here is another solution. Using class and :before. fiddle
Related
How do I add a text beside the icon in Extjs Panel tool type?
Example:
Below code displays print icon at top right corner of the Panel.
tools : [
{
type: 'print',
// text : 'Print document',
handler : function(){
Ext.Msg.alert('print', 'you clicked print icon');
}
}
]
I like it to render it as ["print icon" space "Print document"]
I don't think you can write a text to a tool (well you could "hack" it using CSS). But you can create custom header for your panel and put a button there.
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
height: 250,
width: 400,
header: {
title: 'My Panel',
items: [{
xtype: 'button',
text: 'Print Document',
iconCls: 'x-fa fa-print'
}]
}
});
Working fiddle https://fiddle.sencha.com/#view/editor&fiddle/1qit
We have a config iconAlign : String possible inputs are'top'
'right'
'bottom'
'left'`
I am trying to design a layout like the one shown in the image. I tried the following code
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px'
},
items: [{
// This is the component A in layout image
xtype: 'textfield',
fieldLabel: 'Text-1'
},{
// This is the component B in layout image
xtype: 'textfield',
fieldLabel: 'Text-2'
},{
// This is the component C in layout image
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
colspan: 2
}],
layout: {
type: 'table',
columns: 2,
align:'stretch'
},
});
}
});
But I'm not able to make the colspan work for the textarea field. The output of the above code looks something like this.
Can anyone please help me to make this one work?
PS: I tried emulating the table layout by creating a container - Hbox layout combination. That one works. But I still need to get this one working.
As #qmat suggests, you need to assign a percentage width to your textareafield, in order to give it the full width. The colspan is working as intended, but the textarea uses its standart width.
{
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
width: "100%", // <- gives the textarea the full width
colspan: 2
}
The align:'stretch' config has no effect, it is not an actual config of the table layout.
See the ExtJs 4.2.5 docs and the working Sencha Fiddle.
Hope This will work for you.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
// This is the component A in layout image
xtype: 'textfield',
width:250,
emptyText :'A'
},{
// This is the component B in layout image
xtype: 'textfield',
width:250,
emptyText :'B'
},{
// This is the component C in layout image
xtype: 'textfield',
width:500,
colspan:2,
emptyText :'C'
}],
layout: {
type: 'table',
columns: 2
},
});
}});
You can check the link below and adjust width size as your requirment. Also add css if you want.
https://fiddle.sencha.com/#fiddle/1at3
I have a panel and the layout is hbox,I have two textfileds as items of the panel.
I am not able to view the fieldLabels when i execute .Please find the code
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"HBox Panel",
layout:'hbox',
width:300,
height:200,
renderTo:document.body,
items:[
{
xtype:"textfield",
fieldLabel:"Label1"
},
{
xtype:"textfield",
fieldLabel:"Label2"
}
]
});
});
Note:I am working on Ext 3.2.1
Your layout should be form. From the api documentation:
fieldLabel config is only used when this Component is rendered by a
Container which has been configured to use the FormLayout layout
manager (e.g. Ext.form.FormPanel or specifying layout:'form').
As already said, the fieldLabel option will only apply in a form layout context (usually provided by the form panel).
As a quick fix, you can display your labels in BoxComponent:
Ext.onReady(function() {
var panel = new Ext.FormPanel({
title: "HBox Panel",
layout: 'hbox',
width: 300,
height: 200,
renderTo: document.body,
items: [{
xtype: 'box'
,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
+ 'Label 1:</label>'
,cls: 'x-form-item'
},{
xtype: "textfield"
},{
xtype: 'box'
,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
+ 'Label 2:</label>'
,cls: 'x-form-item'
},{
xtype: "textfield"
}]
});
});
Of course, it would be cleaner to create a CSS class for the custom styles, or even extend a new component from BoxComponent.
You can also generalize this logic in the parent panel's initComponent method, to create box components for the labels from the configured fieldLabel of the field (this way you could also set the for attribute of the label tag because you'll know the generated id of the field components at this time).
change the layout type to form,
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"HBox Panel",
layout:'form',
width:300,
height:200,
renderTo:document.body,
items:[
{
xtype:"textfield",
fieldLabel:"Label1"
},
{
xtype:"textfield",
fieldLabel:"Label2"
}
]
});
});
I did a little test regarding XSS attacks in ExtJS4. My HTML page looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<script type="text/javascript" src="ext-all-dev.js"></script>
<script type="text/javascript" src="testExtXSS.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
and testExtXSS.js looks like this:
Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [
{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '<script>alert(document.cookie)</script>Text field',
value: '<script>alert(document.cookie)</script>Text field'
}
]
});
formPanel.render('myDiv');
});
I expected the script tag in fieldLabel to be executed but it was not. When I looked at the HTML elements using Firebug and Chrome Developer Tools I could see the script element in the HTML tree.
Can anyone explain to me how ExtJS inserts this into the DOM and why it is not executed.
Thanks and best regards,
Ronald
This is because the ext template is injected using innerHTML, which is the fastest approach, but comes with a drawback that scripts don't get executed.
But you can just use update() method for Ext.dom.Element:
...
{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '<script>alert(1)</script>Text field',
value: 'some val',
listeners: {
render: function(cmp) {
cmp.getEl().update(cmp.getEl().dom.innerHTML, true);
}
}
}
...
Screenshot: http://my.jetscreenshot.com/6795/20130813-pdeh-28kb
(Sorry for my english)
i am developing one project with ui as pure extjs. I am facing one problem i want to add my own status message to the tabpanel in extjs only. please help me.
Each Component extending Ext.Panel accepts a config option called bbar which is the bottom Ext.Toolbar. this can function as a statusbar for your TabPanel if you want to. Check the docs on Ext.Panel and Ext.Toolbar for more info.
new Ext.Panel({
title: 'Basic StatusBar',
items:[{
xtype: 'button',
text: 'a button',
}],
bbar: ['->', 'Status bar']
});
If you are looking for more functionality you could also check out the official Statusbar Extension which you can find the official ExtJS Examples on sencha.com
Can you run it from Firebug console an ExtJS included page. It is not a good way for this but, achieves your need.
// this function should be in a namespace as a method
var updateStatusMessage = function(msg){
var msgEl = document.getElementById('tabPanelStatusMessage');
if (msgEl) {
msgEl.innerHTML = msg;
}
// style rules of span should be given with a css class
return Ext.DomHelper.createDom({tag:'span', id:'tabPanelStatusMessage', style: 'position: absolute; right: 5px; top: 5px', html: msg })
}
new Ext.Window({
title: 'test window',
width: 600,
height: 400,
items: {
xtype: 'tabpanel',
activeTab: 0,
id: 'statusTabPanel',
items: [
{
title: 'test',
html: 'this is a demo tab panel item'
}
]
},
listeners: {
afterrender: function(){
Ext.select('#statusTabPanel .x-tab-strip-wrap').appendChild(updateStatusMessage('Lorem Ipsum Dolor Sit Amet'))
}
}
}).show();
// you can call updateStatusMessage function with a message to update the message