How we can fixed the textbox width in extjs,Here i used the width property also but first time its displaying perfect but when we click on outside the textfield automatically width is changed. here is my code please provide any suggestion
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.form.*',
'Ext.window.Window'
]);
Ext.onReady(function() {
//renderTo: Ext.getBody();
var container = Ext.create('Ext.container.Container', {
items: [{
contentPaddingProperty: '10 10 10 10',
renderTo: Ext.get('main'),
border: false,
html: '<img src="image/syneLogo.jpg" height="100" width="950"/>'
}]
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.get('main'),
name: 'myForm',
width: 950,
height: 800,
border: false,
frame: false,
// title:'Login',
bodyBorder: false,
fieldDefaults: {
labelWidth: 60
},
padding: '150 25 25 300',
items: [
{
align: 'center',
xtype: 'fieldset',
cls: 'my-fieldset-legend',
width: 400,
height: 250,
title: 'CAS Login',
collapsible: false,
items: [
{
xtype: 'container',
height: 30
},
{
xtype: 'textfield',
width: '300px',
allowBlank: false,
id: 'txtuser',
fieldLabel: 'User ID',
name: 'enter user id',
emptyText: 'enter user id'
},
{
xtype: 'container',
height: 30
},
{
xtype: 'textfield',
width: '300px',
allowBlank: false,
id: 'txtpass',
fieldLabel: 'Password',
name: 'pass',
emptyText: 'enter password',
inputType: 'password'
},
{
align: 'center',
cls: 'btn-margin',
border: false,
padding: '10 100 10 10',
buttons: [
{
style: 'btn-margin',
formBind: true,
disabled: true,
align: 'middle',
cls: 'btn-margin',
scale: 'medium',
text: 'Submit',
width: 40,
handler: function()
{
var usr = this.up("form").getForm().findField("txtuser").getValue();
alert('Welcome--> ' + usr);
}
},
{
style: 'btn-margin',
formBind: true,
disabled: true,
align: 'middle',
cls: 'btn-margin',
scale: 'medium',
text: 'Reset',
width: 40,
handler: function()
{
form.getForm().reset();
alert('Fields are cleared now');
}
}]
},
{
xtype: 'container',
height: 25
},
{
xtype: 'label',
padding: '150 5 5 100',
text: 'Please enter user id and password'
}
]
}
]
});
});
Use proper combination of layouts, probably you can try using 'fit' layout.
If the issue persist then try using minWidth config property of textfield.
Related
I'm Using Ext Js v6.2, In my application I have accordion has two panel Misc.Charge & Other Charges, In ext js default first accordion panel [Misc Charge] is open always, but I need second accordion panel [Other charges] to set default open, always. Here's my code, I've searched in documentation and other stuff it doesn't help. please solve the problem. thanks in advance.
{
flex: 1,
xtype: 'panel',
frame: true,
border: false,
cls: 'panel-primary',
anchor: '0',
height: 100,
width: '100%',
layout: 'accordion',
autoScroll: true,
layoutConfig: {
titleCollapse: false,
animate: false,
activeOnTop: false
},
items: [
{
flex: 1,
// xtype: 'panel',
form: true,
anchor: '0',
height: 100,
title: 'Mis.Charge',
frame: true,
html: '<div style="width:135px;height:100px;">',
header: {
height: 27,
padding: 0
},
layout: {
type: 'hbox',
align: 'stretch',
columns: 1
},
items: [
{
// / xtype: 'fieldcontainer',
flex: 1,
id: 'upper',
height: 100,
width: 100,
bodypadding: '30',
html: '<div style="width:135px;height:100px;">',
items: [gridStore,
{
// xtype: 'panel',
flex: .5,
height: 90,
width: 207,
bodypadding: '30',
html: '<div style="width:135px;height:100px;">',
items: [stores]
},
{
xtype: 'splitter'
},
{
xtype: 'splitter'
},
{
xtype: 'textfield',
fieldLabel: 'Total Product Value',
name: 'chargeNameInvChargeDtl',
style: 'top: -21%;margin-left: 32.6%;position: relative;',
readOnly: true,
fieldCls:'TotalValue',
labelWidth: 245
},
{
xtype: 'textfield',
fieldLabel: 'Total Other Charges ',
name: 'chargeNameInvChargeDtl',
style: 'top: -21%;margin-left: 32.6%;position: relative;',
fieldCls: 'TotalValue',
readOnly: true,
labelWidth: 245
},
{
xtype: 'textfield',
fieldLabel: 'Total Invoice Values',
name: 'chargeNameInvChargeDtl',
style: 'top: -21%;margin-left: 32.6%;position: relative;',
fieldCls: 'TotalValue',
readOnly: true,
labelWidth: 245
}
]
},
]
},
{
xtype: 'panel',
title: 'Other Charges',
height: 700,
form: true,
anchor: '0',
// cls: 'panel-primary',
html: '<div style="width:135px;height:100px;">',
width: 600,
frame: true,
header: {
height: 27,
padding: 0,
},
layout: 'vbox',
items: [
{
// xtype: 'panel',
// flex: 1,
// height: 180,
// width: 600,
// bodypadding: '30',
items: {
xtype: 'panel',
flex: 1,
height: 180,
width: 620,
bodypadding: '30',
items: [
{
xtype: 'fieldcontainer',
flex: .5,
height: 22,
// width: 410,
bodypadding: '30',
fieldLabel: 'Single Freight,Insurance & Other Charges For All Invoices',
labelWidth: 310,
defaultType: 'checkboxfield',
items: [
{
name: 'SingleFreight',
checked: true,
// inputValue: '5',
id: 'checkbox3'
}
]
},
otherStore],
html: "<hr style='position: relative; top: 14px; width:97.5%; margin-left:0.5%'></hr>",
}
},
{
// xtype: 'panel',
// flex: 1,
// height: 180,
// width: 610,
// bodypadding: '30',
items: {
xtype: 'fieldcontainer',
flex: 1,
height: 120,
width: 620,
bodypadding: '30',
items: [otherStore1]
}
}
]
},
You can expand the appropriate panel in the boxready listener function for the accordion. For example, to expand the second item:
listeners: {
boxready: function () {
this.items.getAt(1).expand();
}
}
See example fiddle here.
Here is my code, i need the button is down of the filefield, but the butto doesnt appear in nowhere, whats the problem?
Ext.define('Academico.view.etpPersonalizada.Edit', {
extend: 'Sharedev.form.Panel',
alias: 'widget.academico-etpPersonalizadaEdit',
store: 'Academico.store.EtpPersonalizadas',
model: 'Academico.model.EtpPersonalizada',
cls: 'sharedev-overflow--visible',
layout: {
type: 'vbox',
align: 'center',
},
initComponent: function () {
this.items = [
{
xtype: 'panel',
cls: 'sharedev-card',
bodyPadding: 15,
items: [
{
xtype: 'container',
name: 'Período desta Etapa',
layout: {
type: 'hbox',
},
items: [
{
xtype: 'datefield',
name: 'pssEtpDtInicio',
fieldLabel: 'Início',
readOnly: true,
disabled: true
},
{
xtype: 'datefield',
name: 'pssEtpDtFim',
fieldLabel: 'Fim',
readOnly: true,
disabled: true
}
]
},
{
xtype: 'panel',
cls: 'sharedev-card',
layout: {
type: 'auto',
},
width: 600,
name: 'Período desta Etapa',
items: [
{
xtype: 'displayfield',
value: 'Observação do Coordenador',
cls: 'sharedev-card-title sharedev-bold',
},
{
xtype: 'displayfield',
margin: '15 0 15 15',
style: 'opacity:0.5',
name: 'etpPrtObsCoord',
cls: 'sharedev-card-subtitle sharedev-bold',
},
]
},
{
xtype: 'panel',
name: 'panel2',
items: [
{
xtype: 'textareafield',
name: 'etpPrtObsAcad',
padding: '0 8 0 0',
width: 600,
fieldLabel: 'Observação'
},
{
xtype: 'filefield',
name: 'arqArquivo',
fieldLabel: 'Arquivo',
emptyText: 'Selecione um arquivo',
maxLength: 100,
minLength: 10,
buttonConfig: {
width: 103,
text: 'Procurar...',
iconCls: 'icon-search'
}
},
{
Try to put here, nothing is show.
xype: 'button',
name: 'btnArquivo',
action: 'upload',
text: 'Enviar',
cls: 'sharedev-button sharedev-button--plain sharedev-blue',
width: 80,
height: 60,
}
]
}
],
Same thing here.
bbar: {
xype: 'button',
action: 'upload',
text: 'Enviar',
cls: 'sharedev-button sharedev-button--plain sharedev-blue',
width: 80,
}
}
]
this.callParent(arguments);
}
});
The problem is the buttons doesn't appear, no matter where i put them. I'm using extJS 4.2.
You have a typo,
xype: 'button'
It should be
xtype: 'button'
has anyone else ran into a problem with ext js checkboxes not showing up? We have tried everything, even download the architect software and it still won't display... Any ideas?
I have a feeling it's like a css/include file we're missing, but I've looked all over the Internet and I still can't find a solution.
{
xtype: 'checkboxfield',
anchor: '100%',
fieldLabel: 'Label2',
boxLabel: 'Box Label2'
}
Here's the panel:
var manForm = Ext.create('Ext.form.Panel', {
width: 800,
style: 'position: relative; left: 20px;',
renderTo: Ext.getBody(),
id: 'man_form',
title: 'Mobile Information',
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
items: [
{
xtype: 'container',
padding: '10px',
defaults: { height: 28 },
items: [{
xtype: 'hiddenfield',
name: 'id',
id: 'id',
},
{
xtype:'hiddenfield',
name: 'item_id',
id: 'item_id'
},
{ xtype: 'container',
layout: 'hbox',
defaults: { height: 28 },
margin: ' 0 10 0 0',
items: [{
xtype:'textfield',
fieldLabel: 'Number',
name: 'ItemNumber',
id: 'ItemNumber',
labelWidth: 45,
width: 345,
},
{
xtype:'textfield',
fieldLabel: 'Name',
name: 'ItemName',
id: 'ItemName',
labelWidth: 70,
width: 425,
}]
},
{
xtype: 'textfield',
fieldLabel: 'Category List',
labelWidth: 140,
width: 700,
name: 'CategoryList',
id: 'CategoryList'
},
{
xtype: 'textfield',
fieldLabel: 'Short Desc For Cat List',
name: 'ShortDescriptionForCategoryList',
id: 'ShortDescriptionForCategoryList',
labelWidth: 140,
width: 600
},
{ xtype: 'container',
layout: 'hbox',
margin: ' 0 10 0 0',
items: [{
xtype: 'textfield',
name: 'BasePrice',
fieldLabel: 'Base Price',
id: 'BasePrice',
labelWidth: 140,
width: 270,
height: 28
},
{
xtype: 'textfield',
name: 'RetailPrice',
fieldLabel: 'Retail Price',
id: 'RetailPrice',
labelWidth: 140,
width: 270,
height: 28
},{
xtype: 'checkboxfield',
anchor: '100%',
fieldLabel: 'Label2',
boxLabel: 'Box Label2'
}
]
},
{
xtype: 'textfield',
name: 'ItemImages',
fieldLabel: 'Item Images',
id: 'ItemImages',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemPrimaryImageUrl',
fieldLabel: 'Primary Image URL',
id: 'ItemPrimaryImageUrl',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemPrimaryImageAltText',
fieldLabel: 'Primary Image Alt Text',
id: 'ItemPrimaryImageAltText',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemThumbnailUrl',
fieldLabel: 'Thumbnail URL',
id: 'ItemThumbnailUrl',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemThumbnailAltText',
fieldLabel: 'Thumbnail Alt Text',
id: 'ItemThumbnailAltText',
labelWidth: 140,
width: 700
},
{
xtype: 'button',
text: 'Update',
name: 'new_button',
id: 'new_button',
style: 'margin-left:720px; margin-bottom:5px',
handler: function(event, toolEl, panel){
Ext.Msg.show({
title:'Update Data',
msg: 'Are you sure you want to update these settings?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn){
if (btn === 'yes'){
var obj = manForm.getForm().getValues();
for (var prop in obj) {
store.getAt(0).set(prop,obj[prop]);
//alert(prop + " : " + obj[prop]);
}
store.update();
store.load();
}
}
});
}
},
]
}],
});
I didnt really test your code like kevhender did. But the fact that it works for him but not you, makes me think that you dont have the image file that extjs uses for a checkbox. Usually it is placed in images/form/checkbox.gif.
please check your images folder once. Also dev tools (either Firebug or chrome dev tools) console should throw an error if thats the case - saying "file could not be found at path blahblah" or something.
var loginForm = new Ext.form.FormPanel({
frame: true,
border: true,
height: 155,
width: 350,
layout: {
type: 'hbox',
},
items: [{
xtype: 'image',
src : 'images/system-users.png',
width: 100,
},{
xtype: 'container',
defaults: {
labelWidth: 80,
},
layout: {
type: 'vbox',
//align: 'stretch',
padding:'0 0 20 0'
},
items: [{
xtype: 'textfield',
width: 250,
id: 'username',
fieldLabel: 'Username'
},{
xtype: 'textfield',
width: 250,
id: 'password',
fieldLabel: 'Password ',
inputType: 'password',
submitValue: false
},{
xtype: 'hidden',
id: 'challenge',
value: "<?php echo $challenge; ?>",
submitValue: false
},btnLogin],
}
]//contain items
});
Question
this is an live demo http://jsfiddle.net/anthor/WM9DD/88/
1)how to align center the login button?
2)the image and all textbox align center and middle of the window box.
Try this:
var loginForm = new Ext.form.FormPanel({
frame: true,
border: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'image',
src: 'images/system-users.png',
width: 100,
}, {
xtype: 'container',
defaults: {
labelWidth: 80,
},
layout: {
type: 'vbox',
align: 'stretch',
padding: '0 0 20 0'
},
flex: 1,
items: [{
xtype: 'textfield',
id: 'username',
fieldLabel: 'Username'
}, {
xtype: 'textfield',
id: 'password',
fieldLabel: 'Password ',
inputType: 'password',
submitValue: false
}, {
xtype: 'hidden',
id: 'challenge',
value: "<?php echo $challenge; ?>",
submitValue: false
}, {
xtype: 'container',
layout: {
type: 'hbox',
pack: 'end'
},
items: [btnLogin]
}],
}] //contain items
});
In the hbox layout you can add the align: 'stretch' option and the flex: 1 option to the items to stretch them. I also put the button in another container to stick it to the right.
I have the following extJs window which has two tabs in it. One of the tab has got a column chart and the other one has a grid. Everything is working fine but what i want to accomplish here is that if i maximize the window the tabs size+ the charts size in the tabs should too. How can i accomplish it. I also have two calendar fields in the window above the tabs..
var win = Ext.create('Ext.Window', {
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
items: [
{
xtype: 'datefield',
name: 'time',
fieldLabel: 'From',
anchor: '90%'
},
{
xtype: 'datefield',
name: 'time',
fieldLabel: 'To',
anchor: '90%'
},
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
},
{
xtype: 'tabpanel',
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [
{
title: 'Normal Tab',
items: [
{
id: 'chartCmp',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: store1,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
grid: true,
fields: ['name']
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}
]
}
]
},
{
title: 'Table View',
xtype: 'grid',
width: 200,
height: 200,
collapsible: false,
store: store1,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [
{
text: 'Devices',
flex: 50,
dataIndex: 'name'
},
{
text: 'Pass',
flex: 50,
dataIndex: 'data1'
}
]
}
]
}
]
});
On resize event of window, change width of tabs size and the charts size however you want. Write a function which will execute on window resize event, In function you can access your fields like below :
var tab = Ext.getCmp('tabId');
var chart = Ext.getCmp('chartId');
change lengths of tab and chart according to your requirement.
Check out window resize event here.