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!
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'd like to achieve this behavior:
If a field (combo, text, date ...) in a form panel has a custom property set true
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name',
customProp: true
},
then add a button or other components behind the actual component. Writen in json it would look like this:
{
xtype: 'container',
margin: '0 0 8 0',
layout: 'hbox',
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name',
},
{
xtype: 'button',
text: 'xxx',
tooltip: 'I\'m a custom tooltip'
}
]
}
I'm wondering how i could achieve this. Is this even possible ?
It is.
Ext.require('*');
Ext.onReady(function() {
var form = new Ext.form.Panel({
renderTo: document.body,
width: 400,
height: 100,
items: {
xtype: 'textfield',
fieldLabel: 'Foo'
}
});
setTimeout(function() {
var field = form.down('textfield');
// We have a reference to the field, let's go!
var owner = field.ownerCt;
owner.remove(field, false);
owner.add({
xtype: 'container',
layout: 'hbox',
items: [field, {
xtype: 'button',
text: 'Foo'
}]
});
}, 1000);
});
Where container is a reference to the container with the hbox layout.
I have a windows with a items include 2 items like
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
border: false,
hidden: true,
items: [{
xtype: 'textfield',
fieldLabel: '1'
},{
xtype: 'textfield',
fieldLabel: '2'
}]
}
}).show();
I make a button and i want show/hide first item (fieldLabel : '1') in my window like
Ext.create('Ext.Button', {
text: 'Show first item',
visible: false,
renderTo: Ext.getBody(),
handler: function() {
win.down('form').items.items[0].show(); // not working
}
});
But that's not working. How to fix that thanks
ps: I don't want to use id to get comp, b/c my form is dynamic thanks
here is my full code http://jsfiddle.net/aMKjN/
Try this. It will show only the first textfield.
Ext.create('Ext.Button', {
text: 'Show first item',
visible: false,
renderTo: Ext.getBody(),
handler: function() {
win.items.items[0].show();
win.items.items[0].items.items[1].hide();
}
});
try this it will show only textfield 1
Ext.onReady(function () {
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
border: false,
// hidden: true,
items: [{
xtype: 'textfield',
id:'first',
hidden: true,
fieldLabel: '1'
},{
xtype: 'textfield',
fieldLabel: '2'
}]
}
}).show();
Ext.create('Ext.Button', {
text: 'Show first item',
visible: false,
renderTo: Ext.getBody(),
handler: function() {
Ext.getCmp('first').setVisible(true)
}
});
});
To enable or disable a textfield so that user can have only one textfield enabled to input data.
Explanation :
If their are two textfields : textfield1, textfield2.
If user wishes to enter data in textfield1 then textfield2 should be disabled.
In this scenario :
User inputs the data in textfield1 and wishes that he wants to enter the input for textfield2 instead of textfield1 , then data should be cleared from textfield1 and it should be disabled and textfield2 should be enabled.
Sample Code : I m not aware which event listeners to use to get this functionality.
{
xtype: 'textfield',
width: 215,
fieldLabel: 'Source1',
id: 'textfield1',
listeners: {
}
}, {
xtype: 'textfield',
id: 'textfield2',
width: 215,
fieldLabel: 'Source2',
listeners: {
}
}
Please help me out relove this issue.
Ext.require([
'Ext.form.*'
]);
Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
renderTo: Ext.getBody(),
width: 340,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
id: 'ftf1',
xtype: 'textfield',
name: 'textfield1',
fieldLabel: 'Text field1',
value: ''
},{
id: 'ftf2',
xtype: 'textfield',
name: 'textfield2',
fieldLabel: 'Text field2',
value: ''
}]
});
var ftf1 = Ext.getCmp('ftf1');
ftf1.on('change', function(ftf1, newValue, oldValue, eOpts ) {
if (newValue.valueOf()!='') {
Ext.getCmp('ftf2').disable();
} else {
Ext.getCmp('ftf2').enable();
}
})
var ftf2 = Ext.getCmp('ftf2');
ftf2.on('change', function(ftf2, newValue, oldValue, eOpts ) {
if (newValue.valueOf()!='') {
Ext.getCmp('ftf1').disable();
} else {
Ext.getCmp('ftf1').enable();
}
})
});
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.