Develop Reference

Container fixed position but only on horizontal scroll

I am trying to achieve a specific kind of layout. My effort so far can be previewed from this fiddle example.
Basically I need to make my left container (fixedContainer) with red border containers, to have fixed position and be fully visible when I scroll horizontally. But when I scroll vertically it needs to scroll normally with rest of the containers.
Current code:
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 700,
layout:'vbox',
scrollable:true,
items:[{
xtype:'container',
reference:'mainContainer',
layout:{
type:'hbox'
},
margin:10,
items:[{
xtype:'container',
reference:'fixedContainer',
style:'position:relative;',
defaults:{
style:'border: 1px solid red;',
left:100,
width:200,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
},{
xtype:'container',
reference:'scrollContainer',
defaults:{
border:true,
width:700,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
}]
}]
}).show();

If I understood what you are looking for, you need to change a few layouts in your code. First you need to make your window a layout: 'fit', so that it's child's fit into the window container.
Then set your mainContainer to a layout: border and set both the child panels to region: 'west' and region: 'center' respectively. This anchors your fixedContainer to the left and your scrollableContainer to the center.
Finnally, add the scrollable: "horizontal" property to your scrollableContainer to scroll horizontally.
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 700,
layout: 'fit', // Changed this
scrollable:true,
items:[
{
xtype:'container',
reference:'mainContainer',
layout: 'border', // Changed this
margin:10,
items:[
{
xtype:'container',
region:'west', // Added this
reference:'fixedContainer',
defaults:{
style:'border: 1px solid red',
width:200,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
},
{
xtype:'container',
region: 'center', // Added this
scrollable: "horizontal", // Added this
reference:'scrollContainer',
defaults:{
border:true,
width:700,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
}
]
}]
}).show();
EDIT1:
As #Evan Trimboli stated, the first code sample did not respect the vertical scrolling on panels overflow, this second sample sets the border layout to scroll vertically. The scrollContainer is wrapped into an additional container that will satisfy the vertical scroll. The remaining code stays the same from the initial answer.
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 700,
layout: 'fit', // Changed this
items: [{
xtype: 'container',
reference: 'mainContainer',
scrollable: 'vertical', // #edit1: Added this
layout: 'border', // Changed this
margin: 10,
items: [{
xtype: 'container',
region: 'west', // Added this
reference: 'fixedContainer',
defaults: {
style: 'border: 1px solid red',
width: 200,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}, {
html: 'panel5'
}]
}, {
xtype: 'container', //#edit1: New container here to satisfy the vertical scroll
region: 'center',
items: [{
xtype: 'container',
scrollable: "horizontal", // Added this
reference: 'scrollContainer',
defaults: {
border: true,
width: 700,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}, {
html: 'panel5'
}]
}]
}]
}]
}).show();

Ok this is my working solution for this issue
Ext.application({
name: 'Fiddle',
launch: function () {
var horizontalScroll = 0
var gridwindow = Ext.create('Ext.window.Window', {
referenceHolder: true,
title: 'Hello',
height: 500,
width: 700,
layout: 'vbox',
scrollable: true,
items: [{
xtype: 'container',
reference: 'mainContainer',
layout: {
type: 'hbox'
},
margin: 10,
items: [{
xtype: 'container',
reference: 'fixedContainer',
style: 'position:relative; z-index:10; box-shadow: -20px 0px 0px 1px #fff;',
defaults: {
style: 'border: 1px solid red; outline',
width: 200,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}]
}, {
xtype: 'container',
reference: 'scrollContainer',
defaults: {
border: true,
width: 700,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}]
}]
}]
}).show();
gridwindow.body.on('scroll', function (event) {
var scrollLeft = event.target.scrollLeft;
if (horizontalScroll !== scrollLeft) {
var fixedContainer = this.lookup('fixedContainer');
fixedContainer.el.translate((scrollLeft), 0)
}
horizontalScroll = scrollLeft;
}, gridwindow);
}
});
https://fiddle.sencha.com/#view/editor&fiddle/28ug
Thanks all for the effort. Hopefully this is good enough to help someone else with a similar problem.

