ExtJS grid panel with many columns - javascript

Need help with grid Panel which has lots of columns.
Panel looks like:
I would like to make grid panel holder height always "100%" of grid. That it would never had "y/height" scrollbar.
My view:
function createGridPanel(grid_panel_json) {
function createDataStore(data_store_json) {
return Ext.create('Ext.data.Store', {
fields:data_store_json.fields,
data:data_store_json.data
});
}
function getColumnsCount(columns) {
return columns.length;
}
function calculateTableWidth(columns) {
var tableWidth = 0;
for (var index in columns)
{
var columnWidth = columns[index].width;
if (columnWidth === -1)
{
tableWidth += 350;
}
else
{
tableWidth += columnWidth;
}
}
return tableWidth;
}
var grid = Ext.create('Ext.grid.Panel',
{
autoRender: true,
autoShow: true,
syncRowHeight: true,
overflowY: 'auto',
overflowX: 'auto',
autoHeight: true,
store: createDataStore(grid_panel_json.data_store),
hideHeaders: grid_panel_json.hideHeaders,
columns: grid_panel_json.columns,
allowDeselect: true,
layout:
{
type:'fit',
align:'stretch',
pack:'start'
}
});
var gridPanelHolder = new Ext.Panel(
{
title: grid_panel_json.title,
titleCollapse: true,
collapseDirection: 'top',
collapsible: grid_panel_json.collapsible,
style:
{
marginBottom: '5px'
},
items:[
grid
],
autoHeight: true,
autoWidth:true,
overflowY: 'auto'
});
if (getColumnsCount(grid_panel_json.columns) > 4)
{
grid.setWidth(calculateTableWidth(grid_panel_json.columns));
gridPanelHolder.setAutoScroll(true);
gridPanelHolder.doComponentLayout();
}
return gridPanelHolder;
}
any ideas how can i achieve it?
Tried lots of things with layout with overflow with autoHeight and none of them worked.
So any help would be very appreciated!
ExtJS 4.2.1

Related

Resize all the columns of multiple instances of ag-grid in a single page

i have a multiple instances of Ag-grid table in a single page, when i resize the browser window the columns are not automatically resizing to the width of table, we are using only one Ag-grid instance to show all the grids in a page but the grid resize(onGridReady event) is working, it working only for last loaded Ag-grid only , please help me in this, thanks
function loadaggrid(id,rowdata,columndata){
var gridOptions = {
defaultColDef:{
editable: false,
enableRowGroup:true,
enablePivot:true,
enableValue:true,
sortable: true,
resizable: true,
filter: true
},
autoGroupColumnDef: {
width: 180
},
animateRows: true,
debug: false,
suppressAggFuncInHeader: true,
sideBar: {
toolPanels: [{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {
suppressPivots: true,
suppressPivotMode: true,
}
}],
},
rowSelection: 'single',
columnDefs: cols,
rowData: data,
floatingFilter:true,
paginationAutoPageSize:true,
pagination: true,
onGridReady: function (params) {
window.onresize = () => {
setTimeout(function(){
params.api.sizeColumnsToFit();
},500);
}
},
onFirstDataRendered(params) {
params.api.sizeColumnsToFit();
}
}
new agGrid.Grid(id, gridOptions);
}
you need to implement different onGridReady functions for each grid.
//firstGridOptions:
onGridReady: (event) => {
console.log('this is for first grid');
this.firstGridApi.sizeColumnsToFit();
},
//secondGridOptions:
onGridReady: (event) => {
console.log('this is for second grid');
this.secondGridApi.sizeColumnsToFit();
},

Position a floating ext panel at the bottom left corner

New to ExtJS here. I'm trying to position a floating Ext.panel.Panel at the bottom left corner of the browser window but to no avail. Checkout the code snippets below and let me know what I'm doing wrong. Thanks in advance.
// JavaScript
Ext.define('examplePanel.view.ExamplePanel', {
extend: 'Ext.panel.Panel',
xtype: 'exPanel',
width: 138,
floating: true,
cls: 'example-panel',
closeAction: 'hide',
collapsible: true,
defaultAlign: 'bl-bl',
fixed: true,
border: true,
layout: {
type: 'vbox',
align: 'stretch'
},
header: {
title: 'Example',
titleAlign: 'center',
cls: 'panel-header'
},
items: [
// item 1
// item 2
]
});
// CSS
.example-panel {
position: fixed;
bottom: 0;
left: 0;
}
Here is a possible solution:
FIDDLE
Ext.application({
name : 'Fiddle',
launch : function() {
var panel = Ext.create({
xtype: 'panel',
title: 'Left Bottom',
frame: true,
renderTo: Ext.getBody(),
height: 200,
width: 400,
collapsible: true
});
//Get the doc measurements
var body = document.body;
var html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var width = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetWidth );
//Position the pnel
panel.setPosition((width - panel.getWidth()),(height - panel.getHeight()));
}
});

Draggable does not work in extjs6.5

