I can't find a way to on/off check box in runtime in my fieldset definition:
{
xtype: 'fieldset',
title: 'Do you want to add text file?',
itemId: 'chorFileCheck',
checkboxToggle: true,
items: [
{
xtype: 'filefield',
name: 'document',
fieldLabel: 'File',
labelWidth: 50,
allowBlank: false,
anchor: '100%',
regex: Portal.Const.DOC_ACCEPTED,
buttonText: 'Choose ...'
}
],
listeners: {
I can handle this check box by hand but can't find a way to do it in my code (make it in runtime). Prompt me please how to do it.
You need to use collapse() and expand() methods of fieldset to uncheck & check the checkbox respectively.
For Unchecking the checkbox:
Ext.ComponentQuery.query("#chorFileCheck")[0].collapse();
For Checking the checkbox:
Ext.ComponentQuery.query("#chorFileCheck")[0].expand();
Related
I have a users grid, on double click of users grid I am showing update user form in a window modal popup.
on dblClick of users grid I am adding user-detail-window
to mainView.
user-detail-window contains a user-detail form, which contains checkbox field called active
If user_abc is not active, then for the first time after opening update form for user_abc, its showing unchecked active field (this
is correct behavior, user_abc is already deactived)
If you open any other user record (which is active) and then again open user_abc (this is already deactivated), its shows active filed checked (instead of showing unchecked)
i) I have a checkbox field in user update form i.e. my UserDetail view
Ext.define('TestCMS.view.UserDetail', {
extend: 'Ext.form.Panel',
alias: 'widget.user-detail',
itemId: 'user-detail',
items: [
{
xtype: 'combobox',
name: 'locale',
fieldLabel: 'Taal',
store: 'i18n.Language',
displayField: 'iso639',
valueField: 'iso639',
autoLoad: true,
forceSelection: true,
editable: false,
triggerAction: 'all',
bind: '{currentText.locale}',
},
{
xtype: 'checkboxfield', //all fields in this form
name: 'active', //are showing proper data,
fieldLabel: 'Actief', //except this checkbox
bind: '{currentText.active}'
},
{
xtype: 'ckeditor',
fieldLabel: 'description',
itemId: 'ckeditor-body',
name: 'text',
bind: '{currentText.text}',
msgTarget: 'under',
CKConfig: {
extraPlugins: wordcount,notification',
}
}
});
ii) Following is MainView
Ext.define('TestCMS.view.UserMain', {
extend: 'Ext.container.Container',
alias: 'widget.user-main',
itemId: 'user-main',
layout: 'border',
defaults: {
split: true,
border: 0
},
viewModel: {
type: 'user-vm',
},
items: [
{
xtype: 'user-grid',
reference: 'user-grid',
region: 'west',
width: 350,
title: 'users',
multiSelect: false
}
});
iii) Following is detailWindowView
Ext.define('TestCMS.view.UserDetailWindow', {
extend: 'Ext.window.Window',
alias: 'widget.UserDetailWindow',
itemId: 'user-detail-window',
controller: 'user-detail',
requires: [
'TestCMS.controller.UserDetail',
],
layout: 'fit',
minHeight: 632,
minWidth: 1088,
closable: true,
modal: true,
closeAction: 'destroy',
maximizable: true,
bind: {
hidden: '{userDetailPanelDisabled}',
},
items: [
{
xtype: 'user-detail',
}
],
renderTo: Ext.getBody(), //This line causes the bug
});
I have added this line (i.e. renderTo: Ext.getBody()) to show Popup window on entire screen.
Without this line popup window is showing within a container only.
After adding only this line in above code, checkbox functionality related error occurred, otherwise it was working fine.
iv) Following is user gridview dblClick handler
onItemDblClick: function (view, record, item, index, e, eOpts) {
var userDetailWindow = Ext.widget('UserDetailWindow');
var mainView = view.up('#user-main');
viewModel = mainView.getViewModel();
mainView.add(userDetailWindow);
userDetailWindow.down('#user-detail').loadRecord(record);
contentWindow.show();
contentWindow.setTitle('user: ' + viewModel.data.userName);
},
Found solution after trying many different things
1) Removed Items[] from detailWindowView
items: [
{
xtype: 'user-detail',
}
],
2) Added user-detail runtime to user-detail-window
within onItemDblClick
mainView.add(userDetailWindow);
//added this line and problem solved
contentWindow.add(Ext.widget('user-detail'));
contentWindow.show();
contentWindow.setTitle('user: ' + viewModel.data.userName);
I am reading the extjs offical tutorial to create a login form, so I create following login form window:
Ext.define('MyApp.view.login.Login', {
extend: 'Ext.window.Window',
xtype: 'login',
requires: [
'Ext.form.Panel',
'Ext.form.field.Display',
'Ext.form.field.Text'
],
bodyPadding: 10,
title: 'Login Window',
closable: false,
autoShow: true,
items: {
xtype: 'form',
reference: 'form',
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false
}, {
xtype: 'displayfield',
hideEmptyLabel: false,
value: 'Enter any non-blank password'
}],
buttons: [{
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginClick'
}
}]
}
});
here is the screenshot:
Please notice the "Login" button, it was wrapped by a gray background, but it was padding 10px white space with window.
How can bodyPadding do not padding the bottom button withou white space with the parent window? Just Like following picture:
I am using extjs6
Move the bodyPadding from the window down to the form. The body doesn't include docked items.
Fiddle.
I am trying to add an item into a fielset dynamically. I have checked the items of the fieldset in the console , the item is being added to the fieldset but it is not being displayed, I am invoking the doLayout() method for the fieldset and also for the formpanel which has this fieldset, but the size/height of the fieldset does not change. Can someone help me with this issue?
if(csType.value=="OS"){
Ext.apply(newOs,that.osCombo);
newOs.id = 'testOs2';
Ext.getCmp('cSFieldSet').add(newOs);
Ext.getCmp('cSFieldSet').setHeight(600);
Ext.getCmp('cSFieldSet').doLayout(true,true);
Ext.getCmp('cSFieldSet').ownerCt.doLayout(true,true);
that.csFormPanel.doLayout(true,true);
}
I also tried using autoHeight: true, but still the item is not being displayed
Here's some test code I just wrote to simulate what you are trying to achieve:
var simple = new Ext.FormPanel({
labelWidth: 75,
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
// Fieldset in Column 1
xtype:'fieldset',
itemId: 'fieldSetTest',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: false,
autoHeight:false,
defaultType: 'textfield',
items :[{
fieldLabel: 'Field 1'
}, {
fieldLabel: 'Field 2'
}, {
fieldLabel: 'Field 3'
}
]
}
],
buttons: [{
text: 'Add New Field',
handler: function() {
var newItem = new Ext.form.TextField({fieldLabel: 'New Fields'});
simple.getComponent('fieldSetTest').add(newItem);
simple.doLayout();
},
scope:this
}]
});
simple.render(document.body);
});
This works fine, so on clicking the add button the new item appears in the fieldset and the height of the fieldset automatically increases. Without seeing your whole formpanel code I can't comment much further.
I have a toolbar with buttons that are hidden by default, and then shown based on the user's privileges. They appear and function after I call .show(), but do not appear in the overflow menu when the window is resized. The items that are initially shown appear in the overflow menu correctly.
Any advice on how I can fix this problem?
Thanks
Edit: Here's the simplest example I could come up with that works with fiddle for the problem. https://fiddle.sencha.com/#fiddle/877
Ext.onReady(function(){
var toolbar1 = Ext.create('Ext.toolbar.Toolbar', {
region: 'north',
layout: {
overflowHandler: 'Menu'
},
items: [{
xtype: 'textfield',
emptyText: 'FIX ME'
},{
xtype: 'button',
text: 'Test Lists',
id: 'testListsButton',
hidden: true
},{
xtype: 'button',
text: 'All Lists',
id: 'allListsButton',
},{
xtype: 'button',
text: 'Other Lists',
id: 'otherListsButton',
hidden: true
},{
xtype: 'button',
text: 'Email Lists',
id: 'emailListsButton',
hidden: true
}]
});
Ext.getCmp('emailListsButton').show();
Ext.getCmp('otherListsButton').show();
Ext.getCmp('testListsButton').show();
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border',
autoRender: true,
items: [
toolbar1
]
});
})
I found a work-around.
I set the items to be visible initially, hide them before they're rendered, and then show them again when checking the user's privileges. This properly displays the items in the overflow menu.
It looks like this is a bug, all be it a minor one.
I have following code-
{ fieldLabel: 'Date', name: 'Date', xtype: 'datefield' }
{ fieldLabel: 'Name', name: 'PerName', xtype: 'textfield' },
{
xtype: 'panel',
layout: 'form',
border: false,
labelWidth: 200,
items: [
this.fields.check1 = { xtype: 'checkbox', name: 'Check1', fieldLabel: 'Checkbox 1', width: 320 },
this.fields.check2 = { xtype: 'checkbox', name: 'Check2', fieldLabel: 'Checkbox 2', width: 320 }
]
}
Here, I am taking the checkboxes inside a panel as I need to increase the label width.
The label is showing but checkbox is not displaying .
What I am doing wrong
How about you add your checkboxes inside a FormPanel something like this:
var myPanel = new Ext.form.Panel({
alias: 'widget.myformPanel',
renderTo: Ext.getBody(),
defaults: {
labelWidth: 100,
},
items: [{
xtype: 'checkbox',
name: 'Check1',
fieldLabel: 'Checkbox 1'
}, {
xtype: 'checkbox',
name: 'Check2',
fieldLabel: 'Checkbox 2'
}]
});
In that way, you can set the labelWidth of the formPanel items.
Try to play it with jsfiddle.
Build your application with
sencha app build
It seems that you need to build only for deployment, however, development version uses production css. Therefore, anytime you add a new class you need to build the app to re-create css to include the new class styling.