We Keep Coding

ExtJS 5.0.1 Show grid based on combobox selection

Looking for some assistance on showing/hiding a form container element based on a combobox selection.
I only want the grid (id: NspList) to show if and only if "NSP Provider" is selected in the combobox (id: carrierConnectivity). Does anyone have any ideas how this can be accomplished? Code snippet below:
{
xtype: 'container',
layout: 'vbox',
style: { paddingRight: '10px', paddingBottom: '10px' },
items: [{
xtype: 'combobox',
labelAlign: 'top',
fieldLabel: 'Connectivity Type',
id: 'carrierConnectivity',
name: 'connectivity_type',
store:['GRE', 'GRE - with internet peering', 'MPLS', 'Direct Leased Line', 'NSP Partner'],
width: 250,
},
{
id: 'NspList',
flex: 1,
xtype: 'grid',
minHeight: 200,
maxHeight: 300,
width: 250,
selType: 'rowmodel',
title: 'NSP Providers',
forceFit: true,
bind: { store: '{nspnames}' },
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
],
columns: {
defaults: {
editor: 'textfield'
},
items: [
{ text: 'Name', dataIndex: 'name'}
]
},
tools: [
{type: 'plus', handler: 'addNsp'},
{type: 'minus', handler: 'removeNsp'}
]
}
]
}

The combobox has a change listener which you want to use:
listeners:{
change:function(cb,newValue) {
cb.nextSibling().setVisible(newValue=="NSP Partner");
}
}
Because you haven't selected NSP Partner as default value on the checkbox, you should configure the grid as hidden by default:
hidden:true

How to switch content of a center panel in by check and uncheck checkbox

I have buttons in west region and by clicking on buttons I am getting different charts in center region(using border layout). In last button click, I created a window with checkbox. When I check the box I want to destroy the the chart in center and create a new chart with controllpanel : true. If it is unchecked then it should be controllpanel:false.
My code for regions is
Ext.define('MyApp.view.main.Main', {
requires: ['Mgo.*', 'MyApp.view.main.MainModel', 'Ext.plugin.Viewport'],
extend: 'Ext.container.Container',
ui: 'navigation',
height: '100%',
width: '100%',
layout: 'border',
floating: true,
controller: 'MainController',
items: [{
xtype: 'toolbar',
height: 50,
region: 'north',
split: true, // enable resizing
//margin: '0 5 5 5',
items: [{
xtype: 'image',
width: 160,
src: 'resources/images/newpowered.gif',
style: "height: 30px; left: auto; right: 1066px; top: 20px; margin: 0px;"
}, '->', {
xtype: 'image',
height: 30,
width: 30,
tooltip: 'About',
position: 'right',
margin: '0 4 0 0',
hidden: false,
src: 'resources/images/a.png'
}]
}, {
title: 'Charts',
region: 'west',
xtype: 'panel',
width: 230,
split: true,
items: [{
xtype: 'button',
height: 50,
width: 220,
text: 'Line Chart',
name: 'linechart',
icon: 'resources/images/line.png',
iconAlign: 'left',
textAlign: 'left',
scale: 'large',
margin: '5 0 0 5',
handler: 'onLineChartClick'
}, {
xtype: 'button',
height: 50,
width: 220,
text: 'Bar Chart',
textAlign: 'left',
name: 'barchart',
icon: 'resources/images/bar.png',
iconAlign: 'left',
scale: 'large',
margin: '5 0 0 5',
handler: 'onBarChartClick'
}, {
xtype: 'button',
height: 50,
width: 220,
text: 'Settings',
textAlign: 'left',
name: 'settings',
icon: 'resources/images/settings.png',
iconAlign: 'left',
scale: 'large',
margin: '5 0 0 5'
}]
}, {
xtype: 'panel',
region: 'center',
id: 'abc',
layout: 'card',
border: true,
items: [{
xtype: 'mgoPanel', // My own xtype
itemId: 'igp1',
showZoom: false,
showLegends: true,
showSlider: false,
showDataGrid: true,
chartType: 'groupedBoxPlot',
controlPanel:false, // this should be true when checkbox is checked
orientation: 'x'
}, {
xtype: 'mgoPanel',
itemId: 'igp4',
showZoom: false,
showLegends: true,
showSlider: false,
showDataGrid: true,
chartType: 'line',
controlPanel:false, // this should be true when checkbox is checked
orientation: 'x'
}]
}]});
Handler for Checkbox is
Ext.define('MyApp.view.main.CheckBox', {
extend: 'Ext.form.Panel',
alias: 'widget.checkboxPanel',
height: 300,
width: 400,
layout: 'fit',
bodyPadding: 10,
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Select Panels',
defaultType: 'checkboxfield',
items: [{
boxLabel: 'Control Panel',
name: 'ctrlPanel',
inputValue: '1',
id: 'checkbox1',
handler: function(field, value) {
debugger;
if (this.checked == true) {
var xyz = Ext.getCmp('abc').items.items;
for (i = 0; i <= xyz.length-1; i++) {
xyz[i].destroy(); // destroying center element. Need to true controllpanel
}
}
}
}]
}],
renderTo: Ext.getBody()});
Any help will apreciated.

