I have a fieldset with the option checkboxToggle:true. When the user checks/unchecks the checkbox, I don't want the fieldset to expand/collapse.
How can I accomplish this?
Thanks in Advance
You can implement the beforecollapse event on the fieldset like in the code below. But this way you won't be able to collapse the fieldset.
Setting collapsible: false doesn't seem to work.
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
],
listeners: {
beforecollapse : function(p) {
return false;
}
}
or override Fieldset
Ext.override( Ext.form.FieldSet, {
onCheckChange: function(cmp, checked) {
if(this.collapsible) this.setExpanded(checked);
}
});
Related
I have a fieldset defined on my page. Now I want to enable or disable this field set on button click event. But it is not working properly. Below is the code I have written:
To Disable:
this.mySettings.query('[name="fieldsetName"]').forEach(function (field) {
field.disable();
});
To Enable:
this.mySettings.query('[name="fieldsetName"]').forEach(function (field) {
field.enable();
});
Issue-1 : When I disable fieldset, it seems to be disabled visually. But still I can access controls inside it.
Issue-2 : Once it is disabled, I cannot re-enable it.
I need a working sample with these two issues resolved.
Currently I am using version 4.2 of ExtJs
You should call the setDisabled function on the fieldset. It will disable all containing components.
fieldset.setDisabled(true);
// the fieldset and all inner components are disabled
fieldset.setDisabled(false);
// the fieldset and all inner components are enabled
See the Sencha ExtJs 4.2.0 documentation and
the following minimal working example can be found on Sencha Fiddle.
Ext.create('Ext.panel.Panel',{
items: [{
xtype: 'fieldset',
itemId: 'fieldsetId',
items: [{
xtype: 'checkbox',
fieldLabel: 'Check 1'
},{
xtype: 'checkbox',
fieldLabel: 'Check 2'
},{
fieldLabel: 'Combo 1',
xtype: 'combobox',
store: ['value1','value2','value3']
}]
}, {
xtype: 'button',
text: 'Disable fieldset',
handler: function (button) {
var fieldset = Ext.ComponentQuery.query('panel > #fieldsetId')[0];
var toggle = !fieldset.isDisabled();
var text = (toggle ? 'Enable' : 'Disable') + ' fieldset';
fieldset.setDisabled(toggle);
button.setText(text);
}
}],
renderTo: Ext.getBody()
});
Paste this into a Sencha fiddle and hit Run:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
Ext.create('Ext.window.Window', {
height: '100%',
width: '100%',
autoShow:true,
bodyPadding: 25,
title:'win',
items: [{
xtype: 'fieldset',
items: [{
xtype: 'checkbox',
fieldLabel: 'field1'
},{
xtype: 'checkbox',
fieldLabel: 'field2'
},{
fieldLabel: 'field3',
xtype: 'combo',
store: ['asdf','zzasdf','dfdf']
}]
}, {
xtype: 'button',
text: 'Enable/Disable entire fieldset',
handler: function(btn){
var fset = btn.up('window').down('fieldset');
fset.setDisabled(!fset.disabled);
}
}, {
margin: '0 0 0 10',
xtype: 'button',
text: 'Enable/Disable each field in fieldset individually',
handler: function(btn){
var fset = btn.up('window').down('fieldset');
fset.items.each(function(i){
i.setDisabled(!i.disabled);
});
}
}]
});
}
});
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.
I am trying to bind a grid data to a form in extjs. when i click on a grid row, the details should be populated in form. Can i do that in a simple way without using MVC. I have wrote the below code. help me further. Thank you
// JavaScript Document
Ext.require('Ext.data.Store');
Ext.require('Ext.grid.Panel');
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'id','name', 'email', 'phone' ]
});
Ext.onReady(function() {
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ id: '1', name: 'srb', email: 'srb#gmail.com', phone: '555-111-1224' },
{ id: '2', name: 'srv', email: 'srv#gmail.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
title: 'All Users',
columns: [
{
text: 'Id',
dataIndex: 'id' ,
flex: 1
},
{
text: 'Name',
dataIndex: 'name',
flex: 2
},
{
text: 'Email Address',
flex: 3,
dataIndex: 'email',
},
{
text: 'Phone Number',
flex: 2,
dataIndex: 'phone'
}
],
listeners : {
itemclick: function(dv, record, item, index, e) {
var nm= record.get('name');
}
},
});
Ext.create('Ext.form.FieldSet',{
renderTo: Ext.getBody(),
margin: '0 0 0 10',
title:'User details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id'
},{
fieldLabel: 'Name',
name: 'name'
},{
fieldLabel: 'Email Id',
name: 'email'
},{
fieldLabel: 'Phone Number',
name: 'phone'
}]
});
});
Use Ext.form.Panel instead of Ext.form.FieldSet. Field set is more of a decorating container. The form panel provides support for loading / saving data from the form, etc.
Then you need a way to access your form panel in your click event. The absolute simplest is to set an id on the form, and use Ext.getCmp to get a ref to the form. Since you've already got the record there, you can just use the loadRecord method of the form panel.
And you'll be done! Be happy to have named your model & form fields the same ;)
The final call in the event listener will look like this:
Ext.getCmp('myForm').loadRecord(record);
what version of extjs are you using?
you don't seem to have a form defined or instantiated.
in your grid's itemclick event handler, you need to get a reference to the form, and call form.loadRecord with the passed in record (2nd argument):
itemclick: function(dv, record, item, index, e) {
var form = getAReferenceToTheFormObject();
form.loadRecord(record);
}
example:
http://jsfiddle.net/4TSDu/74/
I have an extjs2 formpanel:
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
id: 'formPanel',
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 550,
items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],
buttons: [{
text: 'Save',
handler: function(){
var form = Ext.getCmp('formPanel').getForm();
if(form.isValid())
form.submit({
waitMsg:'Loading...',
url: 'RepeatSession.jsp',
success: function(form,action) {
//we have to close the window here!!
},
failure: function(form,action){
Ext.MessageBox.alert('Erro',action.result.data.msg);
}
});
}
},{
text: 'Cancel'
}]
});
and a window:
win = new Ext.Window(
{
layout: 'fit',
width: 500,
height: 300,
modal: true,
closeAction: 'hide',
items: fsf
});
win.show();
As you can see, the form panel is inside the window as an item. I have to close the window after a successful form submission but I have no idea how to access the window object inside my success handler.
How can i hide the window after successful form submission?
Just save a reference to the window or one of its children before creating the form. For example you can use the button paremeter that the handler function gets passed:
handler: function(button, e){
[...]
success: function(form,action) {
button.up('.window').close();
},
Or, as you apparently already have the window in a variable (win), you can just use that to close the window:
win.close();
but that depends on the variable win being available inside the success function, which we cannot assume from the code you gave.
Hi everybody
I'm a beggining with extjs and I have issue with change / set a item to a layout when i click on one of my node .
Here my contentPanel :
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: layoutExamples // HERE I WANT TO CHANGE DYNAMIC
};
My "listener" on my treenode :
treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
//Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel'); <== It's work.
Ext.getCmp('content-panel').setActive(formPanel); // HERE I TRY TO CHANGE ITEM ON CLICK AND SET FORMPANEL
});
My item for test :
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: 'Text field',
value: 'Text field value'
}, {
xtype: 'textfield',
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
}, {
xtype: 'filefield',
name: 'file1',
fieldLabel: 'File upload'
}, {
xtype: 'textareafield',
name: 'textarea1',
fieldLabel: 'TextArea',
value: 'Textarea value'
} }]
});
So, my objective is to change item of my content panel when i click on a node.. !
Thanks a lot for your helps buddies !
try that and tell me in the comments:
var formPanel = Ext.create('Ext.form.Panel',
{
'id': 'form-panel-1', // or what you want to give
// and all the properties you already defined
}
);
And in your event, based on http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card-method-setActiveItem :
treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
Ext.getCmp('content-panel').getLayout().setActiveItem(Ext.getCmp('form-panel-1'));
}
});
By the way, in the code you provided, there is an error in the listener, it misses a } for closing the if!