I need to set horizontal scrolling to an ExtJS tbar which contains buttons in a row that are not visible in the end. Following is the code.
Ext.define('myProject.view.accounts.user.UserGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.usergrid',
minHeight: 400,
margin: '0,5,0,5',
title: 'User Accounts',
region: 'center',
cls: 'grid-with-footer',
scroll: 'vertical',
bind: {
...
},
initComponent: function() {
...
Ext.applyIf(me, {
columns: [{
...
}],
features: [{
...
}],
tbar: [{ // <-- this should be horizontally scrollable.
...
}],
bbar: {
...
}
});
this.callParent();
}
});
(I'm using ExtJS 4.2.1)
Instead of using tbar, you can add it as a dockedItem, which allows for more configs
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
overflowX: 'scroll', // <---- This allows horizontal scroll
items: [
.....
]
}]
You can view this in a fiddle here
(edit: fiddle was in ExtJS 6.2 instead of 4.2, whoops)
Related
I trying renderTo a panel(Ext.panel with title:'titlet' in the end of code) to the mainView ('Foresto.view.main.Main') or to a part of courusel (id:'mapId') But i havn't got a positive result.
So my quistions:
1) How to render panel to the mainview or to a courusel item ('mapId')
2)What mains approaches in Ext JS 6+, modern toolkit, for render object to the mainview or mainview's elements??
Now my code looks like that:
Ext.define('Foresto.view.main.Main', {
extend: 'Ext.form.Panel',
id:"control-panel",
plugins: 'responsive',
responsiveConfig:{
tall:{
tabPosition:'center'
}
},
xtype: 'app-main',
controller:'menuform',
requires: [
'Foresto.view.map.Map',
'Foresto.view.main.ButtonController',
'Foresto.view.forms.LoginRoom'
],
autosize:true,
padding: 0,
id:"bighBox",
header: {
cls: 'header-cls',
title : {
cls : 'header-title-cls',
text : 'FOREST'
}
},
tools: [{
type: 'menu',
handler: function() {
Ext.Viewport.toggleMenu('top');
}
}],
items:[{
xtype: 'carousel',
id: "mainPart",
flex: 1,
defaults: {
border: true,
ui: 'light'
},
items: [{
title: 'MAP',
id:'mapId',
xtype: 'panel',
layout:'vbox',
padding: 0,
items: [{
xtype: 'panel',
title:'PLACEFORMAP'
}]
},{
title: 'REPORTS',
xtype: 'panel',
cls: 'foresBack',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items:[{
xtype:'button',
cls:'threethbutton',
ui: 'confirm',
text:'REPORT1',
margin:'10px'
},{
xtype:'button',
cls:'threethbutton',
ui: 'confirm',
text:'REPORT2'
}]
}]
}
],
initialize: function() {
Ext.Viewport.add({
xtype:'button',
id:'pan11111',
text:'KAB',
flex:1,
height: 1000,
width: 100,
items:[{
xtype:'tabpanel',
title:'Projects',
layout:'card',
items:[{
xtype:'panel',
title:'11111'
},{
xtype:'panel',
title:'uuuuu'
}]
}]
});
}
}});
now I edit function for rendering panel on viewport. Panel 'pan11111' is rendering, bu viewport cover all other elements, and I can work only with panel and white board viewport, witch cover all classes: –THIS problem was solved by great clearning of coockies
I am new to Ext.js & am having some issues scrolling a nested form on mobile devices. I have a grid panel & a form panel both inside the 'center' panel & I hide one depending on which selection was chosen in west panel. The grid section works fine (& scrolls in mobile thanks to the bufferedrenderer plug-in.) but I can't get the form to. It scrolls fine in desktop view & it even scrolls when I preview the mobile view in Chrome dev tools but when I try to use it on an actual device, there are no scroll bars & I can not drag the screen either. I've tried so many different ways but here's the gist of what I have. Any suggestions are appreciated.
Ext.define('App.view.main.Main', {
extend: 'Ext.container.Container',
plugins: ['viewport', 'responsive'],
xtype: 'app-main',
autoscroll: true,
defaults: {autoscroll: true},
overflowY: 'auto',
responsiveConfig: {
tall: {
layout: {
type: 'auto'
}
},
wide: {
layout: 'border'
}
},
items [{
xtype: 'panel',
region'north'
},{
xtype: 'panel',
region'west'
},{
xtype: 'panel',
region:'center'
autoscroll: true,
layout: 'fit',
items: [{
xtype: grid,
......
},{
xtype: 'form',
layout: 'fit',
height: '500',
autoscroll: true, //this does nothing??
overflowY: auto, //this does nothing either???
responsiveConfig: {
wide: {
layout: 'hbox'
},
tall: {
layout: 'auto'
}
},
layout: {
type: 'box',
align: 'stretch'
},
items: [{
xtype: 'textfield'
},{
xtype: 'textfield'.....
}]
}]
}]
I wish to have the same form panel in each tab of the tabbed pannel. Is there a way that the same code is run for each tab without having to copy the code in the items list since that would be redundant.
Here is one way to do it -
You'll normally define a tabpanel and you give multiple panels as an array of items. For each of the panel inside the item, give the same panel container that you define below as the item.
{
xtype: 'tabpanel',
itemId: 'myTabPanel',
activeTab: 0,
plain: true,
items: [{
xtype: 'panel',
itemId: 'tab1',
layout: 'fit',
title: 'Strategies',
items: [{
xtype: 'myTabContainer'
}],
tabConfig: {
xtype: 'tab',
closable: false
}
}, {
xtype: 'panel',
itemId: 'tab2',
layout: 'fit',
title: 'Action Sets',
items: [{
xtype: 'myTabContainer'
}]
}],
listeners: {
tabchange: 'tabChangeListener' // define this and handle the actions for your tab change event
}
}
And here is a sample definition of the container/content for the tab. You can note that I'm using the alias for this container "myTabContainer" as xtype in each of the tabs above. This will make sure that the same view is linked to both the tabs.
Ext.define('MyTabContainer', {
extend: 'Ext.panel.Panel',
alias: 'widget.myTabContainer',
requires: [
// give all required classes
],
viewModel: {
type: 'dfstrategiesmaincontainer'
},
itemId: 'tabContent',
layout: 'border'
// Define all other required items and contents
}
Define a form and set that form as an item in each tab.
//Define the form
Ext.define('App.view.MyForm', {
extend:'Ext.form.Panel',
alias: 'widget.myform',
bodyPadding:10,
items: [....]
});
//Use the form as an item in each tab
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Tab1',
xtype: 'myform'
}, {
title: 'Tab2',
xtype: 'myform'
}]
});
I am making the screen as in picture and as in code below. Note that the vertical scrolling is only functional on the listview. Is there a way in which I can make the vertical scrolling operate across the entire window - so that the picture and the profile text on top disappear and not stay in the viewport always when scrolling?
Ext.define('Volt.view.FeedView', {
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'Ext.Button',
'Ext.Toolbar',
'Volt.view.FeedListView'
],
xtype: 'feedViewCard',
config: {
iconCls: 'home',
title: 'FeedView',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
title: 'Home',
docked: 'top',
items: [
//2 buttons here
]
},
{
// profile summary at top
xtype: 'container',
flex: 1,
layout: 'hbox',
items:[
{
//picture of user
xtype: 'image',
src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
flex: 1
},
{
//text and EM count
xtype: 'container',
flex:2,
html:'profile text and earthmiles count'
}
]
},
{
xtype: 'list',
//more code here
}
]
},
});
Make the whole panel scrollable, like this:-
Ext.define('Volt.view.FeedView', {
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'Ext.Button',
'Ext.Toolbar',
'Volt.view.FeedListView'
],
xtype: 'feedViewCard',
config: {
iconCls: 'home',
title: 'FeedView',
scrollable: 'vertical', // or true
...
I have 3 grids within an accordion container.
I add the resizable property to true to all 3 grids.
But when I try to resize any of the Grids, they are instead dragged up or down, instead of growing, and taking up the space.
What could be wrong?
Ext.define('MCS.view.task.Mygrid', {
requires: ['MCS.view.task.Mytoolbar'],
extend: 'MCS.view.base.grid',
alias: 'widget.myGrid',
itemId: 'myGrid',
stateId: 'myGrid',
iconCls: 'icon-application',
cls: "mcs-header2 mcs-accordion-item x-docked-noborder-top mcs-border-bottom",
bodyCls: "mcs-grid-body",
collapsible: true,
border: true,
hideMode: 'offsets',
resizable: true,
flex: 1,
store: 'task.My',
viewConfig: {
loadMask: false
},
dockedItems:
[
//stuff here
]
});
Accordion ( the 3rd grid is added dynamically to the bottom of the accordion )
xtype: 'container',
flex: 3,
layout: { type: 'accordion', border: false, multi: true, fill: false },
items: [
{ xtype: 'myGrid' },
{ xtype: 'pendingGrid' }
]