We Keep Coding

Extjs using formBind: true, not disabling submit button

When I am using formBind: true, it does not seem to (save) and I am not sure why. Any ideas?
title: 'Edit Sessions',
modal: 'true',
items: [
{
xtype: 'form',
bodyPadding: 10,
title: "",
defaults: {
labelWidth: 90,
margin: '0 0 10 0',
anchor: '90%'
},
items: [
{
name: 'title',
xtype: 'textfield',
fieldLabel: 'Title',
allowBlank: false,
},
{
xtype: 'checkboxfield',
name: 'approved',
fieldLabel: 'Approved',
}
]
},
{
xtype: 'container',
padding: '10 10 10 10',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items:
[ //Buttons and handlers
{
xtype: 'button',
text: 'Save',
formBind: true,
type: 'submit',
margin: '5 5 5 5',
handler: function (button) {
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
},
{
xtype: 'button',
text: 'Cancel',
margin: '5 5 5 5',
handler: function (button) {
button.up('window').destroy();
}
}
]
}
]

The formBind only works if the button is in the form.
Working example: https://fiddle.sencha.com/#view/editor&fiddle/1o4t

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);
}

show the Window in EXT JS

var win,
button = Ext.getCmp('show-btn');
button.on('click', function(){
win = Ext.define('MyApp.view.LeftRightWIndow', {
extend: 'Ext.window.Window',
height: 368,
width: 546,
title: 'My Window',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
height: 193,
width: 515,
layout: {
align: 'center',
type: 'hbox'
},
items: [
{
xtype: 'container',
flex: 1,
margins: '',
height: 135,
padding: '10 10 10 10',
width: 114,
layout: {
type: 'column'
},
items: [
{
xtype: 'textfield',
padding: '0 0 10 0',
width: 233,
fieldLabel: 'Label'
},
{
xtype: 'textfield',
padding: '0 0 10 0',
width: 233,
fieldLabel: 'Label'
}
]
},
{
xtype: 'container',
flex: 1,
margins: '',
height: 135,
padding: '10 10 10 10',
width: 114,
layout: {
type: 'column'
},
items: [
{
xtype: 'textfield',
padding: '0 0 10 0',
width: 233,
fieldLabel: 'Label'
},
{
xtype: 'textfield',
padding: '0 0 10 0',
width: 233,
fieldLabel: 'Label'
}
]
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'tbtext',
autoRender: true,
cls: 'save',
height: 26,
padding: '5 5 5 5',
width: 43,
text: 'Save'
},
{
xtype: 'tbseparator'
},
{
xtype: 'tbtext',
autoRender: true,
cls: 'edit',
height: 26,
padding: '5 5 5 5',
width: 43,
text: 'Edit'
}
]
}
]
});
me.callParent(arguments);
}
});
});
how to show the Window when press the show-btn?
this code i m using Sencha Articheh to create. any idea?

With Ext.define() method you define class, but not creating instance of the class. For creating class instance you have to use Ext.create() method.
Also I recommend to move class definition outside click handler to separate file. If you are using standard application structure created by Sencha architect, create file with class definition in view folder.
So in click handler you will have just:
// create instance of MyApp.view.LeftRightWIndow class
win = Ext.create('MyApp.view.LeftRightWIndow');
// display window
win.show();

On the present moment click event just create window object without displaying it. For showing your window after clicking on 'show-btn', you need just to invoke show() method of window object. So try to place win.show() before last line, like this:
...
me.callParent(arguments);
}
});
win.show();
});

Extjs Date picker display issue

I wrote code of ExtJS for date picker, and include it in two different HTML file. Height of text box is different in the first HTML file than in the other. My code is :
Ext.create('Ext.form.Panel', {
height: '15%',
width: $("#MainWindow_Right_Panel").width() - 20,
renderTo: 'FilterControl',
id: 'DatePicker_Panel',
border: 0,
items: [
{
xtype: 'datefield',
fieldLabel: 'To',
name: 'to_date',
style: 'float: right',
id: 'todate',
padding: 5,
width: 130,
labelWidth: 30,
value: todate,
maxValue: today,
format: "d.m.Y",
layout: 'form',
listeners: {
select: function(combo, value) {
todate=value;
}
}
},
{
xtype: 'datefield',
fieldLabel: 'From',
style: 'float: right',
labelWidth: 50,
width: 150,
name: '_fromdate',
padding: 5,
id: 'fromdate',
value:fromdate,
maxValue: today,
format: "d.m.Y",
layout: 'form',
listeners: {
select: function(combo, value) {
fromdate=value;
}
}
},
]
});
output in first HTML:
in the second:

you have to add cls:'x-border-box, x-border-box',
after add cls you code should be like this :
Ext.create('Ext.form.Panel', {
height: '15%',
width: $("#MainWindow_Right_Panel").width() - 20,
renderTo: 'FilterControl',
id: 'DatePicker_Panel',
border: 0,
items: [
{
xtype: 'datefield',
fieldLabel: 'To',
name: 'to_date',
style: 'float: right',
**cls:'x-border-box, x-border-box',**
id: 'todate',
padding: 5,
width: 130,
labelWidth: 30,
value: todate,
maxValue: today,
format: "d.m.Y",
layout: 'form',
listeners: {
select: function(combo, value) {
todate=value;
}
}
},
{
xtype: 'datefield',
fieldLabel: 'From',
style: 'float: right',
**cls:'x-border-box, x-border-box',**
labelWidth: 50,
width: 150,
name: '_fromdate',
padding: 5,
id: 'fromdate',
value:fromdate,
maxValue: today,
format: "d.m.Y",
layout: 'form',
listeners: {
select: function(combo, value) {
fromdate=value;
}
}
},
]
});

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.