Show hide elements in extjs - javascript

I'm trying to show and hide radiogroups, based on selection from a drop-sown selection. So that if i choose toshiba only the toshiba models appear, else if i choose hp only the hp models appear. Now the functionality is working, however at the beginning before selecting anything, both models (hp and toshiba) are showing, however i want it so that only the toshiba models are showing at the beginning. I tried giving the hp models, the property hidden:true..But when selecting hp, the models no longer appear. Any idea on how to display only one model at the beginning?
toshibatypes = Ext.create('Ext.form.Panel', {
xtype: 'radiogroup',
defaultType: 'radio',
layout: 'hbox',
border:false,
id: 'toshiba',
width:'100%',
items: [
{
checked: true,
boxLabel: 'Toshiba 1',
name: 'toshibas',
inputValue: 'toshiba1',
xtype:'radiofield'
},
{
boxLabel: 'Toshiba 2',
name: 'toshibas',
inputValue: 'toshiba2',
xtype:'radiofield'
}
]
});
hptypes = Ext.create('Ext.form.Panel', {
xtype: 'radiogroup',
defaultType: 'radio',
layout: 'hbox',
border:false,
id: 'hp',
width:'100%',
items: [
{
checked: true,
boxLabel: 'HP 1',
name: 'hps',
inputValue: 'hp1',
xtype:'radiofield'
},
{
boxLabel: 'HP 2',
name: 'hps',
inputValue: 'hp2',
xtype:'radiofield'
}]
});
laptoptypes = Ext.create('Ext.form.ComboBox', {
store: laptops,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
editable:false,
width: 100,
listeners: {
select: function() {
var iComboValue = laptoptypes.getValue();
switch(iComboValue) {
case "toshibatypes" :
{
Ext.get("toshiba").show();
Ext.get("hp").hide();
break;
}
case "hptypes" :
{
Ext.get("hp").hide();
Ext.get("toshiba").show();
break;
}
}
}
}
});

If you configure hidden on the view declaration you can use setHidden( boolean ).
var iComboValue = laptoptypes.getValue();
Ext.get("toshiba").setHidden(iComboValue !== 'toshibatypes');
Ext.get("hp").setHidden(iComboValue !== 'hptypes');

Related

How to fix default tab key navigation in Extjs 5.1?

