how can i set extjs column in a function? - extjs

I have an EditorGridPanel which includes some columns but i want to change its type one of them to editor according to some values.
My column is below:
header: dil('Fiyat'),
width: 30,
sortable: true,
renderer: Ext.util.Format.numberRenderer('$0.000,00/i'),
dataIndex: 'fiyat'
but after changes, i want to work like:
header: dil('Fiyat'),
width: 30,
sortable: true,
renderer: Ext.util.Format.numberRenderer('$0.000,00/i'),
dataIndex: 'fiyat'
editor: new Ext.form.NumberField({
enableKeyEvents : true,
allowBlank: false,
allowNegative: false,
style: 'text-align:left'
})
My entire code:
var po_combolu_toolbar2 = new Ext.Toolbar({
items: [
new Ext.form.ComboBox({
id: 'po_combo_id',
hiddenName: 'po_combo_hid',
name: 'po_combo_name',
store: PoTipStore,
valueField: 'id',
displayField: 'isim',
typeAhead: true,
triggerAction: 'all',
emptyText: dil('Tip Seçiniz'),
selectOnFocus: true,
anchor: '100%',
listeners: {
select: {
fn: function (combo, value) {
var modelCmp = Ext.getCmp('po_combo_id').getValue();
po_siparis_grid.store.setBaseParam("secim", modelCmp);
if (Ext.getCmp('po_combo_id').getValue() == 5) {
} else {
}
po_siparis_grid.store.load();
}
}
},
allowBlank: true
})]
});
var po_siparis_grid = new xg.EditorGridPanel({
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
ds: new Ext.data.GroupingStore({
reader: po_siparis_reader,
writer: po_siparis_writer,
autoSave: false,
baseParams: {
type: 'POSiparis'
},
proxy: new Ext.data.HttpProxy({
api: {
read: {
url: 'phps/POSiparisGetir.php?lang=dil(lang)',
method: 'POST'
},
create: 'app.php/users/create',
update: 'phps/POKayit.php?lang=dil(lang)',
destroy: {
url: 'app.php/users/destroy',
method: "DELETE"
}
}
}),
sortInfo: {
field: 'id',
direction: 'ASC'
},
listeners: {
save: function (store, batch, data) {
Ext.Msg.alert(dil('Mesaj'), dil('Kayıt Yapıldı.Teşekkürler.'));
window.bolgesel.siparisler.genel.mnt.dataStoreUpdate = 0;
},
update: function () {
window.bolgesel.siparisler.genel.mnt.dataStoreUpdate = 1;
}
},
groupField: 'grup'
}),
columns: [{
header: dil('Grup '),
width: 20,
sortable: true,
dataIndex: 'grup'
}, {
header: dil('Item No'),
width: 20,
sortable: true,
dataIndex: 'item_no'
}, {
header: dil('Kod'),
width: 40,
sortable: true,
dataIndex: 'code'
}, {
header: dil('Açıklama'),
sortable: true,
dataIndex: 'aciklama'
}, {
header: dil('Fiyat'),
id: "fiyat_column",
width: 30,
sortable: true,
renderer: Ext.util.Format.numberRenderer('$0.000,00/i'),
dataIndex: 'fiyat'
}, {
id: "tipikeadet",
header: dil('Adet'),
width: 30,
sortable: true,
dataIndex: 'adet',
editor: new Ext.form.NumberField({
enableKeyEvents: true,
allowBlank: false,
allowNegative: false,
style: 'text-align:left'
})
}, {
header: dil('Toplam'),
width: 30,
sortable: true,
renderer: function (v, params, record) {
return Ext.util.Format.number(record.data.fiyat * record.data.adet, '$0.000,00/i');
},
dataIndex: 'toplam',
summaryType: 'totalCost',
summaryRenderer: Ext.util.Format.numberRenderer('$0.000,00/i')
}],
view: new Ext.grid.GroupingView({
forceFit: true,
showGroupName: false,
enableNoGroups: false,
enableGroupingMenu: false,
hideGroupedColumn: true,
startCollapsed: true
}),
plugins: summary,
frame: true,
width: 800,
height: 250,
clicksToEdit: 1,
collapsible: false,
animCollapse: false,
trackMouseOver: false,
enableColumnMove: false,
iconCls: 'siparis'
});
I want to change the fiyat column speficitation in the po_combolu_toolbar2 select function.

