I have view like this :
Ext.define('Example.demo.CycleInfo', {
extend: 'Ext.panel.Panel',
requires:[
'Ext.layout.container.Accordion'
],
xtype: 'cycleinfo',
title: 'All Data',
defaults: {
frame: true,
bodyPadding: 5
},
initComponent: function() {
data = this.data
Ext.apply(this, {
items: [{
layout: 'accordion',
frame: true,
bodyPadding: 5,
items: [{
xtype:'structure'
},
{
title: 'Requests',
html: 'Empty'
}]
}]
});
this.callParent();
}
});
Here there are two accordian (one included item and other Requests) they are static .. I want based on this.data value(contains length) It should have accordian in the inner items. How should I do it.
If you want to add more panels to your main container with accordion layout, this should work:
Ext.define('Example.demo.CycleInfo', {
extend: 'Ext.panel.Panel',
requires:[
'Ext.layout.container.Accordion'
],
xtype: 'cycleinfo',
title: 'All Data',
defaults: {
frame: true,
bodyPadding: 5
},
initComponent: function() {
me = this;
Ext.apply(me, {
items: [{
layout: 'accordion',
frame: true,
bodyPadding: 5,
items: [{
title: 'Testing...',
html: 'This is a test panel'
},{
title: 'Requests',
html: 'Empty'
}]
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'footer',
items: ['->',{
text: 'Add panel',
handler: function() {
this.up().up().down('panel').add({
title: 'New Panel',
html : 'New Content'
})
}
}]
}]
});
this.callParent();
}
});
Ext.create('Example.demo.CycleInfo',{
renderTo: Ext.getBody(),
width: 500,
height: 500
});
Ext.define('CycleInfo', {
extend: 'Ext.panel.Panel',
requires:[
'Ext.layout.container.Accordion'
],
xtype: 'cycleinfo',
title: 'All Data',
width : 400,
height : 500,
defaults: {
frame: true,
bodyPadding: 5
},
layout: 'accordion',
initComponent: function() {
this.tbar = [{
text : 'Add Panel To Accordion',
handler : function(){
this.add({
xtype:'panel',
html: 343434
});
},
scope:this
}];
this.callParent();
}
});
Ext.create('CycleInfo',{renderTo:Ext.getBody()});
In your case you must change **xtype** in initComponent all is well
Related
Please consider two modal windows that refer to the common container with the group of radiofield in the below fiddle.
https://fiddle.sencha.com/#view/editor&fiddle/3e45
Initially, the first radio R1 is correctly checked in containers of both windows. However, checking any radiofield on one of the windows unselects all the radiofield items on another window.
Two windows contain independent instances of the container, so it's unclear how they can affect each other. This behavior is not happening with any other elements (e.g. checkboxes), only radios.
Any ideas are very much appreciated.
Put/wrap your radio fieldset in form panel, in this case it will keep the value (yourForm.getValues()):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('fsContainerHandler', {
extend: 'Ext.app.ViewController',
alias: 'controller.fsContainerHandler'
});
Ext.define('fsContainer', {
extend: 'Ext.form.Panel', // ---== Extending form now. ==---
xtype: 'xFSContainer',
sfx: '',
controller: 'fsContainerHandler',
items: [{
xtype: 'fieldset',
title: 'myFieldset',
reference: 'fsRef',
flex: 1,
items: [{
xtype: 'radiofield',
checked: true,
name: 'myRadio',
boxLabel: 'R1'
}, {
xtype: 'radiofield',
checked: false,
name: 'myRadio',
boxLabel: 'R2'
}, {
xtype: 'radiofield',
checked: false,
name: 'myRadio',
boxLabel: 'R3'
}]
}]
});
Ext.define('mainContainerHandler', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainContainerHandler',
singleton: true,
onButton1Click: function () {
var win = this.getView().window1;
win.show();
},
onButton2Click: function () {
var win = this.getView().window2;
win.show();
}
});
Ext.define('mainContainer', {
extend: 'Ext.container.Container',
width: 400,
height: 400,
controller: 'mainContainerHandler',
window1: null,
window2: null,
initComponent: function () {
this.window1 = Ext.create('window1');
this.window2 = Ext.create('window2');
this.callParent(arguments);
},
items: [{
xtype: 'button',
text: 'Window 1',
reference: 'btn1',
handler: mainContainerHandler.onButton1Click,
scope: mainContainerHandler
}, {
xtype: 'button',
text: 'Window 2',
reference: 'btn2',
handler: mainContainerHandler.onButton2Click,
scope: mainContainerHandler
}]
});
Ext.define('window1', {
extend: 'Ext.window.Window',
title: 'Window1',
modal: true,
width: 400,
height: 400,
closeAction: 'hide',
referenceHolder: true,
items: [{
xtype: 'xFSContainer',
reference: 'theContainer'
}]
});
Ext.define('window2', {
extend: 'Ext.window.Window',
title: 'Window2',
modal: true,
width: 400,
height: 400,
closeAction: 'hide',
referenceHolder: true,
items: [{
xtype: 'xFSContainer',
reference: 'theContainer'
}]
});
Ext.create('mainContainer', {
renderTo: document.body
});
}
});
Not sure why I'm getting an empty viewport. I am defining subclasses as components and trying to get the viewport to display the 2 components created. Seems simple enough yet coming up empty?
Ext.define('MyApp.view.MyHeader', {
extend: 'Ext.Container',
items: [{
xtype: 'titlebar',
title: 'Logo',
titleAlign: 'left',
cls: 'im-titlebar',
dock: 'top',
id: 'titlebar',
items: [
{
xtype: 'button',
text: 'Log In',
align: 'right',
ui: 'action',
margin: '',
ariaRole: 'button',
cls: 'btn-im-login action noprint',
id: 'button_LogIn'
}
]
}]
});
Ext.define('MyApp.view.MyFooter', {
extend: 'Ext.Container',
items: [{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Button',
align: 'right',
ui: 'action',
ariaRole: 'button',
cls: 'btn-im-login action noprint',
id: 'button_Button'
}]
}]
});
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Container',
requires: ['MyApp.view.MyHeader', 'MyApp.view.MyFooter']
});
Ext.Loader.setConfig({
enabled: false
});
Ext.application({
name: 'MyApp',
launch: function () {
Ext.Viewport.add(Ext.create('MyApp.view.MyView'));
}
});
See fiddle
You're trying to require views, but you should add it to parent view by items array.
Ext.define('MyApp.view.MyHeader', {
extend: 'Ext.Container',
xtype: 'myheader',
items: [{
xtype: 'titlebar',
title: 'Logo'
}]
});
Ext.define('MyApp.view.MyFooter', {
extend: 'Ext.Container',
xtype: 'myfooter',
items: [{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Button'
}]
}]
});
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Container',
xtype: 'myView',
height: 100,
items: [{
xtype: 'myheader'
}, {
xtype: 'myfooter'
}]
});
Ext.application({
name: 'MyApp',
launch: function () {
Ext.Viewport.add({
xtype: 'myView'
});
}
});
Remember - classic toolkit does not have Ext.Viewport class.
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
bodyPadding: 20,
tbar: {
items: [{
xtype: 'label',
text: 'Header'
}]
},
bbar: {
items: [{
xtype: 'label',
text: 'footer'
}]
},
items: [{
xtype: 'form',
title: 'My Form',
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'someField'
}]
}]
});
}
});
Your code does what you have defined.
You need to add the Header and Footer components as items.
I would suggest that you may try to to use a panel and / or use tbar, bbar or header configs available there.
docs:
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-dockedItems
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-header
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-bbar
Ext.application({
name: 'MyApp',
launch: function () {
var f = Ext.create('MyApp.view.MyHeader', {
flex: 1
});
var h = Ext.create('MyApp.view.MyFooter', {
flex: 1
});
Ext.Viewport.add(Ext.create('MyApp.view.MyView', {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [h, f]
}));
}
});
file custom.js
Ext.define('BookApp.view.Customs', {
extend: 'Ext.container.Container',
requires:['BookApp.controller.MainController'],
xtype: 'customs',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
bind: {
title: '{name}'
},
region: 'west',
html: '<ul>...</ul>',
width: 250,
split: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Tab 1',
html: '<h2>Content ...</h2>'
}]
}]
});
I have controller MainController
Ext.define('BookApp.controller.MainController', {
extend: 'Ext.app.Controller',
requires: [
'Ext.MessageBox'
],
//alias!!!!
alias: 'controller.main',
onClickButton: function () {
Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm: function (choice) {
if (choice === 'yes') {
console.log('ALALA')
}
}
});
but when i click on button with property :
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
Error :
Uncaught TypeError: undefined is not a function
Have a look at http://docs.sencha.com/extjs/5.0/application_architecture/view_controllers.html
All that was wrong was that you were extending Ext.app.Controller instead of Ext.app.ViewController
Here is a slightly simplified version excluding the viewModel binding
//app.js
Ext.application({
name: 'BookApp',
launch: function() {
Ext.create('BookApp.view.Customs', {
fullscreen: true
});
}
});
....
controller/MainController.js
Ext.define('BookApp.controller.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onClickButton: function() {
Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm: function(choice) {
if (choice === 'yes') {
console.log('ALALA');
}
}
});
.....
view/view.Customs.js
Ext.define('BookApp.view.Customs', {
extend: 'Ext.container.Container',
xtype: 'customs',
controller: 'main',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: 'testPanel',
region: 'west',
html: '<ul>...</ul>',
width: 250,
split: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
}, {
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'Tab 1',
html: '<h2>Content ...</h2>'
}]
}]
});
Demo: https://fiddle.sencha.com/#fiddle/gdu
SOLUTION:
To better show the problem our actual code was facing, the following code works.
The keys for me to get this to work were to give border layout an 'align' config of stretch, and to ensure that containers had 'flex' config of 1 where necessary.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{text: 'First Name'}],
store: Ext.create('Ext.data.Store', {fields: ['fname']})
});
Ext.define('MyView', {
extend: 'Ext.container.Container',
alias: 'widget.myView',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myGrid',
title: 'My First Grid',
flex: 7,
bodyStyle: {
backgroundColor: '#ff0000'
}
}, {
xtype: 'myGrid',
title: 'My Second Grid',
flex: 3,
bodyStyle: {
backgroundColor: '#0000ff'
}
}]
});
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
layout: {
type: 'border',
align: 'stretch'
},
items: [{
xtype: 'container',
region: 'center',
itemId: 'gridsContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myView',
flex: 1
}]
}]
}]
});
});
ORIGINAL POST:
In the code below, if you replace:
Ext.create('Ext.container.Container'
with:
Ext.create('Ext.container.Viewport'
The grids correctly occupy 70%/30% of the available area.
But when the code has Container and not Viewport, the grids are very small.
Of course my real code is within a larger application, so I cannot use a Viewport at that point, I must use container.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{
text: 'First Name',
dataIndex: 'fname'
}],
store: Ext.create('Ext.data.Store', {
fields: ['fname']
})
});
Ext.onReady(function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
autoScroll: true,
bodyPadding: 0
},
items: [{
xtype: 'myGrid',
itemId: 'grid1',
flex: 7
}, {
xtype: 'splitter'
},{
xtype: 'tabpanel',
itemId: 'mypanel',
width: 400,
height: 400,
renderTo: document.body,
flex: 3,
scroll: true,
resizable: false,
activeTab: 0,
items: [{
xtype: 'myGrid',
itemId: 'tabgrid1',
title: 'My Grid Tab One'
},{
xtype: 'myGrid',
itemId: 'tabgrid2',
title: 'My Grid Tab Two'
}],
tabBar:{
//plain:true,
items:[{
xtype: 'tbfill'
},{
text:'????',
xtype:'image',
src: 'panelCollapseBtn.png',
closable: false,
listeners:{
'afterrender':function (comp) {
comp.getEl().on('click', function (el) {
// alert(comp.up('#mypanel').getCollapsed());
var panel = comp.up('#mypanel');
var isCollapsed = panel.getCollapsed();
//alert('is collapsed: ' + isCollapsed);
panel.header = !isCollapsed;
//panel.collapsible =isCollapsed;
comp.setSrc(isCollapsed?"panelCollapseBtn.png":"panelExpandBtn.png");
panel.toggleCollapse();
}, this);
comp.getEl().on('mouseover', function (el) {
el.target.style.cursor = "pointer";
}, this);
}
}
}]
}
}]
}]
});
});
Here my code in sencha for my applicaiton,I have included table and two buttons in resetpanel and addded into tab view
var tab= Ext.create('Ext.List', {
fullscreen: true,
dock: 'left',
width: 320,
height: 200,
ui: 'round',
store: {
fields: ['ext_xtype'],
data: [{
ext_xtype: 'fieldset',
}, {
ext_xtype: 'formpanel',
}]
},
itemTpl: '<span style="width:300px; display:inline-block;">{ext_xtype}</span> '
});
var resetPanel1 = new Ext.form.FormPanel({
id: 'resetPanel1',
style:{background:'#D8D8D8'},
dockedItems:[]
,
items: [tab,{
xtype: 'button',
text: 'Add',
ui: 'confirm',
handler: function() {
view.setActiveItem('welcomepanel', {type:'fade', direction:'left'});
}
},{
xtype: 'button',
text: 'Add',
ui: 'Search',
handler: function() {
view.setActiveItem('welcomepanel', {type:'fade', direction:'left'});
}}]});
var view = Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
scroll:'vertical',
items: [{
title: 'ITEMS',
iconCls: 'star',
layout:'card',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Add Items',
},resetPanel1
]
}]
});
Ext.Viewport.add(view);
}
});
The resetPanel1 is not viewing in tab view.Whats wrong with my code.Please help me to sort it out.
Remove the fullscreen and dock properties from the list, you should have fullscreen : true only in the main view, In your case TabPanel.
var tab= Ext.create('Ext.List', {
width: 320,
height: 200,
ui: 'round',
store: {
fields: ['ext_xtype'],
data: [{
ext_xtype: 'fieldset',
},{
ext_xtype: 'formpanel',
}]
},
itemTpl: '<span style="width:300px; display:inline-block;">{ext_xtype}</span>'
});