When a number field (or date field) is added to a form panel, the width of the number field is not adjusted to match the panel width. Here is a simple example showing that the text field is adjusted to fit the available space, but the number field is not. See this jsFiddle.
It looks like a bug in the Extjs picker layout. Does anyone have a work-around?
<head>
<link rel="stylesheet" href="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release/resources/css/ext-all.css">
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.namespace('E2cc.settings');
E2cc.settings.getString = function(s) { return s; }
</script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
width: 200,
items: [{
xtype: 'textfield',
fieldLabel: 'Text',
border: 3,
style: {
borderColor: 'black',
borderStyle: 'solid',
}
}, {
xtype: 'numberfield',
fieldLabel: 'Number',
border: 3,
style: {
borderColor: 'red',
borderStyle: 'solid'
},
name: 'date'
}],
renderTo: Ext.getBody()
});
});
</script>
</body>
I couldn't explain why it is rendered differently than a normal textefield, but a good pratice in extjs is to specify the width of your elements and not let extjs layout compute it for you. Add anchor: '100%' to your numberfield and it should be ok.
I think that if you want to defined some same values to all the fields you must define it in the dedatults property.
see your example modified
Ext.create('Ext.form.Panel', {
width: 200,
defaults : {
width: 200,
labelWidth : 70
},
items: [{
xtype: 'textfield',
fieldLabel: 'Text',
border: 3,
style: {
borderColor: 'black',
borderStyle: 'solid',
}
}, {
xtype: 'numberfield',
fieldLabel: 'Number',
border: 3,
style: {
borderColor: 'red',
borderStyle: 'solid'
},
name: 'date'
}],
renderTo: Ext.getBody()
});
Related
It is not showing any errors nor rendering any UI. I want to add number field dynamically.
var numberField= Ext.create('Ext.form.Panel', {
cls: 'questionRows',
hidden: show,
itemId: item.HealthNeedsDetailsGuid,
id: item.HealthNeedsDetailsGuid,
items: [{
xtype: 'field',
html: item_index + ') ' + item.HealthNeedsQuestion
}, {
xtype: 'numberfield',
anchor: '100%',
name: 'bottles',
clearIcon: false,
width: 400,
value: 99,
maxValue: 99,
minValue: 0
}]
});
In sencha touch, Ext.form.Panel is a scrollable item, so it will not be shown untill you specify a height or make scrollable property as null.
To show the number field on the entire screen, you can give fullscreen:true property in Ext.form.Panel. Like this:
Ext.application({
launch : function() {
var numberField= Ext.create('Ext.form.Panel', {
cls: 'questionRows',
fullscreen:true,
items: [{
xtype: 'field',
html: 'Field Html here'
}, {
xtype: 'numberfield',
anchor: '100%',
name: 'bottles',
clearIcon: false,
width: 400,
value: 99,
maxValue: 99,
minValue: 0
}]
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css">
<script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all-debug.js"></script>
OR
To add it to an existing component call add() from existing component and give numberField as its parameter mainPanel.add(numberField);.
In numberField either give height property or scrollable:null property to the Ext.form.Panel. Like this:
Ext.application({
launch : function() {
var numberField= Ext.create('Ext.form.Panel', {
cls: 'questionRows',
height:344,
items: [{
xtype: 'field',
html: 'Field Html here'
}, {
xtype: 'numberfield',
anchor: '100%',
name: 'bottles',
clearIcon: false,
width: 400,
value: 99,
maxValue: 99,
minValue: 0
}]
});
//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true,
items: {
html: 'Main Panel'
}
});
//now we add the numberField inside the main panel
mainPanel.add(numberField);
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css">
<script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all-debug.js">
</script>
I am working on ExtJs collapsible panel in table layout.
Whenever I open the page the panel comes up perfectly fine (width wise).
Please check the below images
But when I collapse the panel, the width changes!
See the below image:
A sample code to replicate this issue:
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
scrollable: true,
autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});
I have also created a fiddle with the same code.
JSFiddle Demo
Please help me in resolving this issue.
I want the width of the panel to remain fixed whether it is collapsed or not.
But I WANT to set width in the terms of percentage and not fixed absolute number.
To set the column width to '100%' use tableAttrs
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
}
Also 'scrollable' and 'autoScroll' need not to be set to true since the column width will be '100%'
I am using a Fieldset of extjs which have text, buttons and dropdown using extjs.
my code for fieldset is as follow
ds=Ext.create('Ext.form.FieldSet', {
title: 'System Input',
width:500,
style: {
marginLeft: '5px',
marginTop:'10px'
},
labelWidth: 75,
items :[{xtype: 'displayfield', value: 'Modify the inputs below to run another simulation'},roofarea,clss,roofslider,pvtech,rate,pvsyssize,systypebuild,elecrate,tiltang,scclsbtn,scclsbtncls]
});
now i have text field(i.e. roofarea) and button(i.e.clss) in this fieldset, i want button just after text field just beside, my code for this is as follow but button come just below text field:
roofarea = Ext.create('Ext.form.field.Text', {
width: 300,
autoScroll :true,
labelWidth: 160,
style: {
marginLeft:'10px',
marginTop: '10px',
marginBottom:'10px'
},
fieldLabel: 'Total Roof Area(Sq. Meter):',
readOnly: true,
value:faread
});
var clss =Ext.create('Ext.Button', {
text: 'Close',
width:15,
handler: function() {
smWindow.hide();
}
});
but other items should be down of text field and button.
Please help me for this?
It is just a matter of layout. I added both text field and button in a hbox layout and this fieldset (closeFieldSet), I added to your ds.
Below is the code snippet :
roofarea = Ext.create('Ext.form.field.Text', {
width: 300,
autoScroll: true,
labelWidth: 160,
style: {
marginLeft: '10px',
marginTop: '10px',
marginBottom:'10px'
},
fieldLabel: 'Total Roof Area(Sq. Meter):',
readOnly: true,
value: 20
});
var clss = Ext.create('Ext.Button', {
text: 'X',
width: 50,
style: {
marginTop: '10px'
},
handler: function() {
smWindow.hide();
}
});
var closeFieldSet = Ext.create('Ext.form.FieldSet', {
title: 'System ',
layout: 'hbox',
width: 500,
labelWidth: 75,
items: [roofarea,clss]
});
var ds = Ext.create('Ext.form.FieldSet', {
title: 'System Input',
width:500,
style: {
marginLeft: '5px',
marginTop:'10px'
},
labelWidth: 75,
// items: [{xtype: 'displayfield', value: 'Modify the inputs below to run another simulation'},roofarea,clss,roofslider,pvtech,rate,pvsyssize,systypebuild,elecrate,tiltang,scclsbtn,scclsbtncls]
items: [
closeFieldSet,
{
xtype: 'displayfield',
value: 'Modify the inputs below to run another simulation'
}
]
});
Have a look at this links.. Hope this helps you
http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.ComboBox
http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.CompositeField
sample code here
this.form= new Ext.FormPanel({
title:'New Developer',
renderTo: 'frame',
defaults:{xtype:'textfield'},
bodyStyle:'padding: 10px',
items:[
name,
{
fieldLabel:'Email',
name:'txt-email',
value:'default#quizzpot.com',
id:"id-email"
},{
xtype: 'checkbox',
fieldLabel: 'Active',
name: 'chk-active',
id: 'id-active'
},
{
xtype:'hidden',
name:'h-type',
value:'developer'
}
],
buttons:[{text:'Save'},{text:'Cancel'}] //<-- button of the form
});
I am trying to find out the events listeners in ExtJs on Charts tooltips.
I have column chart and by default, it has tooltip with the respective values.
I have to display those tooltip values in alert box when i'll click on bars or columns of the chart.
Thanks!!
here is the javascript code for Area chart:
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.onReady(function () {
var chart = Ext.create('Ext.chart.Chart', {
id: 'chartCmp',
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store1,
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
title: 'Number of Hits',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
style: {
opacity: 0.93
}
}]
});
var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
shadow: false,
maximizable: true,
title: 'Area Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}, {
enableToggle: true,
pressed: true,
text: 'Animate',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
}
}],
items: chart
});
});
and this is the html code:
<html>
<head>
<title>Area Chart Example</title>
<link rel="stylesheet" type="text/css" href="../../css/ext-all.css">
<script type="text/javascript" src="../../js/ext-debug.js"></script>
<script type="text/javascript" src="../../js/ext-all.js"></script>
<script type="text/javascript" src="../../js/example-data.js"></script>
<script type="text/javascript" src="areachart.js"></script>
</head>
<body>
</body>
</html>
When u'll run this code, u'll have area chart and tooltip having values by default but my requirement is when i'll click on the chart then the value should be displayed in alert box which is displaying in tooltip currently....
I am placing Ext JS Grid Panel in a iFrame. Do anybody know how can I place it in the center of the iFrame.
Currently It look like this -
I want it to be like this -
The contents of your IFrame can use a border layout as above or no layout, like this:
var viewPort = new Ext.Viewport({
renderTo:'body',
width: 400,
height: 400,
items:[new Ext.Panel({
title: 'hi',
width: 200,
height: 200,
style: 'margin:0 auto;margin-top:100px;'
})]
});
In the examples site there is an example that does this you may want to look at.
layout:'ux.center',
items: {
title: 'Centered Panel',
widthRatio: 0.75,
html: 'Some content'
}
Another way, not as elegant, is a cludge of VBox and HBox layouts but is pure ExtJS and doesn't rely on UX:
Ext.create('Ext.container.Viewport',{
style: 'background-color: white;',
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items: [{
flex: 1,
border: false
},{
height: 200,
border: false,
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [{
flex: 1,
border: false
},{
html:'Centered Panel',
width: 400
},{
flex: 1,
border: false
}]
},{
flex: 1,
border: false
}]
//items: [login_panel],
});
simply use:
this.center()
where as "this" is the object you want to put in the center (let's say grid).
Something like
grid:
region: center;
panel:
layout: border;
css: "padding: 40px"