Related

extjs 3.3 grid grouping and sum

I want to write the sums of some data under grouping and grid. I am sharing my codes, I will be glad if you help. Thank you.
var store = new Ext.data.JsonStore({
url: 'ajaxQueryData?_qid=4146',
root: 'data',
totalProperty: 'browseInfo.totalCount',
remoteSort: true,
id: 'sira_no',
sortInfo: {
field: 'sira_no',
direction: 'ASC'
},
fields: [
{
name: "sira_no",
type: "int"
},
{
name: "branch_id_qw_"
},
{
name: "firma"
},
{
name: "sevk_adres"
},
{
name: "malzeme"
},
{
name: "group_id_qw_"
},
{
name: "kategori_id_qw_"
},
{
name: "alt_kategori_id_qw_"
},
{
name: "vade"
},
{
name: "birim_tip_qw_"
},
{
name: "miktar"
},
{
name: "kg"
},
{
name: "birim_fiyat"
},
{
name: "para_birim_qw_"
},
{
name: "net_tutar"
},
{
name: "irsaliye_dt"
},
{
name: "irsaliye_no"
},
{
name: "fatura_dt"
},
{
name: "fatura_no"
},
{
name: "sehir_id_qw_"
},
{
name: "ilce_id_qw_"
},
{
name: "satis_sorumlusu_id_qw_"
}
],
pageSize: 50,
autoLoad: {
params: {
startRow: 0,
fetchCount: 50
}
}
// proxy: new Ext.data.HttpProxy({
// })
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [{
id: 'sira_no',
header: 'Sıra No',
width: 50,
sortable: true,
dataIndex: 'sira_no'
},
{
header: 'Şube',
width: 150,
sortable: true,
dataIndex: 'branch_id_qw_'
},
{
header: 'Firma',
width: 250,
sortable: true,
dataIndex: 'firma'
},
{
header: 'Sevk Adresi',
width: 150,
sortable: true,
hidden: true,
dataIndex: 'sevk_adres'
},
{
header: 'Malzeme Adı',
width: 200,
sortable: true,
hidden: true,
dataIndex: 'malzeme'
},
{
header: 'Grup',
width: 100,
sortable: true,
dataIndex: 'group_id_qw_'
},
{
header: 'Kategori',
width: 100,
sortable: true,
dataIndex: 'kategori_id_qw_'
},
{
header: 'Alt Kategori',
width: 100,
sortable: true,
dataIndex: 'alt_kategori_id_qw_'
},
{
header: 'Vade (gün)',
width: 80,
sortable: true,
dataIndex: 'vade'
},
{
header: 'Birim',
width: 50,
sortable: true,
hidden: true,
dataIndex: 'birim_tip_qw_'
},
{
header: 'Miktar',
width: 80,
sortable: true,
hidden: true,
dataIndex: 'miktar'
},
{
header: 'Kg',
width: 80,
sortable: true,
dataIndex: 'kg'
},
{
header: 'Birim Fiyat',
width: 80,
sortable: true,
dataIndex: 'birim_fiyat'
},
{
header: 'Para Birimi',
width: 50,
sortable: true,
dataIndex: 'para_birim_qw_'
},
{
header: 'Net Tutar',
width: 80,
sortable: true,
dataIndex: 'net_tutar'
},
{
header: 'İrsaliye Tarihi',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'irsaliye_dt'
},
{
header: 'İrsaliye No',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'irsaliye_no'
},
{
header: 'Fatura Tarihi',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'fatura_dt'
},
{
header: 'Fatura No',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'fatura_no'
},
{
header: 'Şehir',
width: 120,
sortable: true,
dataIndex: 'sehir_id_qw_'
},
{
header: 'İlçe',
width: 120,
sortable: true,
dataIndex: 'ilce_id_qw_'
},
{
header: 'Satış Sorumlusu',
width: 200,
sortable: true,
dataIndex: 'satis_sorumlusu_id_qw_'
}
],
viewConfig: {
forcefit: true
},
//resizable: true,
width: function() {
$("#aciklama").width();
$(document).ready(function() {
$(".slide-left").click(function() {
Width: $("#aciklama").width();
})
$(".slide-right").click(function() {
Width: $("#aciklama").width() - 334;
})
})
},
height: $("#aciklama").height(),
frame: true,
tbar: new Ext.PagingToolbar({
pageSize: 50,
store: store,
displayInfo: true
})
});
grid.render('aciklama');