Currently I'm working on a code migration from ExtJS 4.2 to ExtJS 5.1. And I noticed MANY changes on default behavior of many components.
One of the things I noticed is that the default tab key navigation between components has changed and in this case is not quite predictable.
To reproduce go to the 4.2 fiddle here, and then click on the first text field, hit tab and then it would change focus to state combo box; hit tab again and it would go to "Next" button, hit tab again and it would go to "Second option" radio button, and so on in a predictable order.
Then repeat the same thing on 5.1 fiddle here. First thing you'll notice is that "My First Option" radio is unchecked (that's another issue), but the main issue I would like to fix is the odd order it follows on tab key press.
How can I make tab key navigation behave as it did on 4.2 version?
Including sample code here:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'My Navigable Panel',
items: [
{
xtype: 'radiogroup',
layout: 'vbox',
items: [
{
xtype: 'radiofield',
boxLabel: 'My First Option',
name: 'radio',
value: true,
checked: true,
listeners: {
change: function(group, newValue, oldValue) {
if(newValue) {
group.up('form').down('fieldcontainer[name=containerA]').show();
group.up('form').down('fieldcontainer[name=containerB]').hide();
} else {
group.up('form').down('fieldcontainer[name=containerA]').hide();
group.up('form').down('fieldcontainer[name=containerB]').show();
}
}
},
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
name: 'containerA',
fieldDefaults: {
labelAlign: 'top',
margin: '0 5 0 5'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'First field',
allowBlank: false
},
{
xtype: 'combo',
fieldLabel: 'State',
width: 50,
store : states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
},
{
xtype: 'button',
text: 'Next'
}
]
},
{
xtype: 'radiofield',
boxLabel: 'My Second Option',
name: 'radio',
value: false
}
]
},
{
xtype: 'fieldcontainer',
padding: '0 0 0 25',
name: 'containerB',
hidden: true,
items: [{
xtype: 'radiogroup',
layout: 'vbox',
items: [
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button A',
name: 'subradio'
},
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button B',
name: 'subradio'
}
]
}]
}
],
renderTo: Ext.getBody()
}).show();
}
});
Well, I did not find a way to tell ExtJS 5.1 to navigate through the form as it did on 4.2, but I managed to get the desired behavior by modifying my form composition (although it looks the same) in a way that ExtJS 5.1 was able to orderly follow.
To make that happen I removed the radiogroup component but kept all that was inside of it (which was pretty much the whole form content). It seems that structure didn't feel quite natural to the updated framework.
Here is a fiddle with the mentioned changes.
Including code here:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'My Navigable Panel',
items: [
{
xtype: 'radiofield',
boxLabel: 'My First Option',
name: 'radio',
value: true,
checked: true,
listeners: {
change: function(group, newValue, oldValue) {
if(newValue) {
group.up('form').down('fieldcontainer[name=containerA]').show();
group.up('form').down('fieldcontainer[name=containerB]').hide();
} else {
group.up('form').down('fieldcontainer[name=containerA]').hide();
group.up('form').down('fieldcontainer[name=containerB]').show();
}
}
},
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
name: 'containerA',
fieldDefaults: {
labelAlign: 'top',
margin: '0 5 0 5'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'First field',
allowBlank: false
},
{
xtype: 'combo',
fieldLabel: 'State',
width: 50,
store : states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
},
{
xtype: 'button',
text: 'Next'
}
]
},
{
xtype: 'radiofield',
boxLabel: 'My Second Option',
name: 'radio',
value: false
},
{
xtype: 'fieldcontainer',
padding: '0 0 0 25',
name: 'containerB',
hidden: true,
items: [{
xtype: 'radiogroup',
layout: 'vbox',
items: [
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button A',
name: 'subradio'
},
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button B',
name: 'subradio'
}
]
}]
}
],
renderTo: Ext.getBody()
}).show();
}
});

Ext 3.4 - How the populate a combo box using a local array on the fly

