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()}
];
Related
i try to use sencha cmd to create a project. But when using rowediting plugin, i got error
"SCRIPT5007: Unable to get property 'getAttribute' of undefined or
null reference"
whenever i scroll up/down over the editor on the grid.
Could you let me know what wrong here?
please click here to see more detail
Here my code look like:
Ext.define("Sample.view.common.HelloWorld",{
extend: "Ext.grid.Panel",
alias: 'widget.app-helloworld',
requires: [
'Ext.grid.plugin.RowEditing',
'PCS.config.Locale'
],
bind: '{hellostore}',
layout: {type: 'fit', align: 'stretch'},
initComponent: function() {
Ext.apply(this, {
plugins: [{
ptype: 'rowediting',
clicksToEdit: 2,
pluginId: 'helloeditor',
errorsText: 'Warning',
listeners: {
cancelEdit: 'onCancelEdit',
validateedit: 'onValidateEdit',
edit: 'onEdit'
}
}],
columns: [
new Ext.grid.RowNumberer({
width: 30,
align: 'center'
}), {
header: this.lblSysNm,
dataIndex: 'sysCd',
width: 150,
align: 'center',
itemId: 'colSystem',
renderer: function(value, metaData){
return metaData.record.data.sysNm;
},
editor: {
xtype: 'combo',
bind: {
store: '{systemCodeCombo}'
},
displayField: 'optionName',
valueField: 'optionValue',
allowBlank: false,
activeError: 'important',
editable: false
}
}, {
header: this.lblDept,
dataIndex: 'deptCd',
width: 180,
align: 'center',
itemId: 'colDept',
renderer: function(value, metaData){
return metaData.record.data.deptNm;
},
editor: {
xtype: 'combo',
bind: {
store: '{deptCodeCombo}'
},
displayField: 'optionName',
valueField: 'optionValue',
allowBlank: false,
activeError: 'important',
editable: false
}
}, {
header: this.lblCountryCd,
dataIndex: 'cntyCd',
width: 120,
align: 'center',
itemId: 'colCountryCd',
editor: {
xtype: 'textfield',
maxLength : 2,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important',
fieldStyle: 'text-align: center;text-transform:uppercase',
readOnly: true,
afterRender: function() {
this.el.on('click','openCountryPopup');
}
}
}, {
header: this.lblCountryNm,
dataIndex: 'cntyNm',
width: 170,
align: 'left',
itemId: 'colCountryNm',
editor: {
xtype: 'textfield',
maxLength : 50,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important',
readOnly: true,
afterRender: function() {
this.el.on('click','openCountryPopup');
}
}
}, {
header: this.lblReason,
dataIndex: 'reason',
width: 340,
align: 'left',
itemId: 'colReason',
editor: {
xtype: 'textfield',
maxLength : 200,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important'
}
}, {
header: this.lblLastUpd,
dataIndex: 'updUserId',
width: 100,
align: 'center',
itemId: 'colLastUpd',
editable: false
}, {
header: this.lblLastUpdDt,
dataIndex: 'updDt',
xtype: 'datecolumn',
format: 'Y-m-d H:i',
width: 150,
align: 'left',
itemId: 'colLastUpdDt',
editable: false
}
]
});
this.callParent();
}
});
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 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