I am developing an ExtJs application; and in this application it is possible to add new lines dynamically to a grid. However, I do not know how I can number the lines as they are added. Can anyone provide me with some insight?
Check the RowNumberer class in the documentation.
columns: [
{xtype: 'rownumberer'},
{text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
{text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", width: 120, sortable: true, dataIndex: 'change'},
{text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
{text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.RowNumberer
Related
How can i add grid in the center of the tab panel..My grid is not taking margins,style:{margintop:'10px'} even height: and width:
here is my grid:-
{
title: 'Credit Card',
id:'credit_tab',
html:'html',
items:[{
xtype:'grid',
title: 'Simpsons',
resizable: true,
// margins:'20 20 20 20',
style:{marginLeft:'200px',marginTop:'30px'},
//store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
// height: 100,
width: 100,
// renderTo:Ext.getBody()
}]
}
Try nesting the grid into a container. Then from the container you can try out different sizes and layouts to place it exactly where you want. Here's one example.
I would remove the "style" padding/position, at least to start and see how you like within the container. Then pad/position from there. Try this:
{
title: 'Credit Card',
id:'credit_tab',
html:'html',
items:[{
xtype: 'container',
layout: {
type: 'hbox',
align: 'center',
pack: 'center',
},
items: [{
xtype:'grid',
title: 'Simpsons',
resizable: true,
// margins:'20 20 20 20',
height: 200,
//store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
// height: 100,
width: 500,
// renderTo:Ext.getBody()
}]
}]
}
Do not use CSS positioning (margins etc.) for that purpose. Use layout: center.
Here is an example: https://fiddle.sencha.com/#fiddle/s7h
Excuse me,
How can I set the autowidth in the grid column on Ext JS 3?
This is my code, so far:
<script type="text/javascript">
Ext.onReady(function () {
var mystore = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url: 'info-extjs.php'}),
reader: new Ext.data.JsonReader({
root: 'guests',
fields: [{name: 'ip_address'},
{name: 'country'},
{name: 'region'},
{name: 'comp_name'},
{name: 'page'},
{name: 'timestamp'}]
})
});
//create the grid
var grid = new Ext.grid.GridPanel({
store: mystore,
title: 'Guest List of our blog',
columns: [{
id: 'ip_address',
header: 'IP Address',
autoSizeColumn: true,
minWidth: 120,
sortable: true,
dataIndex: 'ip_address'
},
{
id: 'country',
header: 'Country',
autoSizeColumn: true,
minWidth: 120,
sortable: true,
dataIndex: 'country'
},
{
header: 'region',
autoSizeColumn: true,
minWidth: 120,
sortable: true,
dataIndex: 'region'
},
{
header: 'comp_name',
autoSizeColumn: true,
minWidth: 120,
sortable: true,
dataIndex: 'comp_name'
},
{
header: 'page',
sortable: true,
dataIndex: 'page',
autoSizeColumn: true,
minWidth: 150
},
{
header: 'timestamp',
sortable: true,
dataIndex: 'timestamp',
autoSizeColumn: true,
minWidth: 150
}],
renderTo: 'guest-list-grid',
autoHeight: true
});
mystore.load();
});
</script>
I try to use:
autoSizeColumn: true,
minWidth: 150
But, unfortunately, it is not working. This is the picture:
Please help. Ext Js Version:
ext-3.4.0
try adding forceFit: true to grids's viewconfig
...
renderTo: 'guest-list-grid',
viewConfig: {
forceFit: true
},
I need to hide the specific column in grid on load of grid. i.e., child columns. Even i use hidden: true is also not working.
Ext.apply(this, {
store: App.mcmTaskStore,
columnLines: true,
columns: [
{ header: 'P', sortable: false, width: 25, dataIndex: 'Priority', renderer: priorityRenderer }, //false because it's H M L and it sorts alphabetically
{ header: 'START', sortable: true, width: 100, dataIndex: 'StartDateFormatted', hidden: true, renderer: this.mcmCustomRenderer},
{
header: 'Incoming Flights',
columns: [
{ header: 'FLT', sortable: true, width: 80, dataIndex: 'IncomingFlightNumber', renderer: this.mcmCustomRenderer },
{ header: 'ETA', sortable: true, width: 120, dataIndex: 'IncomingFlightEta', renderer: startDateCustomRenderer },
{ header: 'CTY', sortable: true, width: 60, dataIndex: 'IncomingFlightStation', renderer: this.mcmCustomRenderer },
{ header: 'GT', sortable: true, width: 50, dataIndex: 'IncomingFlightGate', hidden: true, renderer: this.mcmCustomRenderer}
]
},
{ header: 'END', sortable: true, width: 100, dataIndex: 'EndDateFormatted', hiddden: true, renderer: this.mcmCustomRenderer},
{
text: 'Outgoing Flights',
columns: [
{ header: 'FLT', sortable: true, width: 80, dataIndex: 'OutgoingFlightNumber', renderer: this.mcmCustomRenderer },
{ header: 'ETD', sortable: true, width: 120, dataIndex: 'OutgoingFlightEtd', renderer: endDateCustomRenderer },
{ header: 'CTY', sortable: true, width: 60, dataIndex: 'OutgoingFlightStation', renderer: this.mcmCustomRenderer },
{ header: 'GT', sortable: true, width: 50, dataIndex: 'OutgoingFlightGate', hiddden: true, renderer: this.mcmCustomRenderer}
]
},
{ header: 'PAX NAME', sortable: true, width: 250, dataIndex: 'Name', renderer: this.mcmCustomRenderer },
{ header: 'COMMENTS', sortable: false, flex: 1, dataIndex: 'Notes', hiddden: true, renderer: this.mcmCustomRenderer},
{ header: 'AGENT NAME', sortable: true, width: 250, dataIndex: 'AgentName', renderer: this.mcmCustomRenderer },
{ header: 'TASK TYPE', sortable: true, width: 120, dataIndex: 'TaskType', renderer: this.mcmCustomRenderer }
],
tbar: mcmTbar
});
Please help me. Thanks in advance.
You've written 'hiddden' with 3 'd' in some places. I bet that's where it doesn't work.
I am trying to modify the sample code to build a similar form like
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/form/form-grid.html
My code is below:
var references = new Ext.form.FormPanel({
frame: true,
title: 'References',
bodyPadding: 5,
layout: 'column',
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
items: [{
columnWidth: 0.60,
xtype: 'gridpanel',
store: reference_store,
height: 400,
title:'General',
columns: [
{ id: 'name', header : 'Reference', flex: 1, sortable : true, dataIndex: 'reference' },
{ header: 'Impact', width : 75, sortable : true, dataIndex: 'impact'},
]
}, {
columnWidth: 0.4,
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{fieldLabel: 'Name', name: 'reference'}]
}]
});
But the entire FormPanel failed to show. When I replace the 'gridpanel' with 'fieldset' or other type, the FormPanel does appear regardless of the bad format.
xtype should be “grid“ instead of “gridpanel“
I'm trying to modify this example: http://www.extjs.com/deploy/dev/examples/writer/writer.html to make the all fields in the grid editable (currently only the one field is).
I've tried commenting out these lines in UserGrid.js (lines 118-120) as such:
//this.stopEditing();
this.store.insert(0, u);
//this.startEditing(0, 1);
But that only changes the field you can edit to the first one you try to edit.
How do I make the entire grid editable?
In the http://www.extjs.com/deploy/dev/examples/writer/writer.js replace
var userColumns = [
{header: "ID", width: 40, sortable: true, dataIndex: 'id'},
{header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: textField},
{header: "First", width: 50, sortable: true, dataIndex: 'first', editor: textField},
{header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: textField}
];
with
var userColumns = [
{header: "ID", width: 40, sortable: true, dataIndex: 'id'},
{header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField()},
{header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField()},
{header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField()}
];