I have a radio buttons in a window in Ext 3.4. Based on which radio button is clicked I have to populate the data accordingly in a combo box.
for e.g: Radio Buttons: 1. Window 2. Linux.
If the user checks Window, then all windows images will be populated in the combo box.
Now for fetching all the window images I am not making any call to the server to fetch those images but have it is a client side stored in an local array.
Below is the code snippet:
var ImagesArray = new Array();
ImagesArray=[];// On load the array contains no data
{
xtype: 'radiogroup',
fieldLabel: 'Image type',
cls: 'x-check-group-alt',
itemid: 'ImageType',
items: [
{boxLabel: 'WindowsImages', name: 'rb-auto', inputValue: 'Windows', id: 'Windows',checked:true,
listeners: {
'check' : function(radio, checked) {
data =['Windows 2008 Server','Windows 2012 server'];
ImagesArray.loadData(data,false);
ImagesArray.store.reload();
}
},
// My combo box
{
xtype : 'combo', // 6
fieldLabel : 'Template/Image name',
id: 'VMTemplate',
name: 'VMTemplate',
labelWidth: 250,
triggerAction: 'all',
forceSelection: true,
editable:false,
store : ImagesArray,
},
But this is not working. I am getting an error store.reload() is not defined.
How do i make it work?
Since multiple selections are possible, I think checkboxgroup is more suitable than radiogroup in your case. Sample Code.
Ext.create('Ext.form.Panel', {
width: 300,
height: 500,
bodyPadding: 10,
renderTo: Ext.getBody(),
items:[{
xtype: 'checkboxgroup',
fieldLabel: 'Two Columns',
columns: 2,
vertical: true,
listeners:{
change: function(){
var data = Ext.Array.flatten(Ext.Object.getValues(this.getValue()));
data = data.map(function(n){ return { name: n } });
Ext.getCmp("VMTemplate").getStore().loadData(data);
}
} ,
items: [
{ boxLabel: 'Item 1', name: 'rb-auto', inputValue: 'Item 1'},
{ boxLabel: 'Item 2', name: 'rb-auto', inputValue: 'Item 2'},
{ boxLabel: 'Item 3', name: 'rb-auto', inputValue: 'Item 3' },
{ boxLabel: 'Item 4', name: 'rb-auto', inputValue: 'Item 4' },
{ boxLabel: 'Item 5', name: 'rb-auto', inputValue: 'Item 5' },
{ boxLabel: 'Item 6', name: 'rb-auto', inputValue: 'Item 6' }
]
},{
xtype: 'combo',
store:{
fields: ['name'],
data: []
},
displayField: 'name',
valueField: 'name',
emptyText: 'Template',
id: 'VMTemplate',
queryMode: 'local'
}]
});

Sencha Touch 2: Reloading a treeStore in nestedList to reflect user selection

I have a nested list in my application, and when users make a selection they are taken to a detailCard with some options. One of these options is to "confirm" their selection. Once confirmed, the selection should be removed from the list. This works on the server side, so if the app is refreshed the selection is gone. However I was hoping to remove the selection in the treeStore itself and refresh the view somehow so that users can immediately see the effect of their confirmation. I was following a tutorial for nestedList that I can't seem to find anymore, and this code is based on that:
var itemId = '';
Ext.define('MyApp.view.MainView',
{
extend: 'Ext.tab.Panel',
xtype: 'main',
alias: "widget.mainview",
requires: [
'Ext.dataview.NestedList',
'Ext.data.proxy.JsonP'
],
config:
{
tabBarPosition: 'bottom',
items: [
{
xtype: 'nestedlist',
title: 'Listings',
iconCls: 'home',
displayField: 'listingValue',
scrollable: true,
detailCard:
{
xtype: 'panel',
scrollable: true,
styleHtmlContent: true,
items: [
{
xtype: 'fieldset',
readOnly: true,
title: 'Schedule Information:',
items: [
{
name: 'from',
id: 'from',
xtype: 'textareafield',
label: 'From',
readOnly: true
},
{
name: 'to',
id: 'to',
xtype: 'textareafield',
label: 'To',
readOnly: true
},
{
name: 'moreInfo',
id: 'moreinfo',
xtype: 'textfield',
label: 'More Info',
readOnly: true
},
]
},
{
xtype: 'container',
flex: 1,
items: [
{
xtype: 'button',
text: 'Confirm',
action: 'confirmSelection',
margin: '10 5',
padding: '5',
ui: 'confirm'
}]
}]
},
listeners:
{
itemtap: function (nestedList, list, index,
element, post)
{
var detailCard = this.getDetailCard();
detailCard.setHtml('');
itemId = post.get('id');
Ext.getCmp('from').setValue(post.get(
'from'));
Ext.getCmp('to').setValue(post.get('to'));
Ext.getCmp('moreinfo').setValue(post.get(
'moreinfo'));
}
},
store:
{
type: 'tree',
fields: [
'id', 'from', 'to', 'fromcity', 'tocity',
'time', 'address',
{
name: 'leaf',
defaultValue: true
},
{
name: 'listingValue',
convert: function (value, record)
{
listingValue = '$<b>' + record.get(
'address') + '</b> ' + record
.get('fromcity') + ' to ' +
record.get('tocity');
return listingValue;
}
}
],
root:
{
leaf: false
},
proxy:
{
type: 'jsonp',
url: 'http://myURL.com/page.php?action=go',
reader:
{
type: 'json',
rootProperty: 'root'
}
}
}
},
{
title: 'Dashboard',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Dashboard'
},
]
}]
}
});
I have no idea what to do at this point, because the store is set up in the view and I'm not sure how to access it in my controller. I learned about treeStore.removeAll() and treeStore.load(), but how can I call those functions in a controller when the store is set up without any type of reference name? Is there a way I can remove the user's selection and display the view, or perhaps reload the view altogether so it can retrieve the new list from the server?
Because my list is on the first page of my app, I managed to get away with window.location.reload(); and reloading the whole app. Its not the most elegant solution, but the changes are reflected.
I won't accept my own answer just yet in case someone comes along with a better solution.

extjs 4.2.1 - Radiogroup: add a radio button with a textbox

In my UI, I have a single-select RadioGroup with a few options to choose from. One of the options will contain a textfield that the user can enter input into like this:
() Option A
() Option B
() Other (Please specify) ____
How would I add something like this to a RadioGroup?
For creating layout of "Other" option you can use container component with hbox layout. This component will have two items. First item will be radio and the second item will be textfield.
For creating space between radio and textfield components you can use splitter.
{
xtype: 'radiogroup',
fieldLabel: 'Choose',
columns: 1,
vertical: true,
items: [
{ boxLabel: 'Option 1', name: 'rb', inputValue: '1' },
{ boxLabel: 'Option 2', name: 'rb', inputValue: '2' },
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'radio',
boxLabel: 'Other (Please specify)',
name: 'rb',
inputValue: '3'
},
{
xtype: 'splitter'
},
{
xtype: 'textfield',
name: 'option3detail'
}
]
}
]
}
Fiddle with live example: https://fiddle.sencha.com/#fiddle/2kj

