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.
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();
}
});
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 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
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()}
];
I'm trying out Flexigrid for a new app - I'm really impressed with it but I can't find a way to set the width in code.
The main reason for this is to get the GRID (not the columns inside the grid) to align fully to the size of the window. I know, it makes a mockery of the horizontal resizer, but that's what I have to do!
FYI my set up is the following:
$(document).ready(function() {
$("#flex1").flexigrid
(
{
url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
dataType: 'json',
colModel: [
{ display: '', name: 'view', width: 20, sortable: true, align: 'center' },
{ display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
{ display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
{ display: '', name:'Actions', width:30, sortable: false, align: 'center' }
],
sortname: "Street",
sortorder: "asc",
usepager: true,
title: 'Streets',
useRp: true,
rp: 15,
showTableToggleBtn: false,
width: 800,
height: 200
}
);
});
but the following function doesn't work:
function ResizeGrid() {
$('#flex1').flexOptions({ width:1000 }).flexReload();
}
It causes the grid to refresh, but nothing more.
Despite having NO LUCK on google for about 20 minutes before posting this, Murphy's law meant that I tried another quick search just afterwards and found the answer.
Turns out that "width" should be set to 'auto' (note the quotes are vital).
$("#flex1").flexigrid
(
{
url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
dataType: 'json',
colModel: [
{ display: '', name: 'view', width: 20, sortable: true, align: 'center' },
{ display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
{ display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
{ display: '', name:'Actions', width:30, sortable: false, align: 'center' }
],
sortname: "Street",
sortorder: "asc",
usepager: true,
title: 'Streets',
useRp: true,
rp: 15,
showTableToggleBtn: false,
width: 'auto',
height: 200
}
);
I'll leave this post for anyone else who has this problem.