In Extjs, i want to add button in tbar chart, which hide/unhide my grid, i have some difficult with layout, so in certains case, my button take 100% place, also my grid disapear, my code is bellow:
var barchart = {
xtype: 'cartesian',
legend: {
docked: 'bottom'
},
tbar: [{
xtype: 'container',
layout: {
type: 'vbox',
columns: 1,
align: 'stretch'
},
items: [{
xtype: 'button',
text: 'Afficher DSO',
listeners: {
click: function(btn){
var dsoGrid = btn.nextSibling();
if( dsoGrid.hidden ){
helperCache.multiToolbox(dsoGrid, ["NOT_HIDE"]);
btn.setText("Masquer DSO");
} else {
helperCache.multiToolbox(dsoGrid, ["HIDE"]);
btn.setText("Afficher DSO");
}
}
}
},{
xtype: 'grid',
itemId: 'grid_history_dso',
// hidden: true,
scrollable: 'x',
margin: 5,
flex: 1,
store: dsoStore,
columns: dsoColumns,
}]
}],
.......
I like to my button take normal size, and my grid take fit all place of his container with x scroll
For helping anyone in same case, i solved my problem with :
var barchart = {
xtype: 'cartesian',
legend: {
docked: 'bottom'
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
layout: {
type: 'anchor',
},
items: [{
xtype: 'button',
text: 'Afficher DSO',
listeners: {
click: function(btn){
var dsoGrid = btn.nextSibling();
if( dsoGrid.hidden ){
helperCache.multiToolbox(dsoGrid, ["NOT_HIDE"]);
btn.setText("Masquer DSO");
} else {
helperCache.multiToolbox(dsoGrid, ["HIDE"]);
btn.setText("Afficher DSO");
}
}
}
},{
xtype: 'grid',
itemId: 'grid_history_dso',
hidden: true,
scrollable: 'x',
margin: 5,
anchor: '100%',
store: dsoStore,
columns: dsoColumns,
}]
}],
dockedItem was key
Related
Hello I am making a piechart in EXTJS. The legends of these charts are not displaying properly they are being cut off. Therefore i am making a piechart in one panel and just under that i am making another panel which would contain the legends.
My question is how do I connect the pie chart in one panel and showing the legend of this pie chart in another panel.
I am using EXTJS 4.2
I am made 2 panels one is under the other in a vbox positioning.
Hope this will help you:
View
layout: {
type: 'vbox',
align: 'stretch'
},
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'top',
ui: 'tools',
items: [
{
xtype: 'tbspacer',
flex: 1
},
{
xtype: 'label',
html: '<span style="font-weight:bold">Sales by Category</span>'
},
{
xtype: 'tbspacer',
flex: 1
},
{
xtype: 'button',
iconCls: 'x-fa fa-download',
text: 'Download',
listeners: {
click: 'onDownloadButtonClick'
}
}
]
}
],
items: [
{
xtype: 'polar',
reference: 'salesByCategoryChartRef',
flex: 1,
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111',
'#009900',
'#6600cc'
],
insetPadding: '10',
innerPadding: 10,
bind: {
store: '{currentCategoryStore}'
},
series: [
{
type: 'pie',
highlight: true,
label: {
field: 'description',
display: 'none',
font: '12px Arial',
contrast: true
},
tooltip: {
trackMouse: true,
renderer: 'onSeriesTooltipRender'
},
angleField: 'sales'
}
],
interactions: [
{
type: 'rotate'
}
],
legend: {
xtype: 'legend',
docked: 'right'
}
}
],
Controller:
onSeriesTooltipRender: function(tooltip, record, item) {
var html = 'Code: ' + record.get('code') +' <br/> Description: ' +
record.get('description') + '<br/> Sale: ' + record.get('sales') + '%';
tooltip.setHtml(html);
},
onDownloadButtonClick: function(button, e, eOpts) {
if (Ext.isIE8) {
Ext.Msg.alert('Unsupported Operation', 'This operation requires a newer version of Internet Explorer.');
return;
}
var chart = this.lookupReference('salesByCategoryChartRef');
if (Ext.os.is.Desktop) {
chart.download({
filename: 'Sales by Category'
});
} else {
chart.preview();
}
},
Here is the output
PIE Chart
When I click a add button it needs to add a same container again. The below I have given my code segment
var rulepanel = Ext.apply(me, {
items: [{
xtype: 'uxform',
id: 'rule',
bodyPadding: 10,
items: [{
xtype: 'container',
items: [{
xtype: 'combobox',
fieldLabel: 'match',
name: 'name',
allowBlank: false,
placeholder: 'match'
}]
}, {
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'combobox',
fieldLabel: 'Product/KPI',
name: 'name',
}, {
xtype: 'button',
id: 'add',
text: 'Add',
handler: function(button, event) {
//rulepanel.insert(0, Ext.create(rulepanel.model));
// so here how can I add it
}
}],
}]
}]
});
So when click the add button what I need is I need to clone the "match,product/kpi and add button" fields. How can I achieve this task. I have tried with cloneconfig(). But couldn't achieve it. Thanks in advance.
In ExtJs, You create your own component as common and you can reuse whenever you required in application. You need to use Ext.define
Defines a class or override. A basic class is defined like this:
Ext.define('My.awesome.Class', {
someProperty: 'something',
someMethod: function() {
alert(s + this.someProperty);
}
...
});
var obj = new My.awesome.Class();
obj.someMethod('Say '); // alerts 'Say something'
In this FIDDLE, I have created a demo using your code as reference. Hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ProductKpi', {
extend: 'Ext.container.Container',
xtype: 'productkpi',
layout: {
type: 'hbox',
align: 'stretch'
},
margin:5,
items: [{
xtype: 'combobox',
flex:1,
fieldLabel: 'Product/KPI',
name: 'name',
}, {
xtype: 'button',
margin:'0 5',
text: 'Add',
handler: function (button, event) {
button.up('#rule').add({
xtype: 'productkpi'
})
}
}],
});
Ext.create('Ext.form.Panel', {
title: 'Demo',
renderTo: Ext.getBody(),
id: 'rule',
bodyPadding: 10,
items: [{
xtype: 'container',
items: [{
xtype: 'combobox',
fieldLabel: 'match',
name: 'name',
allowBlank: false,
placeholder: 'match'
}]
}, {
xtype: 'productkpi'
}]
});
}
});
var radioGroup = {
xtype: 'radiogroup',
itemId: 'radioButton',
layout: 'hbox',
width: 700,
defaults: {
flex: 1
},
items: [{
boxLabel: option1
name: 'timeInterval',
inputValue:0
checked: true
}, {
boxLabel: option2
name: 'timeInterval',
inputValue:1,
checked: false
}, {
boxLabel: option1
name: 'timeInterval',
inputValue:2,
checked: false
}],
listeners: {
change: function (radio, newValue, oldValue) {
if (radio.getValue().timeInterval == 2) {
cardPanel.layout.setActiveItem(0);
//getting error cardPanel.layout.setActiveItem is not a function
} else if (radio.getValue().timeInterval == 0) {
cardPanel.layout.setActiveItem(1);
} else if (radio.getValue().timeInterval == O1) {
cardPanel.layout.setActiveItem(2);
}
}
}
};
var cardPanel = {
layout: 'card',
itemId: 'PanelID',
activeItem: 0,
items: [{
itemId: 'timeIntervalPanel',
name: 'timeInterval',
xtype: 'timeintervalpanel',
selection: this.defaultData,
dateFormat: this.dateFormat,
timeFormat: this.timeFormat
}, {
id: 'specificIntervalPanel',
name: 'timeInterval',
xtype: 'specificinterval',
selection: this.defaultData
}, {
itemId: 'emptyPanel',
name: 'emptyCard',
xtype: 'panel'
}]
};
You need to use following steps :-
First you need to get component which you have provided layout:"card" in change event of RadioGroup.
Now, you need to get getLayout() of your component.
Now need to use setActiveItem(newItem) method of card layout component.
In this FIDDLE, I have created a demo using your code and put some modification. I hope this will help you.
Code Snippet
//Timeinterval panel
Ext.define('Timeintervalpanel', {
extend: 'Ext.panel.Panel',
xtype: 'timeintervalpanel',
html: 'This is timeintervalpanel'
});
//Specific Interval panel
Ext.define('SpecificInterval', {
extend: 'Ext.panel.Panel',
xtype: 'specificinterval',
html: 'This is specificinterval'
});
//Empty Panel
Ext.define('EmptyPanel', {
extend: 'Ext.panel.Panel',
xtype: 'emptyPanel',
html: 'This is emptyPanel'
});
//Panel with radio button and card item.
Ext.create('Ext.panel.Panel', {
title: 'Card Layout Example with radio buttons',
renderTo: Ext.getBody(),
height: window.innerHeight,
layout: 'vbox',
tbar: [{
xtype: 'radiogroup',
itemId: 'radioButton',
layout: 'hbox',
defaults: {
flex: 1,
margin: 5,
name: 'timeInterval'
},
items: [{
boxLabel: 'Timeinterval panel',
inputValue: 0,
checked: true
}, {
boxLabel: 'Specific Interval',
inputValue: 1
}, {
boxLabel: 'Empty Panel',
inputValue: 2
}],
listeners: {
change: function (radio, newValue, oldValue) {
var cardPanel = radio.up('panel').down('#PanelID').getLayout();
cardPanel.setActiveItem(newValue.timeInterval);
//Only just for animation
//activeItem.getEl().slideIn('r');
}
}
}],
items: [{
//This panel have provided card layout.
xtype: 'panel',
flex: 1,
width: '100%',
layout: 'card',
itemId: 'PanelID',
defaults: {
bodyPadding: 20
},
items: [{
xtype: 'timeintervalpanel'
}, {
xtype: 'specificinterval'
}, {
xtype: 'emptyPanel'
}]
}]
});
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();
});
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'
}
});
}
});