Related
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'
},
]
});
I have a problem rendering data store grid on window modal.
here's the code on data.store :
var list_pp = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
model: 'list_pp',
proxy: {
type: 'ajax',
api: {
read: pp_get_url,
create: pp_set_url,
update: pp_up_url,
destroy: pp_del_url
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
},
writer: {
type: 'json',
writeAllFields: true,
root: 'data'
}
},
//autoLoad: false,
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
}
}
});
here's the code that render on some page :
var grid_pp_list = Ext.create('Ext.grid.Panel',
{
width: '100%',
frame: false,
loadMask: true,
collapsible: false,
title: 'Detail PP',
store: list_pp,
columns: [
{
header: 'No PP',
width: 130,
sortable: true,
dataIndex: 'doc_no',
xtype: 'templatecolumn',
tpl: '{doc_no}<br/>{pp_id}/{sifat}<br/>'
}, {
header: 'Tgl.',
width: 100,
sortable: true,
dataIndex: 'pp_date',
xtype: 'datecolumn',
format:'y-m-d'
}, {
header: 'SBU Pemesan',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
},{
header: 'Validasi',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
},{
header: 'Action',
xtype: 'actioncolumn',
width: 60,
sortable: false,
menuDisabled: true,
xtype: 'templatecolumn',
tpl: 'Detail'
},{
header: 'Modified by',
width: 120,
dataIndex: 'modified_by',
sortable: true,
xtype: 'templatecolumn',
tpl: '<i class="icon-user"></i>{modified_by}'
},{
header: 'Modified Date',
width: 120,
sortable: true,
dataIndex: 'modified_date',
xtype: 'datecolumn',
format:'y-m-d H:m:s'
}]
here's the code on window modal :
var modal_pp = Ext.create('Ext.grid.Panel',
{
width: '100%',
frame: false,
loadMask: true,
collapsible: false,
title: 'Modal PP',
store: list_pp,
columns: [
{
header: 'No PP',
width: 130,
sortable: true,
dataIndex: 'doc_no',
xtype: 'templatecolumn',
tpl: '{doc_no}<br/>{pp_id}/{sifat}<br/>'
}, {
header: 'Tgl.',
width: 100,
sortable: true,
dataIndex: 'pp_date',
xtype: 'datecolumn',
format:'y-m-d'
}, {
header: 'SBU Pemesan',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
}],
dockedItems:
[{
xtype: 'pagingtoolbar',
store: list_pp, // same store GridPanel
dock: 'bottom',
displayInfo: true
}]
});
here's generate trigger button trigger for modal window:
text: 'Generate',
iconCls: 'icon-add',
handler: function(){
if (!win) {
win = Ext.widget('window', {
closeAction: 'hide',
width: 1000,
height: 620,
minWidth: 300,
minHeight: 300,
layout: 'fit',
resizable: true,
modal: true,
items: modal_pp
});
}
win.show();
}
in rendering page everything is fine, but in window modal i can't render data store. please if anyone can give a guide or help i will be really appreciate it.
Remove width attributes from the modal grid. You cant specify width in % and if your containing parent has fit layout it doesn't matter anyway.
Wrap items in an array: items: [modal_pp]
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.
I've developed a website which saves some data of companies in four tabs.
The site starts in a tab which contains panels and textboxes.
When I switch to the "Kontakte"-tab the appearing grid is displayed correctly like this
When I switch the tab again (in this case to the "Veranstaltungen"-tab), the grid in the new tab is displayed incorrectly.
The size and the data of the columns is incorrect. As you can see the column "Nachname" is displayed twice, but the header of the first column should be "Vorname". Additionally, the width of the first column seems to be not correct, although the forcefit-property of the grid is set "true".
A very similar error occurs when i firstly switch to the "Veranstaltungen"-tab and then I switch to the "Kontakte"-tab. Now the grid of the "Veranstaltungen"-tab is correct, but the size and the data of the columns in the "Kontakte"-tab are incorrect. Again, the size and the header of the first column is incorrect (should be "Anrede").
To sum, the grid in the tab which is displayed firstly is correct, but the grid in the second displayed tab is incorrect. Does anyone know why this error occur?
A panel which is rendered to a div contains the headline and the tabwidget.
Sometimes it happens that other columns aren't diplayed correctly, so it seems like the configuration of the first column is not responsible for the problem. Furthermore, if the stores are empty, the second displayed tab and grid is displayed correctly.
So, finally, what do you think is the problem?
Thx for every advice, Patrick Kerschbaum
Code of the "Kontakte"-store and -grid:
var companyContactsData = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url: 'detailCompanies_contacts_getData.php?un_id=' + un_id + '',
reader: {
type: 'json',
idProperty: 'ko_vorname'
},
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false
})
}),
fields: ['ko_id', 'ko_anrede', 'ko_titel', 'ko_vorname', 'ko_nachname', 'ko_email1', 'ko_telg1', 'funktionen']
});
companyContactsData.load();
var companyContactsGrid = new Ext.grid.GridPanel({
store: companyContactsData,
title: 'Kontakte',
width: 1000,
padding: 10,
frame: true,
autoHeight: true,
forceFit: true,
columns: [{
id: 'ko_id',
header: 'ko_id',
dataIndex: 'ko_id',
hidden: true
}, {
id: 'ko_anrede',
header: 'Anrede',
dataIndex: 'ko_anrede',
sortable: true,
width: 50
}, {
id: 'ko_titel',
header: 'Titel',
dataIndex: 'ko_titel',
sortable: true,
width: 50
}, {
id: 'ko_nachname',
header: 'Nachname',
dataIndex: 'ko_nachname',
sortable: true
}, {
id: 'ko_vorname',
header: 'Vorname',
dataIndex: 'ko_vorname',
sortable: true
}, {
id: 'funktionen',
header: 'Funktionen',
dataIndex: 'funktionen',
sortable: true
}, {
id: 'ko_telg1',
header: 'Telg1',
dataIndex: 'ko_telg1',
sortable: true
}, {
id: 'ko_email1',
header: 'Email1',
dataIndex: 'ko_email1',
sortable: true
}, {
xtype: 'actioncolumn',
width: 50,
items: [<?php if($_SESSION['ko_detail']) { ?> {
icon: 'pics/information.png',
tooltip: 'Zur Kontakt-Detailansicht wechseln',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var kontaktid = rec.get('ko_id');
var url = "../../manageContacts/detailContacts/detailContacts.php?ko_id=" + kontaktid;
top.location.href = url;
}
}
<?php } ?>
]
}],
style: {
"vertical-align": "middle",
"text-align": "left"
}
});
Code of the "Veranstaltungen"-store and -grid:
var companyEventsData = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url: 'detailCompanies_events_getData.php?un_id=' + un_id + '',
reader: {
type: 'json',
idProperty: 'ko_anrede'
},
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false
})
}),
fields: ['v_id', 'v_eingabedatum', 'v_name', 'v_teilgenommen', 'v_eingeladen', 'ko_vorname', 'ko_nachname', 'kv_eingeladen', 'kv_teilgenommen', 'kv_bemerkung']
});
companyEventsData.load();
var companyEventsGrid = new Ext.grid.GridPanel({
store: companyEventsData,
title: 'Veranstaltungen',
width: 1000,
padding: 10,
frame: true,
autoHeight: true,
forceFit: true,
columns: [{
id: 'v_id',
dataIndex: 'v_id',
hidden: true
}, {
id: 'ko_vorname',
header: 'Vorname',
dataIndex: 'ko_vorname',
sortable: true
}, {
id: 'ko_nachname',
header: 'Nachname',
dataIndex: 'ko_nachname',
sortable: true
}, {
id: 'kv_eingeladen',
header: 'Eingeladen',
dataIndex: 'kv_eingeladen',
sortable: true
}, {
id: 'kv_teilgenommen',
header: 'Teilgenommen',
dataIndex: 'kv_teilgenommen',
sortable: true
}, {
id: 'kv_bemerkung',
header: 'Bemerkung',
dataIndex: 'kv_bemerkung',
sortable: true
}, {
id: 'v_eingabedatum',
header: 'Datum',
dataIndex: 'v_eingabedatum',
sortable: true
}, {
id: 'v_name',
header: 'Name',
dataIndex: 'v_name',
sortable: true
}, {
id: 'v_teilgenommen',
header: 'Teilnehmeranzahl',
dataIndex: 'v_teilgenommen',
sortable: true
}, {
id: 'v_eingeladen',
header: 'Eingeladene',
dataIndex: 'v_eingeladen',
sortable: true
}],
style: {
"vertical-align": "middle",
"text-align": "left"
}
});
Code of the tabwidget:
var tabs = Ext.createWidget('tabpanel', {
activeTab: 0,
width: 1000,
plain: true,
defaults: {
autoScroll: true,
},
items: [companyBasicDataPanel, companyContactsGrid, companyClassificationsGrid, companyEventsGrid]
});
Code of the main panel:
var detailCompanies_panel = new Ext.Panel({
renderTo: 'content',
autoHeight: true,
bodyBorder: false,
border: 0,
cls: 'my-component',
width: 1000,
items: [untz1_label, tabs],
style: {
"margin-left": "auto",
"margin-right": "auto"
}
});
I came across the same issue.
Turns out the id's where declared double, as they are in your code.
You should never assign ids manually, besides from id: Ext.id().
I'm pretty sure this a trivial problem and i'm just being a bit stupid. Your help would be hugely appreciated.
In controls/dashboard.js I have:
Ext.ill.WCSS.controls.dashboard = {
xtype:'portal',
region:'center',
margins:'35 5 5 0',
items:[{
columnWidth: 1,
style:'padding:10px',
items:[{
title: 'My Cluster Jobs',
layout:'fit',
html: "test"
}]
},{
columnWidth: 1,
style:'padding:10px',
items:[{
title: 'All Cluster Jobs',
iconCls: 'icon-queue',
html: "test",
items: new Ext.grid.GridPanel({
title: 'Cluster Job Queue',
store: Ext.ill.WCSS.stores.dashboardClusterJobs,
width: 791,
height: 333,
frame: true,
loadMask: true,
stateful: false,
autoHeight: true,
stripeRows: true,
floating: false,
footer: false,
collapsible: false,
animCollapse: false,
titleCollapse: false,
columns:[
{
xtype: 'gridcolumn',
header: 'Job ID',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'JB_job_number',
fixed: false
},
{
xtype: 'gridcolumn',
header: 'Priority',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'JAT_prio',
fixed: false
},
{
xtype: 'gridcolumn',
header: 'User',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'JB_owner'
},
{
xtype: 'gridcolumn',
header: 'State',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'state'
},
{
xtype: 'gridcolumn',
header: 'Date Submitted',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'JAT_start_time'
},
{
xtype: 'gridcolumn',
header: 'Queue',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'queue_name'
},
{
xtype: 'gridcolumn',
header: 'CPUs',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'slots'
}
],
bbar: {
xtype: 'paging',
store: 'storeClusterQueue',
displayInfo: true,
refreshText: 'Retrieving queue status...',
emptyMsg: 'No jobs to retrieve',
id: 'clusterQueuePaging'
}
})
}]
}]
};
Simple enough, note the reference to 'Ext.ill.WCSS.stores.dashboardClusterJobs'
So in stores/dashboard.js I just have this:
Ext.ill.WCSS.stores.dashboardClusterJobs = new Ext.data.XmlStore({
storeId: 'storeClusterJobs',
record: 'job_list',
autoLoad: true,
url: 'joblist.xml',
idPath: 'job_info',
remoteSort: false,
fields: [
{
name: 'JB_job_number'
},
{
name: 'JAT_prio'
},
{
name: 'JB_name'
},
{
name: 'JB_owner'
},
{
name: 'state'
},
{
name: 'JAT_start_time'
},
{
name: 'slots'
},
{
name: 'queue_name'
}
]
});
I run the code and I get 'store is undefined' :S It's confusing me a lot. All of the javascripts have been included in the correct order.
i.e.
<script type="text/javascript" src="/js/portal.js"></script>
<script type="text/javascript" src="/js/stores/dashboard.js"></script>
<script type="text/javascript" src="/js/controls/dashboard.js"></script>
Thanks guys!
It might be a namespace issue. What do your Ext.ns declarations look like?
I think we need more info. You're using an xtype of portal (code missing) and it's not obvious how this object is instantiated (code missing).
I figured it out. It was to do with my ordering of javascript files. (ooops!) thanks so much for your help though and apologies for the late response.