I have 5 columns on my grid, and I want to disallow users to be able to drag the columns on the right of the middle column to the left, and same goes disallow columns on the left dragged to the right.
My fiddle: https://fiddle.sencha.com/#fiddle/10ei
I have a column called No Crossing Zone, how I can disallow id and name from dragged to the right side of the No Crossing Zone, and disable Group 1 and Group 2 to the left side of the No Crossing Zone?
I can add any new key:value pairs to the data set if needed.
With this code, the column right of the No Crossing Zone will be moved back right of it if it is moved left of it. And vise versa:
1st solution:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.grid.Panel', {
columns: [
{
text: 'Id'
},
{
text: 'Name'
},
{
text: 'No Crossing Zone',
draggable: false
},
{
text: 'Group 1',
},
{
text: 'Group 2',
}],
listeners:{
columnmove: function (ct, column, fromIdx, toIdx, eOpts) {
var noCrossCol = undefined,
crossCol = undefined,
i = 0;
Ext.each(ct.getGridColumns(), function(col) { // There may be a better way to get "crossColIdx" and "crossCol"...
if(col.text == 'No Crossing Zone') {
crossColIdx = i;
crossCol = col;
return false;
}
i++;
});
console.log("fromIdx: " + fromIdx + "; toIdx: " + toIdx);
if((fromIdx <= crossColIdx) && (toIdx > crossColIdx)) {
console.log("moved too far");
ct.moveBefore(column, crossCol);
}
if((fromIdx >= crossColIdx) && (toIdx < crossColIdx)) {
console.log("moved too near");
ct.moveAfter(column, crossCol);
}
}
},
renderTo: Ext.getBody()
})
}
});
Second solution:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.grid.Panel', {
columns: [{
text: 'left part',
sealed: true,
columns: [{
text: 'Id'
}, {
text: 'Name',
sealed: true,
columns: [{
text: 'Sub 1'
}, {
text: 'Sub 2'
}]
}]
}, {
text: 'No Crossing Zone',
draggable: false
}, {
text: 'right part',
sealed: true,
columns: [{
text: 'Group 1',
sealed: true,
columns: [{
text: 'Sub 1'
}, {
text: 'Sub 2'
}]
}, {
text: 'Group 2',
sealed: true,
columns: [{
text: 'Sub 1'
}, {
text: 'Sub 2'
}]
}]
}],
flex: 1,
renderTo: Ext.getBody()
})
}
});
You could even delete the No Crossing Zone column.
(Edited after request in the comments)
Related
I have been trying to get this list to sort on the Total Column. Unfortunately, it does not do so.
Researching, I found that rendered values do not sort. Can anyone give a workaround/solution to this? I will be sending the data through PHP so if necessary, I can sort it there first.
Any help, including half-baked ideas, are welcome.
FIDDLE
Problematic Column:
{
text: 'Total',
flex: 1,
dataIndex: 'sum',
notDirty: true,
renderer: function (t, meta, record) {
var data = record.getData();
var sum = 0;
sum += +data.r1 + +data.r2 + +data.r3 + +data.r4 + +data.r5 + +data.r6;
return sum;
}
}
You can use convert function for field.
A convert function which converts the value provided by the Reader into an object that will be stored in the Model.
I have modified in your code it is working. You can check here fiddle.
//this function will calculate some all numeric columns
function calculateSum(rec) {
var sum = 0;
sum += +rec.get('r1') + +rec.get('r2') + +rec.get('r3') + +rec.get('r4') + +rec.get('r5') + +rec.get('r6');
return sum;
}
//Create store
Ext.create('Ext.data.Store', {
storeId: 'demoStore',
fields: ['team', 'r1', 'r2', 'r3', 'r4', 'r5', 'r6', {
name: 'sum',
convert: function (v, rec) {
return calculateSum(rec);
}
}],
data: {
'items': [{
team: 'Brookings 1',
r1: '0',
r2: '0',
r3: '0',
r4: '0',
r5: '6',
r6: '5'
}, {
team: 'Washington 1',
r1: '0',
r2: '0',
r3: '0',
r4: '0',
r5: '0',
r6: '0'
}, {
team: 'Sioux Valley 1',
r1: '0',
r2: '0',
r3: '0',
r4: '0',
r5: '0',
r6: '0'
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
//Common numberfield object
var editor = {
xtype: 'numberfield',
minValue: 0,
listeners: {
change: function (cmp, newValue, oldValue) {
var gridColumn = this.up(),
dataIndex = gridColumn.editingPlugin.activeColumn.dataIndex,
selctedData = gridColumn.up('grid').getSelectionModel().getSelection()[0];
gridColumn.cellTextValue = newValue;
selctedData.set(dataIndex, newValue);
selctedData.set('sum', calculateSum(selctedData));
}
}
};
//Create Grid
Ext.create('Ext.grid.Panel', {
title: 'Total count sorting',
margin: 10,
store: Ext.data.StoreManager.lookup('demoStore'),
plugins: Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
}),
columns: [{
text: 'Team',
dataIndex: 'team',
}, {
text: 'Round 1',
flex: 1,
dataIndex: 'r1',
editor: editor
}, {
text: 'Round 2',
flex: 1,
dataIndex: 'r2',
editor: editor
}, {
text: 'Round 3',
flex: 1,
dataIndex: 'r3',
editor: editor
}, {
text: 'Round 4',
flex: 1,
dataIndex: 'r4',
editor: editor
}, {
text: 'Round 5',
flex: 1,
dataIndex: 'r5',
editor: editor
}, {
text: 'Round 6',
flex: 1,
dataIndex: 'r6',
editor: editor
}, {
text: 'Total',
flex: 1,
dataIndex: 'sum',
notDirty: true,
/* renderer: function (t, meta, record) {
var data = record.getData();
var sum = 0;
sum += +data.r1 + +data.r2 + +data.r3 + +data.r4 + +data.r5 + +data.r6;
return sum;
}*/
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Save and Calculate',
handler: function (btn) {
/* var store = btn.up('grid').getStore();
for (i = 0; i < store.getModifiedRecords().length; i++) {
console.log(i + ":");
console.log(store.getModifiedRecords()[i]['data']);
postVals(store.getModifiedRecords()[i]['data']); // #TODO_DEVELOPER loop this!
}*/
}
}, {
xtype: "label",
text: "|"
}, {
xtype: 'button',
text: 'Refresh Table',
handler: function () {
//refresh();
}
}, {
xtype: 'label',
text: '<-- Click there to update the totals.'
}]
}],
height: 200,
renderTo: Ext.getBody()
});
I am using a menu to display a number of options for rows in my grid. The menu displays the text correctly and I want to be able to disable some of these options dynamically.
This is my menu:
Ext.create('Ext.menu.Menu', {
items: [{
text: 'option 1'
},{
text: 'option 2'
},{
text: 'option 3'
}]
});
I've tried giving each item an id and disabling it by id but I get an error in my console saying
Uncaught TypeError: Cannot read property 'contains' of undefined(…)
Does anyone know a solution to this?
You just need to call method disable on the menuitem.
var item = Ext.first('#mySpecialMenuItem');
item.disable();
Something like this:
{
xtype: 'menu',
floating: false,
id: 'myMenu',
width: 120,
items: [
{
xtype: 'menuitem',
id: 'mySpecialMenuItem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
},
{
xtype: 'button',
handler: function(button, e) {
// somehow get the item
var item = Ext.first('#mySpecialMenuItem');
// call disable
item.disable();
},
text: 'Disable Item'
}
Check the full example in this fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1m2q
var menu=Ext.create('Ext.menu.Menu', {
items: [{
text: 'option 1'
},{
text: 'option 2'
},{
text: 'option 3'
}]
});
var item=menu.getComponent(//index of the item)
item.setDisabled(true);
I'm trying to show and hide radiogroups, based on selection from a drop-sown selection. So that if i choose toshiba only the toshiba models appear, else if i choose hp only the hp models appear. Now the functionality is working, however at the beginning before selecting anything, both models (hp and toshiba) are showing, however i want it so that only the toshiba models are showing at the beginning. I tried giving the hp models, the property hidden:true..But when selecting hp, the models no longer appear. Any idea on how to display only one model at the beginning?
toshibatypes = Ext.create('Ext.form.Panel', {
xtype: 'radiogroup',
defaultType: 'radio',
layout: 'hbox',
border:false,
id: 'toshiba',
width:'100%',
items: [
{
checked: true,
boxLabel: 'Toshiba 1',
name: 'toshibas',
inputValue: 'toshiba1',
xtype:'radiofield'
},
{
boxLabel: 'Toshiba 2',
name: 'toshibas',
inputValue: 'toshiba2',
xtype:'radiofield'
}
]
});
hptypes = Ext.create('Ext.form.Panel', {
xtype: 'radiogroup',
defaultType: 'radio',
layout: 'hbox',
border:false,
id: 'hp',
width:'100%',
items: [
{
checked: true,
boxLabel: 'HP 1',
name: 'hps',
inputValue: 'hp1',
xtype:'radiofield'
},
{
boxLabel: 'HP 2',
name: 'hps',
inputValue: 'hp2',
xtype:'radiofield'
}]
});
laptoptypes = Ext.create('Ext.form.ComboBox', {
store: laptops,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
editable:false,
width: 100,
listeners: {
select: function() {
var iComboValue = laptoptypes.getValue();
switch(iComboValue) {
case "toshibatypes" :
{
Ext.get("toshiba").show();
Ext.get("hp").hide();
break;
}
case "hptypes" :
{
Ext.get("hp").hide();
Ext.get("toshiba").show();
break;
}
}
}
}
});
If you configure hidden on the view declaration you can use setHidden( boolean ).
var iComboValue = laptoptypes.getValue();
Ext.get("toshiba").setHidden(iComboValue !== 'toshibatypes');
Ext.get("hp").setHidden(iComboValue !== 'hptypes');
I have 3 x-axis but their labels are not visible.
The whole idea is to have the bars thiner, and enought room for the labels
http://jsfiddle.net/rnz9ybuq/1/
xAxis: [
{
categories: ['01/14', '02/14', '03/14'],
title: {
text: "left column"
}
},
{
categories: ['stuff 1', 'stuff 2', 'stuff 3'],
opposite: true,
title: {
text: "1st right column"
}
},
{
opposite: true,
title: {
text: "2nd right column"
},
categories: ['thing 1', 'thing 2', 'thing 3' ]
}
],
yAxis: {
opposite: true,
min: 0,
max: 100,
labels: {
enabled: false
},
title: {
text: "Data"
}
},
I guess I'm missing something simple
You need to have reference to the xAxis (xAxis:2) in the serie.
Example: http://jsfiddle.net/rnz9ybuq/2/
I have a problem with adding scrollbar to grid, that is inside of vbox container.
I can not assign height directly, because I do not know it. In that vbox container also is 'another content' with undefined height, so I can not use neither 'height', neither 'flex'. I need to make grid fill all remaining space in the page, and if there will be more rows than it could fit - i need to add scrollbar to that grid.
This is most important part of code:
{
layout: {
type: 'vbox',
align: 'stretch'
},
items:[
{
title: 'center'
},{
html: 'another content'
},{
xtype: 'grid',
autoScroll: true, // <-- this is not working
columns: [
{ text: 'User', dataIndex: 'userId' }
],
store: new Ext.data.Store({
model: 'Ext.data.Record',
fields: [
{ name: 'userId', type: 'string' }
],
data: ( function(){
var res = []
for(var i=0; i<1000; i++){
res.push({ userId: 'User'+i});
}
return res;
})()
})
}
]
}
I tryed a lot of variants, but no success.
I also prepere some fiddles for most logical solutions(but scroll is not working there anyway):
https://fiddle.sencha.com/#fiddle/fmo
https://fiddle.sencha.com/#fiddle/fmp
Any help will be good.
Just remove autoScroll: true and replace it with flex: 1.
https://fiddle.sencha.com/#fiddle/fms
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: {
type: 'border'
},
items: [
{
width: '100%',
region: 'north',
items: [{
title: 'north'
},{
html: 'another content'
}]
},
{
region: 'center',
layout: 'fit',
items: [{
layout: {
type: 'vbox',
align: 'stretch'
},
items:[
{
title: 'center'
},{
html: 'another content'
},{
xtype: 'grid',
flex: 1,
columns: [
{ text: 'User', dataIndex: 'userId' }
],
store: new Ext.data.Store({
model: 'Ext.data.Record',
fields: [
{ name: 'userId', type: 'string' }
],
data: ( function(){
var res = []
for(var i=0; i<1000; i++){
res.push({ userId: 'User'+i});
}
return res;
})()
})
}
]
}
]
}]
});
}
});