Ext JS Checkbox in Roweditor

does anybody know how to set the checkbox in a RowEditor into the center position?
I use the theme "triton" with Ext JS 6.0.0.
The checkbox is placed to the top of the row, but the other fields like textfield or combobox are placed to center.
It looks like:
i already set the style object of the checkbox to align: center but it didn't work.
plugins: { ptype: 'rowediting', clicksToEdit: 2, saveBtnText: 'Übernehmen', cancelBtnText: 'Abbrechen' },
initComponent: function() {
var me = this;
me.store = 'MeasurementPoint';
me.columns = [
{
xtype: 'actioncolumn',
width: 50,
sortable: false,
hideable: false,
resizable: false,
menuDisabled: true,
draggable: false,
items: [
{
icon: 'Content/images/icon_32/garbage.png',
tooltip: 'Löscht den Eintrag',
handler: function(view, rowIdx, colIdx, item, ev, record) {
Ext.Msg.show({
title: 'Löschen bestätigen!',
msg: 'Soll der Messpunkt \"' + record.data.Name + '\" wirklich gelöscht werden?',
width: 300,
buttons: Ext.Msg.YESNO,
fn: function(btn) { if (btn === 'yes') view.ownerCt.getStore().remove(record); },
//animateTarget: rowIdx,
icon: Ext.window.MessageBox.QUESTION
});
}
},
{
icon: 'Content/images/icon_32/pencil.png',
tooltip: 'Bearbeitet den Eintrag',
handler: function(view, rowIdx, colIdx, item, ev, record) {
if (this.__form)
return;
this.__form = Ext.widget('window', {
layout: 'fit',
width: 500,
title: 'Messpunkt bearbeiten',
items: { xtype: 'measurementpointform', header: false },
}).show();
this.__form.down('button[itemId=save-measurementpoint]').action = 'update-measurementpoint';
this.__form.down('form').loadRecord(record);
this.__form.on('close', function() { this.__form = false }, this, { single: true });
}
}
]
},
{
xtype: 'gridcolumn',
dataIndex: 'Active',
text: 'Aktiv',
width: 70,
renderer: AWA.ImageRenderer.CROSS,
editor: {
xtype: 'checkbox',
}
},
{
xtype: 'gridcolumn',
dataIndex: 'Manually',
text: 'Manuell',
width: 90,
renderer: AWA.ImageRenderer.TICK,
editor: {xtype: 'checkbox'}
}
Thank you guys for helpful anwers

I have overwritten the CSS and it works for me
.x-grid-editor .x-form-cb-wrap {
vertical-align: middle;
}
Thanks

How to change column headers extjs

I'm trying to change the column title of a Ext.grid.Panel afterrender the grid.
I/m trying to change column by next
this.headerCt.getHeaderAtIndex(j).setText(column_.text);
After i click to the column-menu -> Columns, the new header value is not displayed,
but the column itself has the new header.
How can I solve this problem

change column headers index in extjs
Ext.onReady(function () {
var userStore = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{name:'name'},
{name:'email'},
{name:'phone'}
],
data: [
{name:'Anil',email:'AnilThakurr54#gmail.com',phone:'989681806'},
{name:'Sunil',email:'SunilkumarGmail.com',phone:'8053173589'},
{name:'Sushil',email:'Sushil#gmail.com',phone:'9896133066'},
{name:'Puneet',email:'PuneetChawla#gmail.com',phone:'9729810025'},
{name:'Rahul',email:'RahulSain#gmail.com',phone:'9050438741'},
{name:'Anil2',email:'Ak3217106#gmail.com',phone:'9729935023'},
]
});
Ext.create('Ext.window.Window', {
height: 250,
width: 400,
xtype: 'panel',
layout: 'fit',
title: 'Change Header Of Extjs Grid Column on Button Click',
items:
[
{
layout: 'border',
height: 350,
renderTo: Ext.getBody(),
items:
[
{
xtype: 'panel',
region: 'north',
layout:'fit',
items: [
{
xtype:'grid',
id: 'GridId',
store: userStore,
tbar: [{
text: 'Change',
iconCls: 'employee-add',
handler: function () {
var grid = Ext.getCmp('GridId');
grid.headerCt.getHeaderAtIndex(0).setText('test');
grid.headerCt.getHeaderAtIndex(1).setText('MobileNo');
},
},
{
text: 'by Default',
iconCls: 'employee-add',
handler: function () {
var grid = Ext.getCmp('GridId');
grid.headerCt.getHeaderAtIndex(0).setText('Name');
grid.headerCt.getHeaderAtIndex(1).setText('Email Address');
}
}],
columns: [
{
header: 'Name',
width: 100,
sortable:true,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex:'email',
},
{
header:'Phone Number',
flex: 1,
dataIndex:'phone'
}
]
}],
dockedItems: [
{
xtype:'pagingtoolbar',
itemId:'pagingLog',
store:userStore,
dock:'bottom',
displayInfo: true,
}]
}]
}]
}).show();
});