Adding Drop down menu in the window heder using extjs4?

I need to add drop down menu when I click the top right icon on the window header display it like Google Chrome browser menu. Adding Drop down menu in the window header using extjs4.
Here is the code, but cannot able to see the menu.
code here:
Hi I need this looks like google chrome browser menu. i cannot see when i click the menu on window.
Ext.require([
'Ext.form.*'
]);
Ext.onReady(function() {
var win;
var options = [
{"name":"AAdvantage ",},
{"name":"PNR",},
{"name":"Bag File",}
];
Ext.regModel('Options', {
fields: [
{type: 'string', name: 'name'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Options',
data: options
});
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
items: [
{
text: 'Search Customer',
checked: true
}, '-',
{
text: 'Customer Information',
checked: true
}, '-', {
text: 'Travel History',
checked: true
}, '-', {
text: 'Resolution'
}, '-', {
text: 'Future OD'
}, '-', {
text: 'History OD'
},'-', {
text: 'Help',
checked: true
}, '-', {
text: 'Upload Document',
checked: true
}
]
});
function showContactForm() {
if (!win) {
var form = Ext.widget('form', {
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
fieldDefaults: {
labelSeparator: "",
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
defaults: {
margins: '0 0 10 0'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Search Customer',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'top'
},
},
{
xtype: 'combobox',
fieldLabel: 'Select Option',
name: 'suit_options_id',
id: 'ComboboxSuitOptions',
typeAhead:false,
labelAlign:'top',
labelSeparator: "",
store: store,
editable: false,
displayField: 'name',
hiddenName: 'id',
valueField: 'id',
queryMode: 'local',
listeners: {
change: function(combo) {
console.log(combo.getValue());
}
}
},
{
xtype: 'textfield',
fieldLabel: 'AAdvantage Number',
allowBlank: false
},
{
xtype: 'button',
text : 'Search',
handler: function() {
}
}]
});
win = Ext.widget('window', {
title: '<center>FCR</center>',
closeAction: 'hide',
width: 200,
height: 300,
minHeight: 300,
layout: 'fit',
closable: false,
tools: [
{ type:'left',
menu: menu
}
],
resizable: true,
modal: true,
items: form
});
}
win.show();
}
showContactForm();
});
The code does what it means:
tools: [
{ type:'left',
menu: menu
}
],
This code generates your left icon in the top window see the doc, but ool`has no property menu, so your code cannot work.
Define a handler function that shows your menu (this code works, but there is some tuning necessary to align the menu on the button) :
tools: [
{ type:'left',
handler: function(){menu.show()}
}
],
There are also some other problems with your code.
I get an warning Ext.regModel has been deprecated. Models can now be created by extending Ext.data.Model: Ext.define("MyModel", {extend: "Ext.data.Model", fields: []});.
Also, you should prefer use the launch method of Ext.app.Application to start rather than Ext.onReady which is ExtJS version 3

Categories