ExtJS 4 - Popup on cellclick in grid panel is not displayed - extjs

I have a Problem to open a popup window on cellclick.
When i click on the cell everything overlaid grey, but the window is not displayed.
The code is in the follow. Any idea why the new Window is not displayed?
Thanks and Regards.
var win = Ext.widget('window', {
title: 'Contact Us',
closeAction: 'hide',
width: 400,
height: 400,
minHeight: 400,
layout: 'fit',
resizable: true,
modal: true,
//items: form
});
Ext.define('File',{
extend: 'Ext.data.Model',
fields: [
{name: 'file_id'},
{name: 'file_input_filename'},
{name: 'file_type'},
{name: 'lc_status'},
{name: 'file_input_date'}
]
});
// create the Data Store
var overviewStore = Ext.create('Ext.data.Store', {
model: 'File',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'FileOverview',
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Row',
idProperty: 'file_id',
totalRecords: '#total'
}
}
});
// create the grid
var gridOverview = Ext.create('Ext.grid.Panel', {
store: overviewStore,
id: 'OverviewGridPanelId',
columns: [
{text: "ID", flex: 1, dataIndex: 'file_id', sortable: true},
{text: "Filename", width: 180, dataIndex: 'file_input_filename', sortable: true},
{text: "Filetyp", width: 180, dataIndex: 'file_type', sortable: true},
{text: "Status", width: 180, dataIndex: 'lc_status', sortable: true},
{text: "Imported", width: 115, dataIndex: 'file_input_date', sortable: true}
],
renderTo:'binding-example',
width: 1200,
height: 650,
});
gridOverview.on('cellclick', function(table, td, cellIndex, record, tr, rowIndex, e, eOpts) {
var masterIndex = rowIndex;
//openDialog(record.get('file_id'));
Ext.Msg.alert('locked grid click');
win.show();
});
}

Related

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'
},
]
});

Setting combobox value with extjs

I have a combobox with prefilled values.
On click of approve all button I want to set its value to some value.
Here is my code
var myStore = new Ext.data.ArrayStore({
sortInfo: {field: 'Name', direction: "ASC"},
data: arrHoursData,
fields: [{name: 'Id', type: 'string'},
{name: 'Name', type: 'string'},
{name: 'Hours', type: 'string'},
{name: 'AssignmentId', type: 'string'},
{name: 'Status', type: 'string'}
]
});
var statusStore = new Ext.data.Store({
data: arrStatus,
fields: ['Id', 'Name']
});
var hoursGrid = Ext.create('Ext.grid.Panel', {
store: myStore,
width: 340,
height: 270,
collapsible: false,
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit:1
})
],
columns: [
{header: 'Id', dataIndex: 'Id',hidden: true},
{header: 'Date',dataIndex: 'Name', width:140},
{header: 'Hours',dataIndex: 'Hours', width:100, editor: {xtype: 'numberfield', minValue: 0, allowBlank: false}},
{header: 'Status',dataIndex: 'Status', width:100, editor: { xtype: 'combobox',store: statusStore, queryMode: 'local', displayField: 'Name', valueField: 'Id',id:'status'}, renderer: function (value) {
var label = '';
jQuery.each(arrStatus, function(k,v)
{
if(v['Id'] == value)
label = v['Name'];
});
return label;
}
}
]
});
var win = new Ext.Window({
closable: true,
title: "Edit Hours",
layout: 'form',
modal: true,
width: 360,
height: 300,
plain: true,
border: false,
items: [
{
flex: 1,
xtype: 'container',
style:'margin-top:15px',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[hoursGrid]
}
],
buttons: [
{
text: 'Approve All',
handler: function ()
{
Ext.getCmp('status').setValue(approvedStatusId);
}
}
],
});
win.show(g);
I tried to set its value using getCmp too but it gives me error that
Ext.getCmp('status') is not defined.
You have to set the value on the records, not the combobox. The combobox always uses the value that is set in the record.
grid.getStore().each(function(record) {
record.set("Status",approvedStatusId);
};

how to show data store grid on ext.window.window.modal

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]

Assigning values to a model dynamically

I gave it a try but it did not worked.
I am having two grids and a button. Initially the second grid will remain empty and the first grid will have some records.. When I select a few records in the first grid and click on the button, then the second grid should get populated with the only the selected rows of first grid.
Here is my code:
Ext.QuickTips.init();
var getLocalStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: Ext.grid.dummyData
});
};
var getSelectedStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'Company'
});
};
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid1 = Ext.create('Ext.grid.Panel', {
id: 'grid1',
store: getSelectedStore(),
columns: [
{text: "Company", width: 200, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: 'grid1'
});
var grid2 = Ext.create('Ext.grid.Panel', {
id: 'grid2',
store: getLocalStore(),
selModel: sm,
columns: [
{text: "Company", width: 200, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: 'grid'
});
Ext.widget('button', {
text: 'Click Me',
renderTo: 'btn',
listeners: {
click: function(this1, evnt, eOpts ){
var records = sm.getSelection();
getSelectedStore().loadData(records,true);
grid1.getView().refresh();
/*Ext.each(records, function (record) {
alert(record.get('company'));
});*/
}
}
});
Please let me what's going wrong.
First, you are defining the functions getSelectedStore and getLocalStore which return new store instances when invoked. That way in your click handler you would be grabbing an empty store each time! Lose the function bit and just set variables like this:
var storeToSelectFrom = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: someDataToChooseFrom
});
var storeToPutTo = Ext.create('Ext.data.ArrayStore', {
model: 'Company'
});
Then, define your grids using those variables as the stores:
var grid1 = Ext.create('Ext.grid.Panel',{
store: storeToSelectFrom,
selType: 'checkboxmodel'
// rest of your configs
});
var grid2 = Ext.create('Ext.grid.Panel',{
store: storeToPutTo
// rest of your configs
});
Then, create the button with a click handler:
Ext.widget('button', {
handler: function (button, event) {
var selected = grid1.getSelectionModel().getSelection();
grid2.getStore().add(selected);
}
// rest of your configs
});

Grid inside Tab

I'm trying to put a Grid (Ext.grid.GridPanel) object inside a Tab .
This is the code:
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
autoDestroy: true,
reader: reader,
data: xg.dummyData
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
{header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: 'Change', dataIndex: 'change'},
{header: '% Change', dataIndex: 'pctChange'},
// instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
{
header: 'Last Updated', width: 135, dataIndex: 'lastChange',
xtype: 'datecolumn', format: 'M d, Y'
}
]
}),
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
this.tabs = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
dockedItems: [
{
xtype:'toolbar',
title:'Hello World'
}],
tabBar: {
ui: 'light',
layout: {
pack: 'left'
}
},
items: [
{
cls:'hello',
id:'tab1',
html : '<a>hello</a>',
title:'Monitor'
}, {
cls:'world',
id:'tab2',
xtype: 'map',
html : '<a>hello world</a>',
title:'Map'
}, {
cls:'world',
id:'tab3',
html : '<a>hello world</a>',
dockedItems:grid
}]
});
When I load the page there's no error, but the grid is not shown.
The grid is not a docked item (that's for toolbars and other things that should stick to one side of a container). If you want the grid to take up the entire tab, just add it directly as an item to the TabPanel and it will become the full tab:
items: [
{
cls:'hello',
id:'tab1',
html : '<a>hello</a>',
title:'Monitor'
}, {
cls:'world',
id:'tab2',
xtype: 'map',
html : '<a>hello world</a>',
title:'Map'
},
grid ]

Resources