Related
My new in extjs and working on ExtJS 3.2.
In that my data is not loading but if comment data column is displaying can anyone please help me.
My code is
{
xtype: 'panel',
title: "Search Result",
items: [{
xtype: 'grid',
store: new Ext.data.Store({
autoDestroy: true,
fields: ['Name', 'Roll', 'Class'],
root: 'records',
// proxy: proxy,
data: [{
Name: false,
Roll: 'a',
Class: 20
}, {
Name: true,
Roll: 'b',
Class: 25
}]
}),
columns: [{
text: 'Name',
id: 'company',
header: 'Name',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Name'
}, {
text: 'Roll',
width: 130,
header: 'Name',
dataIndex: 'Roll',
hidden: false
}, {
text: 'Class',
width: 130,
header: 'Class',
dataIndex: 'Class',
hidden: false
}]
}]
}
Inside panel I am taking grid.
Can anybody please help me.?
I am writing data outside the scope and now its working fine.
My complete code is.
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole Blood',2,'eSample'] ];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Sample Type", width: 75, sortable: true, dataIndex: 'stype'},
{header: "Subjects Count", width: 75, sortable: true, dataIndex: 'scnt'},
{header: "Source", width: 75, sortable: true, dataIndex: 'src'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:150,
width:150,
title:'Detailed Counts'
});
This is working fine.
Remove the root config (root:'records') in the store.. or try to add records property to the data object. Remove the reader as well
I have a form that has comboboxes, tagfields, date pickers, etc., and a grid. Each of these elements has a different store. The user is going to make selections from the comboboxes, etc,. and enter values into the grid. Then the values from the grid and other form elements are all sent on a POST to the server. I know how to POST the data from the comboboxes, tagfields, and date pickers. However, I don't know how to send the data in the grid with the form. Here is the form view:
Ext.define('ExtTestApp.view.main.List', {
extend: 'Ext.form.Panel',
xtype: 'cell-editing',
frame: true,
autoScroll: true,
title: 'Record Event',
bodyPadding: 5,
requires: [
'Ext.selection.CellModel',
'ExtTestApp.store.Personnel'
],
layout: 'column',
initComponent: function(){
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
//width: 550,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
//width: 400,
title: 'Event Information',
//height: 460,
//defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Event',
layout: 'hbox',
defaults: {
hideLabel: 'true'
},
items: [{
xtype: 'combobox',
name: 'eventTypeId',
width: 300,
//flex: 1,
store: {
type: 'events'
},
valueField: 'eventTypeId',
// Template for the dropdown menu.
// Note the use of the "x-list-plain" and "x-boundlist-item" class,
// this is required to make the items selectable.
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'datefield',
fieldLabel: 'Date',
format: 'Y-m-d',
name: 'startDate',
//msgTarget: 'under', //location of error message, default is tooltip
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
//flex: 1,
emptyText: 'Start',
allowBlank: false
},
{
xtype: 'datefield',
format: 'Y-m-d',
name: 'endDate',
//msgTarget: 'under', //location of error message
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
//flex: 1,
margin: '0 0 0 6',
emptyText: 'End',
allowBlank: false
}
]
}]
},
{
xtype: 'fieldset',
//height: 460,
title: 'Platform Information',
//defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Platform',
//combineErrors: true,
defaults: {
hideLabel: 'true'
},
items: [
{
xtype: 'combobox',
name: 'platformId',
store: {
type: 'platforms'
},
valueField: 'platformId',
allowBlank: false
}
]
}
]
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Software Type(s)',
//combineErrors: true,
defaults: {
hideLabel: 'true'
},
items: [
{
xtype: 'tagfield',
width: 400,
//height: 50,
fieldLabel: 'Software Type(s)',
name: 'softwareTypeIds',
store: {
type: 'softwareTypes'
},
labelTpl: '{softwareName} - {manufacturer}',
valueField: 'softwareTypeId',
allowBlank: false
}
]
},
{
xtype: 'gridpanel',
layout: 'anchor',
defaults: {
anchor: '100%'
},
width: 1300,
//columnWidth: 0.78,
//title: 'Metrics',
plugins: [this.cellEditing],
title: 'Personnel',
store: {
type: 'personnel'
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
]
}
],
buttons: [
{
text: 'Save Event',
handler: function() {
var form = this.up('form'); // get the form panel
// if (form.isValid()) { // make sure the form contains valid data before submitting
Ext.Ajax.request({
url: 'api/events/create',
method:'POST',
headers: { 'Content-Type': 'application/json' },
params : Ext.JSON.encode(form.getValues()),
success: function(form, action) {
Ext.Msg.alert('Success', action.result);
},
failure: function(form, action) {
//console.log(form.getForm().getValues());
Ext.Msg.alert('Submission failed', 'Please make sure you selected an item for each required field.', action.result);
}
});
// } else { // display error alert if the data is invalid
// Ext.Msg.alert('Submit Failed', 'Please make sure you have made selections for each required field.')
// }
}
}
]
});
this.callParent();
}
});
var grid = Ext.ComponentQuery.query('grid')[0];
Here is the store for the grid:
Ext.define('ExtTestApp.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
fields: [
'name', 'email', 'phone'
],
data: { items: [
{ name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111" },
{ name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222" },
{ name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333" },
{ name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444" }
]},
autoLoad: true,
proxy: {
type: 'memory',
api: {
update: 'api/update'
},
reader: {
type: 'json',
rootProperty: 'items'
},
writer: {
type: 'json',
writeAllFields: true,
rootProperty: 'items'
}
}
});
Ideally, you would need to create a custom "grid field" so that the grid data is picked up on form submit like any other field.
You can also use this workaround: in the "Save Event" button handler, dig out the grid store and fish data out of it:
var gridData = [];
form.down('gridpanel').store.each(function(r) {
gridData.push(r.getData());
});
Then get the rest of the form data and put the grid data into it:
var formData = form.getValues();
formData.gridData = gridData;
Finally, include it all in your AJAX call:
params: Ext.JSON.encode(formData)
I'm working in a Ruby On Rails + Ext js app.. and I'm trying to show a grid with the filter feature but I can't I've been reading a lot of post and even the Sencha example page but I can't make it work.
Here is the live code.. a simple grid without the gridpanel working https://fiddle.sencha.com/#fiddle/3fh
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'tipo', type: 'string'},
{name: 'concepto', type: 'string'},
{name: 'ingreso', type: 'int'},
{name: 'egreso', type: 'int'},
{name: 'por_alicuota', type: 'float'},
{name: 'fecha', type: 'string', dateFormat:'m/Y'}
] ,
data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}
],
})
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'tipo'
}, {
type: 'string',
dataIndex: 'concepto'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getElementById("leftPanel"),
store: store,
height: 300,
filters : [filtersCfg],
title: "grid view",
columns: [
{
text: 'Pay',
sortable: true,
filterable: true,
dataIndex: 'tipo'
},
{
text: 'Concept',
sortable: true,
filterable: true,
dataIndex: 'concepto',
}]
});
Ext.onReady(function() {
Ext.QuickTips.init();
grid.render('content');
grid.show();
});
Hope you guys can help me!
Replace filters: [filtersCfg], with features: [filtersCfg],, and remove this extra comma in dataIndex: 'concepto', which is likely to crash IE. It's important to note that the ExtJS file loader seems not to work in this fiddle (Type Error).
Thanks to #Wared for the Answer... The only thing to change in the original code is :
filters: [filtersCfg]
INTO features: [filtersCfg] now the code looks like:
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'tipo', type: 'string'},
{name: 'concepto', type: 'string'},
{name: 'ingreso', type: 'int'},
{name: 'egreso', type: 'int'},
{name: 'por_alicuota', type: 'float'},
{name: 'fecha', type: 'string', dateFormat:'m/Y'}
] ,
data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}
],
})
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'tipo'
}, {
type: 'string',
dataIndex: 'concepto'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getElementById("leftPanel"),
store: store,
height: 300,
features : [filtersCfg],
title: "grid view",
columns: [
{
text: 'Pay',
sortable: true,
filterable: true,
dataIndex: 'tipo'
},
{
text: 'Concept',
sortable: true,
filterable: true,
dataIndex: 'concepto',
}]
});
Ext.onReady(function() {
Ext.QuickTips.init();
grid.render('content');
grid.show();
});
I have a tbar inside a grid panel like this:
This is the code that produces it:
var grid = new Ext.grid.GridPanel({
region: 'center',
style: 'margin: 10px',
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
title: 'Testing',
tbar: ['Filters:', {
width: 100,
xtype: 'combo',
mode: 'local',
value: 'en',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Produkt',
name: 'language',
hiddenName: 'language',
displayField: 'name',
valueField: 'value',
store: new Ext.data.JsonStore({
fields : ['name', 'value'],
data : [
{name : 'German', value: 'de'},
{name : 'English', value: 'en'},
{name : 'French', value: 'fr'}
]
})
}],
What do I need to change so that the dropbox is right-aligned instead of left-aligned?
Addendum
thanks #dogbane, that works perfectly, here's how I right aligned both text and dropdown:
tbar: [
{xtype: 'tbfill'},
'Filters:',
{
width: 100,
xtype: 'combo',
mode: 'local',
...
Try:
{xtype: 'tbfill'}, // or '->'
See the docs for Ext.Toolbar.Fill.
I have my data to show in a standard ExtJs grid. The state is saved (the cookies exists), column-orders can be changed, and will be shown as they were left, but, my columnwidths are not reproduced.
Javascript:
<div id="grid"> </div>
<style type="text/css">
.x-grid3-header-offset {width: auto;}
</style>
<script type="text/javascript">
Ext.onReady(function(){
Ext.grid.ColumnModel.override({
setState : function(col, state) {
Ext.applyIf(this.lookup[col], state);
}
});
// define widget URL
var widgetURL = '/this/is/a/dummyurl';
// totaal: 766
Ext.app.myData = {
"totalRows":766,
"rows":[
["1000310","3 CPE||426086","0","0","Standaard","Standaard","EUR","0,00","15,26","-15,26",""]
// there's more, but I didn't want to waste space
]};
Ext.state.Manager.setProvider(
new Ext.state.CookieProvider({
expires: new Date(new Date().getTime()+(1000*60*60*24*31)) //1 month from now
}));
function eur(val) {
val = parseFloat(val);
return "€ " + val.toFixed(2);
}
function eurint(val) {
return "€ " + val;
}
function deb(val) {
tmp = val.split('||');
return (""+tmp[0]+"");
}
// create the data store
Ext.app.store = new Ext.data.Store({
storeId: 'myStore',
proxy: new Ext.data.ScriptTagProxy({
url: widgetURL,
nocache: false,
callbackParam: 'p_widget_num_return'
}),
baseParams: {
'x01':43543543584
},
remoteSort: true,
paramNames: {
start: 'x02',
limit: 'x03',
sort: 'x04',
dir: 'x05'
},
reader: new Ext.data.JsonReader({
totalProperty: 'totalRows',
root: 'rows'
}, [
{name: 'referentie', type: 'string', mapping: '0'},
{name: 'naam', type: 'string', mapping: '1' },
{name: 'kredietlimiet', type: 'string', mapping: '2'},
{name: 'internelimiet', type: 'string', mapping: '3'},
{name: 'procedurenaam', type: 'string', mapping: '4' },
{name: 'portefeuillenaam', type: 'string', mapping: '5' },
{name: 'currency', type: 'string', mapping: '6' },
{name: 'debitdb', type: 'string', mapping: '7'},
{name: 'creditdb', type: 'string', mapping: '8'},
{name: 'duedb', type: 'string', mapping: '9'},
{name: 'dso', type: 'float', mapping: '10'}
,{name: 'code', type: 'string', mapping: '11'} // this data is optional
,{name: 'klant', type: 'string', mapping: '12'} // this data is optional
,{name: 'vertegenwoordiger', type: 'string', mapping: '13'} // this data is optional
])
});
var paging_toolbar = new Ext.PagingToolbar({
paramNames: {start: 'x02', limit: 'x03'},
pageSize: 25,
store: Ext.app.store,
displayInfo: true,
displayMsg: 'Afgebeeld {0} - {1} van {2}',
emptyMsg: 'Geen gegevens gevonden'
});
// trigger the data store load
//store.load({params:{start:0, limit:pagesize}});
//store.loadData(myData);
// create the Grid
Ext.app.grid = new Ext.grid.GridPanel({
store: Ext.app.store,
columns: [
{id:'referentie',header: "Referentie", width: 50, sortable: true, dataIndex: 'referentie'},
{id:'klant',header: "Bedrijf", width: 55, sortable: true, dataIndex: 'klant'},
{id: 'debtor', header: "Naam", sortable: true, renderer: deb, dataIndex: 'naam'},
{id:'kredietlimiet',header: "Limiet", width: 70, sortable: true, renderer: eurint, dataIndex: 'kredietlimiet', css : "text-align : right;"},
{id:'procedure',header: "Procedure", width: 50, sortable: true, dataIndex: 'procedurenaam'},
{id:'portefeuille',header: "Portefeuille", width: 50, sortable: true, dataIndex: 'portefeuillenaam'},
{id:'currency',header: "Valuta", width: 40, sortable: true, dataIndex: 'currency'},
{id:'deb',header: "Debet totaal", width: 75, sortable: true, renderer: eurint, dataIndex: 'debitdb', css : "text-align : right;"},
{id:'cred',header: "Credit totaal", width: 80, sortable: true, renderer: eurint, dataIndex: 'creditdb', css : "text-align : right;"},
{id:'due',header: "Openstaand saldo", width: 80, sortable: true, renderer: eurint, dataIndex: 'duedb', css : "text-align : right;"},
{id:'dso',header: "D.V.(*)", width: 45, sortable: true, dataIndex: 'dso'}
],
viewConfig: {
forceFit: true
},
//loadMask: true,
stripeRows: true,
width:810,
autoExpandColumn: 'debtor',
autoHeight: true,
stateful: true,
stateId: 'grid',
bbar: paging_toolbar
});
Ext.app.store.loadData(Ext.app.myData);
Ext.app.grid.render('grid');
});
</script>
I searched the forums, I searched other forums, but i can't find what I am doing wrong. Help? :-) (be gentle...)
If you specify ForceFit then autoExpandColumn is ignored. Also with forceFit it continually fits the columns across the total width so that might be the issue. Try to remove the forceFit and autoExpandColumn properties.
In your code there no saving column sizes to cookie, no reading, no setting them... Why you expect to columns to be resized ? Also forceFit: true would not help.
Or there something what do not show ?
I found it:
I removed the autoExpander (so kudos for Robby), and removed this code at the top
Ext.onReady(function(){
Ext.grid.ColumnModel.override({
setState : function(col, state) {
Ext.applyIf(this.lookup[col], state);
}
});
This was a bugfix that should've helped me, and while returning on my steps, and removing this bit, it worked. So basicly, I had to remove the autoExpander.