how to use bufferedrenderer instead of paging toolbar in extjs

{ extend: 'Ext.grid.Panel',
autoScroll: true,
layout: 'fit',
padding: '5 5 5 0',
width: 450,
selModel: {
mode: 'MULTI',
pruneRemoved: false
},
config: {
labels: {},
defSel: {},
keepSelections: true
},
initComponent: function() {
this.title = this.labels.MEAS_LIST_PANEL_TITLE;
var measStore = Optima.store.Measurement.create();
this.store = measStore;
this.columns = [{
text: 'list',
sortable: true,
dataIndex: 'name',
flex: 1
}, {
text: 'unit'
sortable: true,
dataIndex: 'unit',
flex: 1
}, {
text: 'sample'
sortable: true,
dataIndex: 'sampletime',
flex: 1
}, {
text: 'desc',
sortable: true,
id: 'desc',
dataIndex: 'desc',
flex: 1
}];
this.bbar = {
xtype: 'pagingtoolbar',
pageSize: 25,
store: measStore,
displayInfo: false
};
this.callParent(arguments);
}
});
You should use the buffered store.
Ext.create('Ext.data.BufferedStore', {
storeId: 'exampleStore',
autoLoad : true,
pageSize : 100,
fields: ['userId', 'id', 'title'],
proxy : {
type : 'ajax',
...
}
});
Then get rid of the paging toolbar since the buffered store will automatically page based off page size.
A BufferedStore maintains a sparsely populated map of pages corresponding to an extremely large server-side dataset.
For more details you can refer ExtJS Docs for BufferedStore
I have created an sencha fiddle demo this will show how it is working.
Ext.define('ForumThread', {//Define model
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var store = Ext.create('Ext.data.BufferedStore', {
model: 'ForumThread',
remoteGroup: true,
leadingBufferZone: 300,
pageSize: 50,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'https://www.sencha.com/forum/remote_topics/index.php',
reader: {
rootProperty: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true,
// sends single group as multi parameter
simpleGroupMode: true,
// This particular service cannot sort on more than one field, so grouping === sorting.
groupParam: 'sort',
groupDirectionParam: 'dir'
},
sorters: [{
property: 'threadid',
direction: 'ASC'
}],
autoLoad: true,
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
groupchange: function (store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;
for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function (store, operation) {
if (operation.getGrouper()) {
operation.setSorters(null);
}
}
}
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
var grid = Ext.create('Ext.grid.Panel', {
width: '100%',
height: 500,
collapsible: true,
title: 'Buffer grid example with buffer store',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
viewConfig: {
trackOver: false
},
features: [{
ftype: 'grouping',
hideGroupedHeader: false
}],
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
}, {
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
groupable: false,
cellWrap: true,
filter: true
}, {
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true,
groupable: false
}, {
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false,
filter: {
type: 'numeric'
}
}, {
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('d-M-Y h:i A'),
sortable: true,
groupable: false
}],
renderTo: Ext.getBody()
});

Ext JS - loading values in second grid based on row selection in first grid

I have 2 grids... In the first grid, I am showing some details but the second grid will be empty. When I choose any row in the first grid, the second grid has to show the values based on the row value from the first grid.
for 1st grid,
Ext.define('Admin.view.report004.Dashboard400',
{
alias: 'widget.report004.list400',
itemId: 'dashboard400',
title : 'Summary By Bank',
stripeRows: true,
border: true,
loadMask: {
msg: 'Please wait..'
},
extend: 'Ext.grid.GridPanel',
layout : 'fit',
bodyPadding: 10,
title: bundles.getLocalizedString('summary_by'),
store: report004Store,
features: [{
ftype: 'summary'
}],
columns: [
{id: 'report004CustomerName', header: bundles.getLocalizedString('customer_name'),
width: 150, sortable: false, hidden: false,
dataIndex: 'customerName',
align:'left',
summaryRenderer: function(value, summaryData, dataIndex) {
return '<b>Totals</b>';
}
},
{id: 'report004Count', header: bundles.getLocalizedString('count'),
width: 150, sortable: false, hidden: false,
dataIndex: 'count',
align:'left'
},
]
});
For grid 2,
Ext.define('Admin.view.report004.Dashboard401',
{
alias: 'widget.report004.list100',
itemId: 'dashboard401',
title : 'By Specific Dataset',
stripeRows: true,
border: true,
loadMask: {
msg: 'Please wait..'
},
extend: 'Ext.grid.GridPanel',
layout : 'fit',
bodyPadding: 10,
title: bundles.getLocalizedString('xxx'),
store: dashboard_401,
features: [{
ftype: 'summary'
}],
columns: [
{
id: 'name2', header: bundles.getLocalizedString('name'),
width: 200, sortable: false, hidden: false,
dataIndex: 'name',
summaryRenderer: function(value, summaryData, dataIndex) {
return '<b>Totals</b>';
}
},
{id: 'companyPaidCount2', header: bundles.getLocalizedString('paid_count'),
width: 150, sortable: false, hidden: false,
dataIndex: 'companyPaidCount',xtype: 'numbercolumn', format : '0,000',
align:'right',
summaryType: 'sum',
summaryRenderer: function(value, summaryData, dataIndex){
return "<b>" + value + "</b>";
}
]
});
Kindly help me on this..
Use select listener
for your first grid. grid select listener
Ext.define('Admin.view.report004.Dashboard400', {
alias: 'widget.report004.list400',
itemId: 'dashboard400',
title: 'Summary By Bank',
stripeRows: true,
border: true,
loadMask: {
msg: 'Please wait..'
},
extend: 'Ext.grid.GridPanel',
layout: 'fit',
bodyPadding: 10,
title: bundles.getLocalizedString('summary_by'),
store: report004Store,
features: [{
ftype: 'summary'
}],
listeners: {
select: function(grid, record, index) {
Ext.Ajax.request({
url: 'page.php',
params: {
id: record.get("id")
},
success: function(response) {
var data = Ext.decode(response.responseText);
dashboard_401.loadData(data);
}
});
}
},
columns: [
{
id: 'report004CustomerName',
header: bundles.getLocalizedString('customer_name'),
width: 150,
sortable: false,
hidden: false,
dataIndex: 'customerName',
align: 'left',
summaryRenderer: function(value, summaryData, dataIndex) {
return '<b>Totals</b>';
}
}, {
id: 'report004Count',
header: bundles.getLocalizedString('count'),
width: 150,
sortable: false,
hidden: false,
dataIndex: 'count',
align: 'left'
},
]
});

How does the ExtJS column grouping work in EditorGridPanel?

How does the 'ExtJS' column grouping work in 'EditorGridPanel'? For, in this example: 'http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/group-header-grid.html', it seems like it's not really working, yet its working fine for me in 'simple grid panel'.
Ext.apply(this,
{
store: new Ext.data.Store(
{
reader: new Ext.data.JsonReader(
{
id: '"ID"',
totalProperty: 'totalCount',
root: 'rows',
fields: [
{ name: 'ID', type: 'string' },
{ name: 'organizationID', type: 'string' },
{ name: 'StructureID', type: 'string' },
{ name: 'Type', type: 'string' },
{ name: 'PropID', type: 'string' },
{ name: 'ProtectedSurface', type: 'string' },
{ name: 'Content', type: 'string' },
{ name: 'CPType', type: 'string' },
{ name: 'Location', type: 'string' },
]
}),
proxy: new Ext.data.HttpProxy({ url: this.url }),
baseParams: { cmd: 'getData1', objName: this.objName, aad: Ext.getCmp('clientidforStr').getValue() },
sortInfo: { field: '"ID"', direction: 'ASC' },
remoteSort: true,
mode: 'local',
autoLoad: true,
listeners: {
load: {
scope: this, fn: function (store) {
// keep modified records accros paging
var modified = store.getModifiedRecords();
for (var i = 0; i < modified.length; i++) {
var r = store.getById(modified[i].id);
if (r) {
var changes = modified[i].getChanges();
for (p in changes) {
if (changes.hasOwnProperty(p)) {
r.set(p, changes[p]);
}
}
}
}
//alert(Ext.getCmp('areaidforStr').getValue());
}
},
exception: function (proxy, type, action, options, response, arg) {
if (response.responseText != '') {
Ext.Msg.alert('From getData Command', response.responseText);
}
//this.showError(response.responseText, 'from getData Command:');
//alert(response.responseText + '\n from getData Command ');
console.log(response);
if (type === 'remote') {
// success is false
// do your error handling here
alert('error' + response);
console.log(response); // the response object sent from the server
}
}
}
}),
features: [{
groupHeaderTpl: 'Subject: {Location}',
ftype: 'groupingsummary'
}],
columns: [
{
header: 'ID',
id: 'ID',
dataIndex: 'ID',
hidden: true,
hideable: false,
sortable: true,
editor: new Ext.form.TextField({ allowBlank: false })
},
{
header: 'Structure Group',
id: 'StructureID',
dataIndex: 'StructureID', editable: false,
width: 45,
sortable: true,
editor: comboStructureAreaRelation,
renderer: Ext.util.Format.comboRenderer(comboStructureAreaRelation, AssignedGridStoreforStr)
},
{
header: 'Structure',
dataIndex: 'Type',
id: 'Type', editable: false,
width: 45,
sortable: true,
editor: StructureTypeCombo,
renderer: Ext.util.Format.comboRenderer(StructureTypeCombo, StorestrructureType)
},
{
header: 'Asset ID',
dataIndex: 'PropID', editable: false,
id: 'PropID',
width: 60,
sortable: true,
editor: new Ext.form.TextField({ allowBlank: false, cls:'textStyle' })
},
{
header: 'Protected Surface',
dataIndex: 'ProtectedSurface',
id: 'ProtectedSurface',
editable: false,
width: 45,
sortable: true,
editor: ComboTankProtectedSurface,
renderer: Ext.util.Format.comboRenderer(ComboTankProtectedSurface, storeTankProtectedSurface)
},
{
header: 'DATA EX',
id: 'ProtectedSurface11',
columns: [
{
header: 'Asset ID',
dataIndex: 'PropID', editable: false,
id: 'PropID11',
width: 60,
sortable: true,
editor: new Ext.form.TextField({ allowBlank: false, cls: 'textStyle' })
},
{
header: 'Protected Surface',
dataIndex: 'ProtectedSurface',
id: 'ProtectedSurface11',
editable: false,
width: 45,
sortable: true,
editor: ComboTankProtectedSurface,
renderer: Ext.util.Format.comboRenderer(ComboTankProtectedSurface, storeTankProtectedSurface)
},
]
},
{
header: 'Content',
dataIndex: 'Content', editable: false,
id: 'Content',
width: 60,
sortable: true,
},
{
header: 'CP Type',
dataIndex: 'CPType', editable: false,
id: 'CPType',
width: 60,
sortable: true,
},
{
header: 'Location',
dataIndex: 'Location', editable: false,
id: 'Location',
width: 60,
sortable: true,
},

ExtJS Grid will not sort

I have a grid in ExtJS 3.4 but it will not sort. I am getting this error in firebug when clicking on a column header:
invalid Array.prototype.sort argument
Line 48523
How do I fix it?
Here is the store, column, and grid definition:
function AircraftFeesStore() {
return new Ext.data.JsonStore(Ext.apply({
url: AVRMS.ROOT_CONTEXT + "/ssl/json/general/GetAircraftFees.aspx",
idProperty: 'AircraftOid',
baseParams: {
OwnerOid: 0,
SelectedAircraft: ''
},
fields: ['AircraftOid','NNumber', 'Make', 'Model', 'RegistrationFeeFormatted']
}));
}
var colModel = new Ext.grid.ColumnModel([
{ id: 'AircraftOid', width: 100, sortable: true, locked: true, hidden: true, dataIndex: 'AircraftOid' },
{ header: "N-Number", width: 100, sortable: true, hidden: true, dataIndex: 'NNumber' },
{ header: "Make", width: 250, sortable: true, hideable: false, dataIndex: 'Make' },
{ header: "Model", width: 250, sortable: true, hideable: false, dataIndex: 'Model' },
{ header: "Registration Fee", width: 150, sortable: true, hideable: false, dataIndex: 'RegistrationFeeFormatted' }
]);
var registrationGrid = new Ext.grid.GridPanel(
{
store: aircraftFeesStore,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
width: 970,
height: 150,
split: true,
region: 'north',
frame: true,
title: 'Selected Aircraft with Total'
});
Try giving
remoteSort:true
in your grid

Resources