I am building a login window with ExtJs, using the following code :
Ext.define('DTL.view.windows.LoginWindow', {
extend : 'Ext.window.Window',
alias : 'widget.login',
id : 'loginWindow',
autoShow : true,
width : 400,
height : 180,
layout : 'border',
border : false,
modal : true,
closable : false,
resizable : false,
draggable : false,
initComponent : function () {
this.items = [{
region : 'north',
height : 52,
bodyCls : 'app_header'
}, {
id : 'login_form',
region : 'center',
xtype : 'form',
bodyStyle : 'padding:10px; background: transparent;border-top: 0px none;',
labelWidth : 75,
defaultType : 'textfield',
items : [{
fieldLabel : 'Username',
name : 'username',
id : 'usr',
allowBlank : false
}, {
fieldLabel : 'Password',
name : 'password',
inputType : 'password',
id : 'pwd',
allowBlank : false
}
]
}
];
this.buttons = [{
id : 'login_button',
text : 'Login',
disabled : true
}
];
this.callParent(arguments);
}
});
Now everything looks fine, except the fact that the password field has no borders.
I tried various code modifications, but nothing helped.
Does anyone have an idea to fix this?
I am using ExtJs 4.0.7
EDIT :
I made another interesting discovery. If I add a third textfield the bug will move to that one.
Apparently it affects always the last textfield.
The problem is caused by how you create the window. See this Sencha forum post:
Textfield Border Problem
i.e. you need to use Ext.create('DTL.view.windows.LoginWindow'); rather than xtype: 'login'
Related
I have on TextArea and in that I have given a vertical scrollbar, My textarea is readonly. But what i noticed here is my scrollbar is not visible in IE11. Top and bottom arrow is coming but scroll bar is not coming.
My Code :
Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
width : 400,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype : 'textareafield',
grow : true,
name : 'message',
fieldLabel: 'Message',
/* disabled : true,*/
readOnly : true,
value : 'abcaaaaaaaaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssswwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
anchor : '100%'
}]
});
When I run this into fiddler in IE11 I'm not able to see scroll. I attach the screenshot.
Any suggestion or help.
That is just IE being IE ... if you provide specific height (like in this case I did with 100) to that textarea IE will show the scrollbar ... it is just by default ugly looking one with two big arrows:
Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
width : 400,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype : 'textareafield',
grow : true,
height : 100,
name : 'message',
fieldLabel: 'Message',
/* disabled : true,*/
readOnly : true,
value : 'abcaaaaaaaaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssswwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
anchor : '100%'
}]
});
See it here
I have following container with several buttons:
{
xtype : 'container',
width : 320,
layout : 'hbox',
cls : 'readable-form no-border',
labelSeparator : '',
ref : '../sendBackForm',
layoutConfig: {
padding:'5',
pack:'center',
align:'middle'
},
style : {
margin : 'auto'
},
items : [ {
xtype : 'button',
itemId : 'yes',
iconCls : 'save-button-icon',
text : 'Yes',
ref : '../../yes'
}, {
xtype : 'spacer',
width : 10
}, {
xtype : 'button',
itemId : 'checker',
iconCls : 'save-button-icon',
text : 'Back to checker',
ref : '../../checker'
}, {
xtype : 'spacer',
width : 10
}, {
xtype : 'button',
itemId : 'prebooker',
iconCls : 'save-button-icon',
text : 'Back to prebooker',
ref : '../../prebooker'
}, {
xtype : 'spacer',
width : 10
}, {
xtype : 'button',
itemId : 'cancel',
text : 'Cancel',
ref : '../../cancel'
}, {
xtype : 'spacer',
width : 90
}, {
xtype : 'button',
itemId : 'ok',
hidden : true,
text : 'Ok',
ref : '../../ok'
} ]
}
the problem is when i hide all buttons and want to show only ok button, it appears near left window corner, how i can place it in the middle of the window?
Have you tried you add this following code on your container ? : autoEl: {tag: 'center'}
you can try placing spacers before and after "OK" button,
...
items: [
...
{xtype: 'tbspacer', flex: 1},
{
xtype : 'button',
itemId : 'btnok',
hidden : true,
text : 'Ok',
ref : '../../ok'
},
{xtype: 'tbspacer', flex: 1}
...
and "OK" and "Cancel" button handlers
....
bindHandlers: function(){
var me = this;
me.getComponent('btnok').on('click', function(){
me.toggleButtons(true);
});
me.getComponent('btncancel').on('click', function(){
me.toggleButtons(false);
});
},
toggleButtons: function(visible){
this.getComp('btnyes').setVisible(visible);
this.getComp('checker').setVisible(visible);
this.getComp('prebooker').setVisible(visible);
this.getComp('btncancel').setVisible(visible);
this.getComp('btnok').setVisible(!visible);
}
...
Or manually add spacers before and after "OK" button
Looks like layoutConfig won't work anymore Set 'pack' and 'align' in layout config itself, fiddle here (Click on 'Yes' button to hide all except 'Ok')
I have an ExtJS window that has 2 separate panels with checkboxgroups. They both show the same values, but user cannot select the same item from both checkboxgroups.
I want to deal with this a little fancier than just checking and alerting a warning in both ckeckboxgroup's listeners when user selects already selected value in another checkboxgroup.
To avoid alerts, I want to either hide or disable the box.
I have tried to add hidden:true or disabled:true but no luck:
Ext.create('widget.window',
{
title : 'Select a value',
draggable : true,
modal : true,
closable : true,
closeAction : 'destroy',
width : 400,
height : 350,
layout:
{
type : 'hbox',
align : 'stretch'
},
items :
[{
xtype : 'panel',
title : 'Success',
autoScroll : true,
flex : 1,
items :
[{
xtype : 'checkboxgroup',
itemId : 'success',
columns : 1,
vertical : true,
items : yes_checkbox,
listeners :
{
change: function(field, newValue, oldValue, eOpts)
{
// newValue.rb
}
}
}]
},
{
xtype : 'panel',
id : 'panel_failure',
title : 'failure',
autoScroll : true,
flex : 1,
items :
[{
xtype : 'checkboxgroup',
itemId : 'failure',
columns : 1,
vertical : true,
items : no_checkbox,
listeners :
{
change: function(field, newValue, oldValue, eOpts)
{
// newValue.rb
}
}
}],
}],
});
I tried to get the panel_failed like Ext.getCmp('panel_failed').items.add(//something here) inside the change listener. But I cannot figure out whether the add() is the right method, and if is, what is the format to write inside the function.
Thanks
You can define itemId of all your checkboxes and then will be easy to select and disable them with setDisabled(true);
Ext js combo is not working in IE7. I need this combo act like textbox with virtual combo (like google search). It is working in IE9 and FF but not in IE7
This is my code:
SearchIncidentForm=new Ext.FormPanel ({
border:false,
renderTo:'searchIncidentDiv',
id: 'searchIncidentForm',
items : [{
xtype:'panel',
id :'panelsearchIncident',
layout:'column',
defaults:{
columnWidth:0.50,
labelAlign : 'top',
layout:'form',
border:false,
bodyStyle:'margin-top:5px; '
},
border:false,
items : [{
defaults:{anchor:'100%'},
items:[{
id : "incidentId",
fieldLabel : 'Incident Id',
labelStyle: 'color: #6C6C6C;width:85px;padding-top:7px;height: 22px;',
xtype : 'combo',
store:incidentStores,
//style: 'width:85px;height: 18px;',
width:100,
allowBlank : false,
labelAlign: 'top',
displayField : 'incidentId',
valueField : 'incidentId',
selectOnFocus : true,
typeAhead : false,
mode : 'remote',
triggerAction : 'all',
editable: true,
msgTarget:'qtip',
listAlign : 'tl-bl?',
//anchor : '80%',
minChars : 1,
hideTrigger:true,
hiddenName: 'incidentId',
listWidth:100,
listHeight:50,
submittValue:true,
listeners : {
specialkey : function(field, e){
var key=e.getKey();
if (key==e.ENTER) {
incidentSearchButtonHandler();
}
},
beforequery : function(){
var val=Ext.getCmp('incidentId').getValue();
if(isNaN(this.getEl().dom.value)){
Ext.Msg.alert("","Please type numeric value");
}
else{
Ext.getCmp('incidentId').getStore().proxy.setUrl('getIncidentId.html?&query='+this.getEl().dom.value);
}
}
}
}]
},{
items:[{
xtype : 'button',
text : 'Search',
style: 'margin-top:19px;margin-left:20px;width:50px;',
width: 35,
height:15,
handler : incidentSearchButtonHandler
}]
}]
}]
});
}
but it's not working in IE. When I press Search button, an alert is shown that please type Id. That means it doesn't take the value that has been typed. Please help.
I've been bitten by this before with IE: you have an extra comma after the last element of your array:
items:[{
submittValue:true,
listeners : {
specialkey : function(field, e){
var key=e.getKey();
if (key==e.ENTER) {
incidentSearchButtonHandler();
}
}, // <------ Extra comma. Delete it.
]}
Is there any way to set the width of an ExtJS (version 4) ComboBox's dropdown menu to be wider than that of the actual input box?
I have a comboxbox that i want to be around 200px but I have paging on the results dropdown and that width is not even big enough to show all the paging bar's controls.
Here's my code to create the combo:
var add_combo = Ext.create('Ext.form.field.ComboBox',
{
id : 'gbl_add_combo',
store : Ext.create('Ext.data.Store',
{
remoteFilter : true,
fields : ['gb_id', 'title'],
proxy :
{
type : 'ajax',
url : 'index.php/store/get_items',
reader :
{
type : 'json',
root : 'records',
totalProperty : 'total',
successProperty : 'success'
},
actionMethods :
{
read : 'POST',
create : 'POST',
update : 'POST',
destroy : 'POST'
}
}
}),
listConfig:
{
loadingText: 'Searching...',
emptyText: 'No results found'
},
queryMode : 'remote',
hideLabel : true,
displayField : 'title',
valueField : 'gb_id',
typeAhead : true,
hideTrigger : true,
emptyText : 'Start typing...',
selectOnFocus : true,
width : 225,
minChars : 3,
cls : 'header_combo',
pageSize : 15
});
There are two parts to this. Firstly, you need to set matchFieldWidth: false in your combobox config. You can then specify width attributes in the listConfig section to style just the dropdown, while specifying the width of the combobox itself in the main config.
This varies from the pervious version, which just let you specify the listWidth property.
I didn't find way to change 'matchFieldWidth' property dynamically. So I found another solution:
{
xtype: 'combobox',
fieldLabel: 'Short Options',
queryMode: 'local',
store: ['Yes', 'No', 'Maybe'],
matchFieldWidth: false,
listConfig: {
listeners: {
beforeshow: function(picker) {
picker.minWidth = picker.up('combobox').getSize().width;
}
}
}
}
Source: http://www.sencha.com/forum/showthread.php?293120-Setting-BoundList-minWidth-to-the-width-of-a-parent-ComboBox-without-matchFieldWidth
In ExtJS 7+ modern, you need to use the beforepickercreate event if you wish to control the width of the combobox's picker.
It's not very intuitive, but it works.
xtype: 'combobox',
...
listeners: {
beforepickercreate: {
fn: function(cmp, newV) {
newV.listeners = {
beforeshow: function(cmp) {
cmp.setMinWidth(400);
cmp.setWidth(400);
}
}
return newV;
}
}
}