Hello Guys im trying to add a horizontal scroll to my grid panel with overflowX: 'scroll',
i can see the scroll bar but it still don't function:
Ext.define('Shopware.apps.UnSqlReader.view.window.Window', {
extend: 'Enlight.app.Window',
alias: 'widget.main-window-view',
height: '80%',
width: 1200,
layout: 'fit',
title: '{s name=window_title}SQL Reader{/s}',
initComponent: function () {
var me = this;
me.items = me.getItems();
me.dockedItems = me.createDockedItems();
me.callParent(arguments);
},
createDockedItems: function () {
var me = this;
return [
{
width: 185,
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'combobox',
id: 'sqlField',
editable: false,
emptyText: 'Select SQL file',
displayField: 'name',
valueField: 'name',
store: Ext.create('Shopware.apps.UnSqlReader.store.UnSqlReaderFileList'),
listeners: {
change: function (field, newValue) {
me.fireEvent('onSqlChange', me, newValue);
}
}
}
]
}
];
},
getItems: function () {
var me = this;
me.grid = Ext.create('Ext.grid.Panel', {
alias: 'widget.view-grid-grid',
hidden: true,
layout: 'fit',
height: '80%',
width: 500,
overflowX: 'scroll',
autoScroll: true,
columns: [
],
dockedItems: [
me.getPagingbar()
]
});
return [me.grid];
},
getPagingbar: function () {
var me = this;
me.pagingBar = Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
displayInfo: true
});
return me.pagingBar;
}
});
anybody an idea? :) Thank U!
Don't mention overflowX: 'scroll', autoScroll: true, is enough to get horizontal scroll
Remove the layout: 'fit' config. The layout config is used for all childs items of the component where you configure it on. If you put layout: 'fit' on the window, this will be applied on all items in the item-arrray of that window. In your case the grid will get a fit layout (as configured on your window) and will automatically 'fit' to the size of the window. It will never get scrollable.
Try below code:
getItems: function () {
var me = this;
me.grid = Ext.create('Ext.grid.Panel', {
alias: 'widget.view-grid-grid',
columns: [
],
viewConfig:{
forceFit:false
},
dockedItems: [
me.getPagingbar()
]
});
return me.grid;
},
Related
This is my code:
var tablepnl = Ext.define('TablePanel', {
extend: 'Ext.form.Panel',
config: {
fullscreen: true,
layout: 'fit',
items: [{
xtype: 'titlebar',
docked: 'top',
height: 40,
title: 'Table Allocation',
items: [{some items}]
}, {
xtype: 'list',
store: tableAllocationStore,
itemTpl: tableTpl,
grouped: true,
pinHeaders: false,
listeners: {
itemsingletap: function (index, target, record, e, eOpts) {
//code
}
}
},
{
xtype: 'titlebar',
docked: 'bottom',
height: 40,
title: 'xyz'
}
]
},
constructor: function (config) {
this.callParent(config);
this.initConfig(config);
}
});
Ext.create('TablePanel');
}
});
Code is showing bottom and top title bar but list is not getting displayed. help guys
I have tried this but not working for me: https://www.sencha.com/forum/showthread.php?161490-List-not-showing
There is just a version issue, in your fiddle (https://fiddle.sencha.com/#fiddle/1d0a) you are using 2.1.1 please try using version 2.2.* your code will work.
I have a nested panel like:
Ext.define('Demo.view.example', {
extend: 'Ext.panel.Panel',
requires:[
'Ext.toolbar.Paging'
],
xtype: 'demo-view-example',
autoScroll: true,
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
frame: true,
initComponent: function() {
Id = this.Id;
var store = Ext.create('Demo.store.example');
store.proxy.url = store.proxy.url + this.Id;
Ext.apply(this, {
store: store
});
this.items = [],
this.bbar = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
listeners: {
beforechange: function(obj){
obj.up().removeAll();//to remove its children also
}
}
}),
this.callParent();
},
listeners: {
afterrender: function(obj){
var panel = Ext.create('Demo.view.example1',{
});
obj.add(panel);
obj.doLayout();
}
});
Here, I am adding a panel dynamically.In before change fuction, I am removing the component but It doesnot remove the children (nested panels).
Code for example1:
Ext.define('Demo.view.example1', {
extend: 'Ext.panel.Panel',
xtype: 'demo-view-example1',
autoScroll: true,
defaults: {
frame: false
},
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
initComponent: function() {
this.items = [{
xtype: 'demo-view-example2',
flex:2
}];
this.callParent();
if (this.requestId) {
var requestContainerPanel = Ext.create({
xtype: 'demo-view-example3',
flex: 6
});
this.add(requestContainerPanel);
}
this.doLayout();
}
});
Here, I am adding one static view(example3) and dynamic view(example4) both extends from Ext.panel.Panel
Question:
In view(example) In before Change function, I am removing the component but it only removes obj of example. I want to remove all the views(example,example1,example2,example3). how should I do it.
i am using a customized DataView in my app, this DataView was set to scroll vertically and been added into a panel later.
But now the DataView cannot scroll properly, the problem is:
when i drop down the DataView, it can scroll down, but when i release my finger, it scroll back to top automatically.
could anybody help to check what's the reason?
thanks~~
here is my codes:
==============The DataView==============
Ext.define("cherry.view.UserActivityList", {
extend: 'Ext.dataview.DataView',
xtype: 'user-activity-list',
requires: [
'cherry.store.UserActivityStore',
'Ext.dataview.DataView',
'Ext.XTemplate'
],
config: {
styleHtmlContent: true,
height: '100%',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="activity-ctn">',
' <div class="activity-content">{content}</div>',
'</tpl>'
)
},
initialize: function () {
this.callParent(arguments);
var me = this;
var store = Ext.getStore('user-activity-store');
store.load();
me.setStore(store);
}
});
============Panel contains the DataView============
Ext.define('cherry.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'cherry.view.ComposeToolbar',
'cherry.view.Menubar',
'cherry.view.UserActivityList'
],
config: {
layout: 'card',
id: 'main-container-view',
scrollable: null,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'cherry',
id: 'main-toolbar',
cls: 'main-toolbar',
items: [
{
xtype: 'button',
iconCls: 'menu2',
text: 'Menu',
iconMask: true,
handler: function () {
Ext.Viewport.toggleMenu('left');
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconCls: 'loop2',
text: 'Refresh',
iconMask: false,
handler: function () {
Ext.getStore('user-activity-store').load();
Ext.ComponentQuery.query('#user-activities-list-view')[0].refresh();
}
}
]
},
{
xtype: 'compose-toolbar'
},
{
xtype: 'user-activity-list',
id: 'user-activities-list-view',
itemId: 'user-activities-list-view',
layout: 'fit',
height:'100%',
cls:'dataview-ctn',
scrollable:{
direction:'vertical'
}
}
]
},
initialize: function () {
Ext.Viewport.setMenu(cherry.view.Menubar.createMenu('left'), {
side: 'left',
reveal: true
});
}
});
It seems that your error is due to the layout config in user-activity-list
{
xtype: 'user-activity-list',
id: 'user-activities-list-view',
itemId: 'user-activities-list-view',
layout: 'fit',
height:'100%',
cls:'dataview-ctn',
scrollable:{
direction:'vertical'
}
}
A dataview must ALWAYS! have its layout to Auto. As stated by the constructor, which by the way you should be seeing a log error.
constructor: function(config) {
var me = this,
layout;
me.hasLoadedStore = false;
me.mixins.selectable.constructor.apply(me, arguments);
me.indexOffset = 0;
me.callParent(arguments);
//<debug>
layout = this.getLayout();
if (layout && !layout.isAuto) {
Ext.Logger.error('The base layout for a DataView must always be an Auto Layout');
}
//</debug>
}
Try removing the layout config it should fix your error.
Cheers!
I have a grid in the center region of a border layout. When a specific item is clicked in the grid, I need to change the center region to display a tab panel. I am having trouble getting the tabpanel object.
In the ctrlpanel file, on the grid listener, I am using componentQuery to get the tabpanel('ccmain') object. It returns undefined.
I was using componentQuery to get 'ccmain' in the centerpanel file(lays out center region) successfully, but when I moved this code to the ctrlpanel file(one of the items in centerpanel) it fails. ComponentQuery no longer returns the tabpanel 'ccmain'. ComponentQuery does return the centerpanel or the viewport. I attemped to do centerpanel or viewport.down to find 'ccmain', but that also returns undefined. If you can tell me how to get the tabpanel or what I am doing wrong, I would appreciate it. Thanks for your time.
ctrlPanel.js
Ext.define('ServcSol.view.CtrlPanel',{
extend: 'Ext.Panel',
alias: 'widget.ctrlPanel',
xtype: 'ctrlPanel',
itemId: 'ctrlPanel',
requires:[
'ServcSol.store.FacilityStore'
],
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
height: 750,
title: 'Control Panel',
items: [
{
xtype: 'gridpanel',
padding: '20 20 5 20',
store: 'WorkHistoryStore',
height: 590,
width: '100%',
border: true,
columns: [
{
width: 110,
dataIndex: 'wrkhistDate',
text: 'Due Date'
},
{
width: 100,
dataIndex: 'wrkType',
text: 'Work Type'
}
],
listeners : {
itemclick: function(dv, record, item, index, e)
{
if(record.get('wrkType') == 'Test')
{
var tabPanel = Ext.ComponentQuery.query('ccmain')[0];
console.log('tabPanel is: ', tabPanel);
var tabIndex = tabPanel.items.findIndex('id', 'hazard');
var center = Ext.ComponentQuery.query('centerpanel')[0];
center.getLayout().setActiveTab(tabIndex);
}
ccmain.js
Ext.define('ServcSol.view.ccMain', {
extend: 'Ext.tab.Panel',
itemId: 'ccmain',
alias: 'widget.ccmain',
xtype: 'ccmain',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'facility'
},
{
xtype: 'hazListing'
},
{
xtype: 'hazard'
},
{
xtype: 'testFormRP'
},
{
xtype: 'testFormDC'
}
]
});
this.callParent(arguments);
}
});
One of the reasons can be that ccmain is not instantiated as only instantiated components can be found by ComponentQuery.query. Then, even if ccmain would be found you cannot set its active item that way. Easiest is to assign tabs itemIds and then call setActiveTab:
tabPanel.setActiveTab(itemIdOfTheTab)
What I'm trying to do is add a grid that is 65% width of the panel created in my app.js
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [ 'Metadata', 'Print', 'Export' ],
launch: function() {
var types = Ext.create('AM.store.Type');
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 1000,
height: 600,
title: '<center>MetaCenter</center>',
layout: 'hbox',
style: { marginLeft: 'auto', marginRight: 'auto' },
items: [
{ xtype: 'panel', padding: 5, height: 500, width: '35%',
items: [
...
{ xtype: 'button', text: 'Search',
listeners: {
click: function() {
console.log('Search Button clicked');
//Code to create panel view?
}
},
],
}
I'm not explicitly creating a viewport, so I don't believe I could do a viewport.add('grid') function, but I'm not sure. Any ideas?
You could add the grid when creating the container, with hidden: true, then show it when the button is clicked:
{
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'panel',
flex: 0.35,
items: [
...
{
xtype: 'button',
text: 'Search',
listeners: {
click: function(btn) {
btn.up('panel').nextSibling().show();
}
}
}
]
},
{
xtype: 'grid',
flex: 0.65,
hidden: true,
...
}
]
}