We have an on-screen business rule, where on the particular condition I can perform some action. Now after upgrade to ExtJS 6.5 something is broken.
Below code summarizes my problem
I basically want to set the checkbox to false whenever someone clicks it.
FYI, I can't use setReadonly() in my problem.
behavior on version 5.1.3.228: The checkbox doesn't get checked, which is expected
behavior on version 6.5.2.463: The checkbox gets checked and after that, you can't unchecked it.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width: 300,
title: 'Checkbox Title',
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'This is Checkbox',
defaultType: 'checkbox',
items: [
{
boxLabel : 'Check me',
name : 'checkbox',
listeners : {
change : function (){
this.setValue(false)
}
}
}
]
}
],
renderTo: Ext.getBody()
});
}
});
You can use this.setChecked to retain your functionality.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Msg.show({
bodyPadding: 10,
width: 300,
title: 'Checkbox Title',
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'This is Checkbox',
defaultType: 'checkbox',
items: [
{
boxLabel : 'Check me',
name : 'checkbox',
checked: true,
listeners : {
change : function () {
this.setChecked(false);
}
}
}
]
}
],
});
}
});
(Used Ext.Msg.show to see the panel in a fiddle)
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);
});
}
}]
});
}
});
Am new to sencha touch, my problem is i have a separate view to show a form panel by clicking on control event the form panel view will load, but when i click on the event nothing display on my screen. Just a blank screen to show..I dont know what am doing. The form panel is taken from sencha form panel tutorial
The following are my form panel view
Ext.define('WinReo.view.AddContact', {
extend: 'Ext.Container',
xtype: 'addcontact',
requires: [
'Ext.TitleBar'
//'Ext.Video'
],
config: {
layout:'fit'
},
initialize:function(){
console.log('inside initialize');
var formPanel = Ext.create('Ext.form.Panel', {
//xytpe:'formpanel',
fullscreen: true,
layout:'fit',
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Set Data',
handler: function() {
formPanel.setValues({
name: 'Ed',
email: 'ed#sencha.com',
password: 'secret'
})
}
},
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
formPanel.reset();
}
}
]
});
}
});
This is the controller event to show form panel view
onItemSwiped: function(list,index,target,record,e)
{
var addcontact= Ext.create('WinReo.view.AddContact');
Ext.Viewport.add(addcontact);
Ext.Viewport.setActiveItem(addcontact);
},
Just a simple task but am spending too much time to fix this one..please help me to solve this issue. Thanks in advance..
Your right about setActiveItem and you need to use it. because Ext.Viewport.add() only adds to viewPort not shows the view.
So only problem in your code is you created formPanel, but not added it in the AddContact View.
...........
// same code
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
formPanel.reset();
}
}
]
});
this.add(formPanel); // add this line
}
});
See this fiddle
I want to add a field dynamically when click on button in extjs 4.What I have done is added a onchange function on add button and write the adding textfield logic in that function.
Here is my code.
Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.useredit',
requires: ['Ext.form.Panel'],
title : 'Edit User',
layout: 'fit',
autoShow: true,
height: 300,
width: 280,
id : 'mainPanel',
initComponent: function() {
this.items = [
{
xtype: 'form',
id: 'dyForm',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Add',
scope: this,
handler: this.onChange
},
];
this.callParent(arguments);
},
onChange : function(){alert('test');
var form=Ext.getCmp("mainPanel");
form.items.add(Ext.create("Ext.form.field.Text", {fieldLabel:"First Name"}));
form.doLayout(true);
}
});
And I also want that on edit of this form I will load data to those new fields that i have newly created dynamically.
Change the onChange function to
onChange : function(btn){
// var form=Ext.getCmp("mainPanel");
var form = btn.up('window').down('form'); // this is a better approach
form.add(Ext.create("Ext.form.field.Text", {fieldLabel:"First Name"}));
}
should do it. You added the field directly to the collection where you should have use the supplied add method of the form component.
see JSFiddle
I am trying to create a form embedded inside a Panel and trying to retrieve the contents of the form fields from within the controller.
Below is my view and controller code.
Ext.define('MyApp.view.SignIn', {
extend: 'Ext.Container',
requires: ['Ext.Button','Ext.form.Panel'],
xtype: 'loginPage',
config : {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
html:'<img src="resources/icons/logo.png" />',
items: {
iconMask: true,
align: 'left',
text: 'Sign In',
handler: function(){
var panel = Ext.create('Ext.Panel', {
left: 0,
padding: 10,
xtype: 'loginPage',
url: 'contact.php',
layout: 'vbox',
id: 'signinform',
items: [
{
xtype: 'fieldset',
title : 'Enter Login Information:',
instructions: 'All fields are required',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'emailfield',
name: 'Email',
label: 'Email',
placeHolder: 'Valid email'
},
{
xtype: 'passwordfield',
name: 'Password',
label: 'Password',
placeHolder: '6 characters'
}]
},
{
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Login',
ui:'confirm',
id:'Login-btn',
width: '100px',
flex: 1
}, {
width: '100px'
}, {
xtype: 'button',
text: 'Register',
ui: 'decline',
width: '100px',
flex: 1,
handler: function(){
this.getParent().getParent().destroy();
}
}]//Buttons array
}//Form completion
]
}).showBy(this); //Panel created
}//Function complete
}
},
{
layout: {
type: 'vbox',
pack:'center',
align: 'center'
},
items:[{
html:'<h2>My tool</h2><h3 style="color:#F47621">Simple, intuitive and powerful data management tool.</h3>',
styleHtmlContent: true,
}
]
},
]
},
initialize: function() {
this.callParent(arguments);
},
});
And here is my controller code. I just checked the controller code it seemed to be fine with a simpler form view. So I guess the issue is with the view.
Ext.define("MyApp.controller.SignIn", {
extend : 'Ext.app.Controller',
config : {
refs : {
home : '#homePage',
login : '#loginPage',
SignIn : '#signinform'
},
control : {
'#Login-btn': {
tap : 'onLoginButtonTap'
}
}
},
onLoginButtonTap: function() {
var formValues = this.getSignIn().getValues();
console.log(formValues.username);
console.log(formValues.password);
}
});
]
},
initialize: function() {
this.callParent(arguments);
},
});
What is wrong with the form creation in the View page. Why is the form coming as undefined. Experts please help
Here:
var panel = Ext.create('Ext.Panel', {
...
You are instantiating a simple panel not a form panel. May be you want to say:
var panel = Ext.create('Ext.form.Panel', {
...
I believe the reason you are getting undefined is because those components don't exist when the view is created.
Instead of creating the panel in your view (Ext.create('Ext.Panel'...) with a handler function you should consider defining it as an item in your xtype:loginpage container with hidden : true. Then via a listener from the controller call show() on the hidden component.
I find that if I keep event listeners/handlers in my controllers, and layout/display logic in my views my application becomes much more managable.
I also try to avoid calling Ext.create(Ext.SomeCmpt) and instead use the hidden attribute.
Hope this helps.
I have a form where i have a radiogroup 'yes', 'no'.
When i click on 'yes' i got a textfield added to a fieldset on the form with the config option: allowBlank: false. So there is validation on the field. When I click on 'no' all fields are removed from the fieldset that is present on the form.
The problem is when the validation is active, so when you go inside the textfield and you click away from it without entering any characters into it and i click on the radiobutton 'no' the textfield disappears and gives me the following error when i catch it:
Element.alignToXY with an element that doesn't exist
When i click afterwards on the radiobutton 'yes', the textfield is shown again BUT i get an error:
TypeError: dom is undefined
I could catch these errors and do nothing with it because in fact the form seems to be working, the textfields got added and removed like it should, there are only errors present and i don't like the concept of it. Does anyone has a clue why this error occurs and how to get rid of it so it's working 100% properly?
Here is an example of the code:
var radiogroup = new Ext.form.RadioGroup({
fieldLabel: 'Radio group test',
allowBlank: false,
anchor: '85%',
items: [{
boxLabel: 'Yes',
name: 'radio',
inputValue: 1
}, {
boxLabel: 'No',
name: 'radio',
inputValue: 2
}],
listeners: {
change: function (rg, radio) {
if (radio.inputValue == 1) {
var textfield_test = new Ext.form.TextField({
fieldLabel: 'Test',
allowBlank: false,
id: 'test',
name: 'test',
anchor: '85%',
width: 320,
helpText: 'test'
});
textfield_fieldset.insert(textfield_fieldset.items.length, textfield_test);
} else {
try {
txt_test = Ext.getCmp('test');
if (txt_test) {
textfield_fieldset.remove(txt_test);
}
textfield_fieldset.doLayout();
} catch (err) {
alert(err);
}
}
}
}
});
I've done this successfully not just for one textbox, but for an entire panel, and it works pretty well. In my case, any number of panel can be added and removed dynamically and it works pretty well. The relevant code that I used were:
panel.insert(medIndex,getNewPanel());
panel.doLayout();
And for remove i used,
var cmp = Ext.getCmp('Panel-' + Id);
if (cmp) {
treatment.remove(cmp, true); // True is the autoDestroy option.
}
These two in combination works for me. Though I would suggest that if you're doing this only for one textbox, then convert it into a hidden field and disable it. When you disable a field, it does not get submitted in a post, or ajax post request.
Hope this helps.
first, why did you re-add/re-remove a component like that?,..
if i was you... i will use the hide / show method of textfield class..
after read your code, i assuming that you are make a formPanel with 2 items (radiogroup and fieldset) where in the fieldset, there is a textfield... so, guestly.. mybe like this ??
var radiogroup = new Ext.form.RadioGroup({
fieldLabel: 'Radio group test',
allowBlank: false,
anchor: '85%',
items: [
{
boxLabel: 'Yes',
name: 'radio',
inputValue: 1},
{
boxLabel: 'No',
name: 'radio',
inputValue: 2}
],
listeners: {
change : function(a,b){
if (b.inputValue==1){
Ext.getCmp("textfield").enable();
Ext.getCmp("textfield").show();
}else{
Ext.getCmp("textfield").disable(); // set disable to prevent send empty data
Ext.getCmp("textfield").hide();
}
}
}
});
var formPanel = new Ext.form.FormPanel({
url : 'www.google.com',
method : "GET",
layout:'column',
frame :true,
border : false,
items : [
radiogroup,
{
xtype:'fieldset',
id : 'test',
title: 'Fieldset',
collapsible: true,
height : 200,
width : 350,
items :[{
xtype : "textfield",
id : 'textfield',
fieldLabel : "input data",
name : "text",
hidden:true,
disabled:true
}]
}
]
});
var win = new Ext.Window({
title : "holla",
width : 400,
height: 300,
border : false,
layout:'fit',
items : [formPanel]
});
win.show();
I created a jsfiddle to answer this question. The textfield seemed to get added / removed properly there: http://jsfiddle.net/jaycode/PGSb7/4/
Cheers.
Edit: For completeness, I guess I'll just post the code here as well
HTML
<div id="radios"></div>
<div id="textfield_fieldset"></div>
JS
var textfield_fieldset = new Ext.form.FieldSet({
renderTo: 'textfield_fieldset',
});
var radiogroup = new Ext.form.RadioGroup({
renderTo: 'radios',
width: 200,
height: 60,
fieldLabel: 'Radio group test',
allowBlank: false,
layout: {
type: 'vbox'
},
items: [
{
boxLabel: 'Yes',
name: 'radio',
inputValue: 1
},
{
boxLabel: 'No',
name: 'radio',
inputValue: 2
}
],
listeners: {
change: function(rg, radio) {
if (rg.lastValue.radio == 1) {
var textfield_test = new Ext.form.TextField({
fieldLabel: 'Test',
allowBlank: false,
id: 'test',
name: 'test',
anchor: '85%',
width: 320,
helpText: 'test'
});
textfield_fieldset.insert(textfield_fieldset.items.length, textfield_test);
} else {
txt_test = Ext.getCmp('test');
if (txt_test) {
textfield_fieldset.remove(txt_test);
}
textfield_fieldset.doLayout();
}
}
}
});