Drag and Drop issue in Rally Grid

I have an issue in my recent implemented Rally Grid.
_CreatePSIObjectiveGrid: function(myStore) {
if (!this.objGrid) {
var colCfgs = [{
text: 'ID',
dataIndex: 'DragAndDropRank',
width: 50
}, {
text: 'Summary',
dataIndex: 'Name',
flex: 1
}, {
text: 'Success Rate',
dataIndex: 'c_SuccessRate',
width: 200
}];
if (!this.getSetting("useSuccessRatioOnly")) {
colCfgs.push({
text: 'Initial Business Value',
dataIndex: 'PlanEstimate',
width: 200
});
colCfgs.push({
text: 'Final Business Value',
dataIndex: 'c_FinalValue',
width: 200
});
}
this.objGrid = Ext.create('Rally.ui.grid.Grid', {
store : myStore,
enableRanking: true,
defaultSortToRank: true,
height: 550,
overflowY: 'auto',
margin: 10,
showPagingToolbar: false,
columnCfgs : colCfgs
});
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
}
}
Although I have set "enableRanking" to "true", the ranking drag and drop doesn't work if I add my grid to a component. However, the drag and drop function does work perfectly if I change the last statement from
Ext.getCmp('c-panel-obj-crud-table').add(this.objGrid);
to
this.add(this.objGrid);
I don't know if this is a Rally bug. Try to compare the final html file generated, no clue is found.

this few sec video shows that the code below, where a rankable grid is added to a child panel, and not directly to this (this points to the app's global scope) still preserves its ability to rerank:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var panel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'panel',
title: 'Panel 1',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Panel 2',
width: 600,
itemId: 'childPanel2'
}
],
});
this.add(panel);
this.down('#childPanel1').add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Owner'
],
context: this.getContext(),
enableRanking: true,
defaultSortToRank: true,
storeConfig: {
model: 'userstory'
}
});
}
});

Extjs - Best way to show a tree in a window

Here's my tree panel that I'm using:
var tree = Ext.create('Ext.tree.Panel', {
store: mystore,
rootVisible: false,
useArrows: true,
frame: true,
title: 'Organization Tree',
renderTo: 'org-filter-window',
width: 600,
height: 400,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function () {
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function () {
tree.collapseAll();
}
}]
}]
});
and I have this window
var orgWindow = Ext.create("Ext.Window", {
store: myStoe,
title: 'Organization Tree',
width: 600,
height: 400,
html: '<div id="org-filter-window"></div>'
});
Not sure what the best way is to show a tree inside of a window. As you can see, I've tried rendering the tree panel inside the window html, and it works okay, but I'm not sure if this is the preferred way.
Version: Ext JS 4.0.7

How about:
var orgWindow = Ext.create("Ext.Window", {
store: myStoe,
title: 'Organization Tree',
width: 600,
height: 400,
items: tree // <--- the only change is here
});
and remove renderTo: 'org-filter-window', from the tree definition