I am using the below code -
afterListeners: function(thisEl, eOpts) {
sliderSprite = Ext.create('Ext.draw.sprite.Rect', {
width: spriteWidth, // half year width height : 20, x : 16, y : 0, draggable : true, floatable : true, 'stroke-width' : 2, fill : '#FCE5C5', stroke : '#C6B395' });
sliderSprite.show(true);
thisEl.getSurface().add(sliderSprite);
alert("before source");
new Ext.drag.Source({
element: sliderSprite,
constrain: {
// Drag only horizontal in 30px increments
horizontal: true, // snap: { // y: 30 // }
},
onDragMove: function() {
alert("inside source");
spriteHighlighter.remove();
me.onDragSprite(e, this, chartWidth, spriteWidth);
},
onDragEnd: function() {
me.refreshCharts(xPlots, bigChart, sliderSprite, firstYear, lastYear, chartWidth);
}
});
alert("outside source");
},
}
}
Now, the issue is, control doesn't go inside the Ext.drag.Source(). I get 2 alert messages ,before source and outside source. and because it doesn't go inside Ext.drag.Source().
The drag-able functionality of the element is not working. What should I do ?
First you need to be clear on which component you want to use. After that you need to put afterrender event on that component and inside of that event you can use Ext.drag.Source.
In this FIDDLE, I have created a demo using button and Ext.drag.Source.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
var buttons = [],
rendomColor = () => {
return "#" + ((1 << 24) * Math.random() | 0).toString(16);
};
for (var i = 0; i < 10; i++) {
buttons.push({
text: `Button ${i+1}`,
margin: 10,
style: `background:${rendomColor()}`
});
}
Ext.create({
xtype: 'panel',
height: window.innerHeight,
title: 'Ext.drag.Source Example',
defaults: {
xtype: 'button'
},
items: buttons,
renderTo: Ext.getBody(),
listeners: {
afterrender: function (panel) {
panel.items.items.forEach(item => {
new Ext.drag.Source({
element: item.el,
constrain: {
// Drag only vertically in 30px increments
//vertical: true,
snap: {
y: 1,
x: 1
}
}
})
})
}
}
});
}
});

On selection of row in ext js grid checkbox gets selected

I am using Ext.grid.CheckboxSelectionModel with Ext.grid.GridPanel to display grid with checkbox column.
But when I am clicking on row checkbox also get seleted.
I want checkbox should not get selected while selecting row of grid.
Is there any way to achieve this.
Below is my code snippet.
var cboxSelModel =new Ext.grid.CheckboxSelectionModel({
checkOnly : true,
width:100,
header: defaultVal,
id: 'test',
locked: true,
singleSelect: true,
listeners: {
rowselect: function (sm, rIndex, keepExisting, record) {
uncheckIndex = -1;
cIndex =rIndex;
updateDefaultValue();
},
rowdeselect: function (sm, rIndex, keepExisting, record) {
cIndex = -1;
uncheckIndex =rIndex;
updateDefaultValue();
}
}
});
grid = new Ext.grid.GridPanel({
id:'grid',
width:'99%',
border:true,
store: store,
tbar: toolBar,
autoscroll: false,
height :'100px',
autoHeight :false,
sm: cboxSelModel,
cm :cm,
height:150,
layout: 'fit',
stateful: true,
stateId: 'grid',
autoScroll:true,
enableColumnResize : false,
enableColumnMove : false,
viewConfig:{
forceFit:true,
scrollOffset:0
},
autoFitColumns: true,
listeners: {
afterrender: function() {
setSelectedRows();
var store=grid.getStore();
if(store.data.length > 0 ){
Ext.getCmp('btnSort').setDisabled(false);
Ext.getCmp('btnSort').setIconClass('bmcSort');
}
},delay: 1000,
cellClick :function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
storeindex = iCellEl;
var record = grid.store.getAt(iCellEl);
var dValue=record.get('displayValue');
var sValue=record.get('storedValue');
var dataArray = getListData();
sValue=dataArray[iCellEl][1];
sValue = Ext.util.Format.htmlDecode(sValue);
dValue = Ext.util.Format.htmlDecode(dValue);
document.getElementById(InputPageComp.ComponentVars.storedValue).value=sValue;
document.getElementById(InputPageComp.ComponentVars.displayValue).value=dValue;
document.getElementById('addbtn_id').style['display']= 'none';
document.getElementById('updatebtn_id').style['display']= 'block';
Ext.getCmp('btnRemove').setDisabled(false);
Ext.getCmp('btnRemove').setIconClass('bmcDeleteSLT');
grid.getSelectionModel().selectRow(iCellEl);
}
}
});
var sm = Ext.create('Ext.selection.CheckboxModel',{
checkOnly: true
});
I have tested. It should work
Try like this (in grid configs):
selModel: {
selType: 'checkboxmodel',
checkOnly: true
}
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1ncs

how to vary splitter height dynamically in kendoUI splitter

I am using kendoUI splitter.In the left side I have a panel bar and in the right side I have the tabs.I want to increase the splitter height dynamically with the tab content height ,can any one help me how to do this.
I have defined like
$("#splitter").kendoSplitter({ //To Display horizantal splitter
panes: [
{ collapsible: true, size: "50%" },
{ collapsible: true, size: "50%" }],
orientation: "horizontal",
resize: function () {
alert($("#splitter").find(".k-pane")[1].scrollHeight);
//$("#splitter").css("height", $("#splitter").find(".k-pane")[1].scrollHeight);
}
});
but I am gettting "0" in the alert.
You should try the following:
var splitter = $("#splitter").kendoSplitter({ //To Display horizantal splitter
panes: [
{ collapsible: true, size: "50%" },
{ collapsible: true, size: "50%" }],
orientation: "horizontal",
resize: function () {
if(splitter) {
alert(splitter.wrapper.height());
}
//you can also get the panes each on it's own.
//check: console.log(splitter); to see what options are available
}
}).data('kendoSplitter');
splitter.trigger('resize');
Also look at the docs.
JsFiddle

Categories