Is there a way to add a progress bar in the footer (fbar) of a Grid? I have been successful in adding buttons to the grid panel but no luck with the progress bar.
I tried this in the fbar:
fbar: [{
type: 'progress',
text: 'updating...'
}]
But the result is a button with the text "updating" being added to the footer.
Anybody know what I am doing wrong?
Assuming Ext4
Ext.require(['Ext.data.*', 'Ext.grid.*']);
Ext.define('Restaurant', {
extend: 'Ext.data.Model',
fields: ['name', 'cuisine']
});
Ext.onReady(function() {
var restaurants = Ext.create('Ext.data.Store', {
storeId: 'restaraunts',
model: 'Restaurant',
data: [{
name: 'Cheesecake Factory',
cuisine: 'American'
}]
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: restaurants,
width: 600,
height: 400,
frame: true,
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}, {
text: 'Cuisine',
flex: 1,
dataIndex: 'cuisine'
}],
fbar: [{
xtype: 'progressbar',
text: 'Foo',
width: 200
}]
});
});
Related
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
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'
}]
});
}
});
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'
}
});
}
});
I am creating the form below, but for some reason the select button handler doesn't
get executed. Everything else is working properly (loading data into the grid).
Is there something I'm missing?
Ext.Loader.setConfig({enabled:true});
Ext.define('Project', {
extend: 'Ext.data.Model',
fields: ['PID', 'ProjectName']
});
var projectsStore = Ext.create('Ext.data.Store',
{
model: 'Project',
autoLoad: true,
proxy:{
type: 'ajax',
url : 'projects.php?action=read',
reader:{ type:'json', root:'projects', successProperty:'success' } }
});
Ext.onReady(
function()
{
var simple = Ext.create('Ext.form.Panel', {
url:'projects.php?action=select',
frame:true,
title: 'Projects',
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
columnWidth: 0.60,
xtype: 'gridpanel',
store: projectsStore,
height: 400,
title:'General',
columns: [
{header: 'Id', dataIndex: 'PID', flex: 1},
{header: 'Project Name', dataIndex: 'ProjectName', flex: 1},
]
}],
buttons: [{
text: 'Select',
handler: function() {
Ext.Msg.alert('Selecting', action.result.msg);
}
}]
});
simple.render('proj-form');
projectsStore.load();
}
);
Your code is crashing when it's running the handler because action.result.msg doesn't exist.
You can look in Firebug/Chrome Dev Tools and it would have shown you the problem.