To remove elements and replace with new ones:
handler: function(field, checked) {
var centerContainer = Ext.getCmp('abc');
Ext.suspendLayouts();
centerContainer.removeAll();
centerContainer.add([{
xtype: 'mgoPanel', // My own xtype
itemId: 'igp1',
showZoom: false,
showLegends: true,
showSlider: false,
showDataGrid: true,
chartType: 'groupedBoxPlot',
controlPanel: checked,
orientation: 'x'
}, {
xtype: 'mgoPanel',
itemId: 'igp4',
showZoom: false,
showLegends: true,
showSlider: false,
showDataGrid: true,
chartType: 'line',
controlPanel: checked,
orientation: 'x'
}]);
Ext.resumeLayouts(true);
}

Sencha Ext Panel Fill Browser

I have the following application and it fills the screen no problem horizontally. I would like it to fill out vertically as well.
var missionsPanel = new Ext.panel.Panel
(
{
title: 'Active Missions', width: '35%', renderTo: Ext.getBody(), layout: { type: 'vbox', align: 'stretch', padding: 5}
}
);
resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'ISR Toolkit v3.0',
renderTo: Ext.getBody(),
layout: { type: 'hbox', align: 'fit', padding: 5 },
items:
[ missionsPanel, { xtype: 'splitter' },
{ title: 'Person Details', bodyPadding: 5, flex: 2,
items:
[
{ itemId: 'txtName', fieldLabel: 'Name:', xtype: 'textfield'},
{ itemId: 'txtAge', fieldLabel: 'Age', xtype: 'textfield'},
{ itemId: 'btnShow', xtype: 'button', height: '60', width: 125, align: 'right', text: 'Show Data', handler: createNewMissionWindow }
]
}
]
});
I am sure it's something small I a missing.

The easiest way would be to create a Viewport with a fit layout, and the only item being your panel (removing the renderTo configs, as well as any height/width).

Need to align the check box, add multiple records and view the datefiled while edit in extjs4?

I need to add one or more records at a time in grid. After click on the add button i can able to add one record at a time. but he thing is i need to add multiple record at a time.
I tried to use both clickToEdit, clicksToMoveEditor but not working.
I need to align the check box in center while edit the grid.
Main thing is while i able edit in grid i can able to only the fields except startdate and end date column. it not rendered from the database.
Can anyone help me if there is wrong config params for the grid.
this.mcmRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
autoCancel: true,
listeners: {
scope: this,
canceledit: function(editor, event) {
if(!editor.record.get('FocusMarketId')) { //if it was a brand new record
console.log("edit");
console.log(editor.record.get('Id'));
var sm = this.mcmGridPanel.getSelectionModel();
App.mcmFocusMarketStore.remove(sm.getSelection());
if(sm.getCount()) {
sm.select(0);
}
}
}
}
});
var addFocusMarket = function(focusmarket) {
this.mcmRowEditing.cancelEdit();
console.log("add focus market");
var record = new Sch.model.Resource({
Id: focusmarket ? focusmarket.Id : '',
Origin: focusmarket ? focusmarket.Origin : '',
Destination: focusmarket ? focusmarket.Destination: '',
CabinClass: focusmarket ? focusmarket.CabinClass: '',
StartAvailability: focusmarket ? focusmarket.startAvailability: '',
EndAvailability: focusmarket ? focusmarket.endAvailability: ''
});
console.log("records-->"+record);
App.mcmFocusMarketStore.insert(0, record);
this.mcmRowEditing.startEdit(0, 0);
this.mcmHasChanges = true;
};
this.mcmGridPanel = new Ext.grid.GridPanel({
height: 240,
width: 540,
title: 'Results',
store: App.mcmFocusMarketStore,
multiSelect: true,
x: 0,
y: 170,
columns: [
{ xtype: 'gridcolumn', text: 'Flight#', sortable: true, width: 100, dataIndex: 'FlightNumber', hidden: true,
editor: {
xtype: 'textfield',
maxLength: 4,
minLength: 4,
maxChars: 4,
}
},
{ xtype: 'gridcolumn', text: 'Origin', sortable: true, width: 100, dataIndex: 'Origin',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Destination', sortable: true, width: 100, dataIndex: 'Destination',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Cabin', sortable: true, width: 80, dataIndex: 'CabinClass',
editor: {
xtype: 'textfield',
maxLength: 1,
minLength: 1,
maxChars: 1,
}
},
{ xtype: 'datecolumn', text: 'Start Date', width: 100, dataIndex: 'StartAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{ xtype: 'datecolumn', text: 'End Date', width: 100, dataIndex: 'EndAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{
xtype: 'gridcolumn',
text: 'Delete?',
header: 'Delete?',
dataIndex: 'delete',
width: 60,
renderer: function (value, meta, record, rowIndex, colIndex) {
return '<center><input type="checkbox" id="Delete-' + rowIndex + '"/></center>';
},
listeners :
{
checkchange : function(column, recordIndex, checked)
{
this.mcmRemoveFocusMarket();
//or send a request
}
},
handler: function() {
/* var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}*/
},
//disabled: true,
editor: {
xtype: 'checkbox'
}
}
],
tbar: [
{
text: 'Add',
tooltip: 'Add Focus Market',
iconCls: 'icon-shift-add',
scope: me,
handler: function() {
addFocusMarket.call(me);
}
}
],
plugins: [ this.mcmRowEditing ],

1.)
Do not add records into the grid directly.
Add data to the backend and reload the store of the grid then to show newly added data in the grid
2)
Alignment should be fixed with the use of checkcolumn
3)
I am not really sure what you are asking here.
Editing seems to work from what I understand.
Are you sure you are providing data for datecolumns in the right format (date: '2014/02/04')?
// Presuming you are using ExtJS 4...
this.mcmRowEditing = Ext.create('Ext.grid.plugin.RowEditing',
{
clicksToEdit: 1,
autoCancel: true,
listeners: {
scope: this,
edit: function(editor, context, eOpts){
// do your editing processing here
// lookup api documentation for params
}
}
});
this.mcmGridPanel = Ext.create('Ext.grid.Panel',
{
height: 240,
width: 540,
title: 'Results',
store: App.mcmFocusMarketStore,
multiSelect: true,
x: 0,
y: 170,
columns: [
{ xtype: 'gridcolumn', text: 'Flight#', sortable: true, width: 100, dataIndex: 'FlightNumber', hidden: true,
editor: {
xtype: 'textfield',
maxLength: 4,
minLength: 4,
maxChars: 4,
}
},
{ xtype: 'gridcolumn', text: 'Origin', sortable: true, width: 100, dataIndex: 'Origin',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Destination', sortable: true, width: 100, dataIndex: 'Destination',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Cabin', sortable: true, width: 80, dataIndex: 'CabinClass',
editor: {
xtype: 'textfield',
maxLength: 1,
minLength: 1,
maxChars: 1,
}
},
{ xtype: 'datecolumn', text: 'Start Date', width: 100, dataIndex: 'StartAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{ xtype: 'datecolumn', text: 'End Date', width: 100, dataIndex: 'EndAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{ xtype: 'checkcolumn', text: 'Delete?', width: 60, dataIndex: 'delete', format: 'd/m/Y',
// Make checkboxes of checkcolumn unchangeable. Editor can change state then.
// Handle changes in CellEditing/RowEditing 'edit' event for consistent behavior with other columns.
listeners: {beforecheckchange: function(column, recordIndex, checked){return false}}
editor: {xtype: 'checkbox'},
// checkcolumn aligns center by default use the 2 lines below instead if you want to align left
//align: 'left',
//editor: {xtype: 'checkbox', style: 'text-align:left; display:inline; padding-left:10px;'},
}
],
tbar: [
{
text: 'Add',
tooltip: 'Add Focus Market',
iconCls: 'icon-shift-add',
scope: me,
handler: function() {
addFocusMarket.call(me);
}
}
],
plugins: [ this.mcmRowEditing ]
});

extjs 4 portal example

I would like to say that Im struggling with understanding the portal demo in ExtJS 4. Can someone please just provide me a generic example of a container and how to add a portlet item. The docs provided with the download do not have the word portal or portlet when I do the search. When I look at the source of the example there are classes files and extra CSS files too. Are those needed? I have searched all over the web and only seem to find other people asking the same question. Any help or even a link to a demo for extjs 4 would be greatly appreciated. Maybe my googlefoo is lacking?
When I use the demo and start modifying the border layout I run into all sorts of issues. The center region cannot contain a tab panel, I use accordion layouts for my east, west, and north regions. There seems to be an issue with the West region and having an accordion layout because it does not display properly ie. the accordion is like half open and any images inside do not display unless you collapse and then re-open. Would someone be able to provide me with an example that just shows how to make a basic portal without any added functionality? Below is the code I was using that was not working properly but displays and works fine (except for the portal part) when using just a viewport.
Here is some example code
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
uses: ['Ext.app.PortalPanel'],
initComponent: function(){
Ext.apply(this, Ext.create('Ext.Viewport', {
id: 'main-viewport',
layout: {
type: 'border',
padding: '0 5 5 5'
},
items: [{
title: 'My Notifications',
id: 'My-Notifications-Panel',
region: 'north',
height: 300,
split: true,
collapsible: true,
collapsed: true,
margins: '0 0 0 0',
layout: 'accordion',
items: [
{
title: 'Alerts'
},{
title: 'Communications'
}
]
},{
title: 'My Support',
id: 'My-Support-Panel',
region: 'east',
width: 140,
collapsible: true,
collapsed: true,
margins: '0 0 0 0',
layout: 'column',
autoScroll: true,
defaults: {
margins: '10 5 0 0',
xtype: 'panel',
height: 100,
width: '100%',
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items:[
{
title: 'Customer Services'
},{
title: 'Technical Support',
listeners: {
afterrender: function(c){
c.el.on('click', function(){
CreateChatSession();
Ext.getCmp('My-Support-Chat-Panel').update('<iframe width="100%" height="700" src="/pub/" frameborder="0"></iframe>');
});
}
}
}
]
},{
xtype: 'panel',
region: 'west',
collapsible: true,
collapsed: true,
title: 'My Apps',
width: 275,
layout:'accordion',
split: true,
margins: '0 0 0 0',
defaults: {
bodyStyle: 'padding:15px',
layout: 'column'
},
items: [{
title: 'Internal Apps',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
},{
title: 'Favorites',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
},{
title: 'Reporting',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
}]
},
Ext.create('Ext.tab.Panel', {
region: 'center',
layout: 'fit',
items: [{
id: 'Workspace-1',
title: 'Workspace 1',
layout: 'fit',
items: [{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-2',
title: 'Portlet 2',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
})
]
}));
this.callParent(arguments);
}
});

----------- Just for anyone who reads this Portal Layout IS NOT part of the official framework and is a 3rd party extension bundled with the library, which is why it is not in the docs.

It'ss the portal example with tabs in center region
Hope this will help you.
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
getTools: function() {
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool) {
var portlet = panelHeader.ownerCt,
el = portlet.getEl();
el.mask('Working...');
Ext.defer(el.unmask, 2000, el);
} //eo handler function
}]; //eo return
}, //eo get tools
initComponent: function() {
var content = '<div class="portlet-content">' + Ext.example.shortBogusMarkup + '</div>';
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5'
}, //eo layout
items: [{ //header : item 1 of app-viewport
id: 'app-header',
xtype: 'box',
region: 'north',
height: 50,
html: 'myPortal'
},
{ //container : item 2 of app-viewport
xtype: 'container',
region: 'center',
layout: 'border',
items: [{ //options: item 1 of container
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [{ //item 1 of app-options
title: 'title',
autoScroll: true,
border: false,
iconCls: 'nav',
items: [{
xtype: 'treepanel',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
region: 'west',
split: true,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
/*Dashboard
MultiServices
Reporting
Global Options
*/
}]
},
{ //settings : item 2 of app-options
title: 'Settings',
html: '<div class="portlet-content">' + 'details ??' + '</div>',
border: false,
autoScroll: true,
iconCls: 'settings'
}
] //eo items options
},
{ //item 2 of container
id: 'tabpanel1', // id: 'app-portal', ???
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [{
title: 'tab1',
layout: 'column', //
closable: true,
items: [{
id: 'col-1',
columnWidth: 0.5,
flex: 1,
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
items: new Ext.app.GridPortlet(),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}, {
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-1
}, {
id: 'col-2',
columnWidth: 0.5,
flex: 1,
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.getTools(),
html: '<div class="portlet-content">' + Ext.example.bogusMarkup + '</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-2
}, {
id: 'col-3',
columnWidth: 0.5,
flex: 1,
margins: '0 26 0 0',
items: [{
id: 'portlet-4',
title: 'Chart Portlet',
tools: this.getTools(),
items: new Ext.app.ChartPortlet(),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}] //eo col-3
}] //eo tab1
}, {
title: 'tab2',
closable: true
}] //eo items tabpanel
}
] //eo ietms container
}
] //eo viewport
}); //eo apply
this.callParent(arguments);
}, //eo initcomponent
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});
EDIT
Or u can try this example I think it suits better ur needs ,let me know.