Related
I am creating a grid inside one penal. Now I wanted to access this grid and for that I am writing a function.
which is like this.
function getGrid(obj, store){
debugger;
}
Here obj is grid and store is store.
But I don't know where to write. How to get the correct scope.
my Store and Grid code is
initComponent:function(){
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole Blood',2,'eSample']
];
// create the data store
var myStor = new Ext.data.ArrayStore({
fields: [
{name: 'Stu'},
{name: 'Sub'},
{name: 'Excl'}
]
});
{
xtype: 'panel',
region:"east",
header:true,
collapsible:true,
autoScroll:true,
width:"30%",
hideBorders:true,
split:true,
items: [{
xtype:'panel',
title:"Panel Header",
items:[],
id:'East_pan',
tbar: this.desToolbar
},{
xtype:'panel',
title:"Result",
items:[{
xtype :'grid',
id: 'COHART_GRID',
selType: 'checkboxmodel',
frame: true,
store: myStor,
autoHeight: true,
stripeRows: true,
columns: [
{
text: 'Study',
id: 'Sd',
header: 'Study',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Stu'
},
{
text: 'Subject',
width: 130,
header: 'Subject',
id:'Sub',
dataIndex: 'Sub',
hidden:false,
},
{
text: 'Exclude',
width: 130,
id:'Ext',
header: 'Exclude',
dataIndex: 'Excl',
hidden:false
}
]
}]
}]
}
}
Thanks for help !!
You can get the grid using getCmp function & after getting the grid you can call getStore on it to get its store:
var obj=Ext.getCmp('COHART_GRID');
var store=obj.getStore();
1) Dont Use getCmp() use Component query.
2) Change id to itemID in the Grid declaration.
xtype :'grid',
itemId: 'COHART_GRID',
selType: 'checkboxmodel',
frame: true,
store: myStor,
autoHeight: true,
stripeRows: true,
3) store = Ext.ComponentQuery.query('#COHART_GRID')[0].getStore().
4) can you access your grid and Store in the Controller.
I have a GridPanel with 5 columns, I put filter:true in every row but it doesn't show filter option and doesn't show the store items either, I see two rows but they are empty.
storeSalvaguardas = [{'codigo':'10', 'tipoDocumento':'final','denominacion':'Documento de prueba', 'version':'2', 'descripcion':'eso'},{'codigo':'10', 'tipoDocumento':'final','denominacion':'Documento de prueba', 'version':'2', 'descripcion':'eso'}];
grid = new Ext.grid.GridPanel({
store: storeSalvaguardas,
requires: [
'Ext.grid.filters.Filters'
],
id: 'tablaGrid',
trackMouseOver: true,
columns: [
{id:'codigo',header: '<bean:message key="label.agr.informes.codigo"/>', width: 10, sortable: true, dataIndex: 'codigo', filter: true},
{id:'tDoc',header: '<bean:message key="label.gi.productos.tipo"/>', width: 10,sortable: true, dataIndex: 'tipoDocumento', filter: true},
{id:'nombre',header: '<bean:message key="label.gestionRecursos.criterios.busqueda.tab1"/>', width: 15,sortable: true, dataIndex: 'denominacion', filter: true},
{id:'version',header: '<bean:message key="label.gd.tab1.version"/>', width: 10,sortable: true, dataIndex: 'version', filter: true},
{id:'descripcion',header: '<bean:message key="label.gd.tab3.anexos.columna.descripcion"/>', width: 55,sortable: false, dataIndex: 'descripcion', filter: true}
],
bbar: [
'<bean:message key="label.agr.dobleclic.modificar"/>'
],
region: 'center',
stripeRows: true,
title:'<bean:message key="label.AGR.analisisgr.listadodocs"/>',
frame:true,
layout:'fit',
border: true,
loadMask: new Ext.LoadMask( Ext.getBody(), {
msg:'<bean:message key="generic.label.cargando"/>'
}),
forceFit: true,
style: 'text-align: left;',
});
Here is the result:
What am I doing wrong? Thank you in advance.
I believe filtering is applied at the Store level.
Here is a snippet from the documentation, with an example:
Filtering and Sorting
Stores can be sorted and filtered - in both cases either remotely or
locally. The sorters and filters are held inside MixedCollection
instances to make them easy to manage. Usually it is sufficient to
either just specify sorters and filters in the Store configuration or
call sort or filter:
var store = Ext.create('Ext.data.Store', {
model: 'User',
sorters: [{
property: 'age',
direction: 'DESC'
}, {
property: 'firstName',
direction: 'ASC'
}],
filters: [{
property: 'firstName',
value: /Ed/
}]
});
The new Store will keep the configured sorters and filters in the
MixedCollection instances mentioned above. By default, sorting and
filtering are both performed locally by the Store - see remoteSort and
remoteFilter to allow the server to perform these operations instead.
Filtering and sorting after the Store has been instantiated is also
easy. Calling filter adds another filter to the Store and
automatically filters the dataset (calling filter with no arguments
simply re-applies all existing filters).
store.filter('eyeColor', 'Brown');
The Column object does not seem to have a filter property so I do not think you can do it that way.
I usually create a form above or at the side of the grid with filter options for particular fields. Here is an Example.
Finally only we needed to include plugins: 'gridfilters', in my code.
This is the final code:
grid = new Ext.grid.GridPanel({
plugins: 'gridfilters',
store: storeDocumento,
listeners: {
'rowdblclick': function (view, record, tr, columnIndex, e) {
var cell = e.getTarget('.x-grid-cell-inner');
if (!cell) {
return;
}
var codigo = record.get('id_doc');
alert('Codigo: ' + codigo);
}
},
requires: [
'Ext.grid.filters.Filters'
],
id: 'tablaGrid',
trackMouseOver: false,
columns: [
{id:'id_doc',header: '', width: 10, sortable: true, dataIndex: 'id_doc', filter: 'string', hidden: true},
{id:'codigo',header: '<bean:message key="label.agr.informes.codigo"/>', width: 10, sortable: true, dataIndex: 'codigo', filter: 'string'},
{id:'tDoc',header: '<bean:message key="label.gi.productos.tipo"/>', width: 10,sortable: true, dataIndex: 'tipoDocumento', filter: 'list'},
{id:'nombre',header: '<bean:message key="label.gestionRecursos.criterios.busqueda.tab1"/>', dataIndex: 'denominacion', width: 15,sortable: true, filter: true},
{id:'version',header: '<bean:message key="label.gd.tab1.version"/>', width: 10,sortable: true, dataIndex: 'version', filter: 'number'},
{id:'fecha',header: 'Fecha', width: 10, sortable: true, dataIndex: 'fecha', filter: 'date'},
{id:'descripcion',header: '<bean:message key="label.gd.tab3.anexos.columna.descripcion"/>', width: 55, dataIndex: 'descripcion', sortable: false, filter: false}
],
bbar: [
'<bean:message key="label.agr.dobleclic.modificar"/>'
],
region: 'center',
stripeRows: true,
title:'<bean:message key="label.AGR.analisisgr.listadodocs"/>',
frame:true,
layout:'fit',
border: true,
loadMask: new Ext.LoadMask( Ext.getBody(), {
msg:'<bean:message key="generic.label.cargando"/>'
}),
forceFit: true,
style: 'text-align: left;',
});
I am new to ExtJs and I found myself unable to use a grid:
As the header doesn't render correctly I am unable do sort, resize or even notice when I click on a grid item.
The grid code is this:
Ext.define('Simviab.view.empresa.SociosGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.sociosgrid',
store: 'sociosempresa',
width: 400,
height: 200,
columns: [
{text: 'Nome do Socio', dataIndex: 'TE_RAZAO', flex:1},
{text: 'Cargo/Função', dataIndex: 'TS_CARGO', width: 100},
{text: '%', dataIndex: 'TS_PERCENTUAL', width: 100},
{text: 'Participação no Capital Social', dataIndex: 'TS_PARTICIPACAO', width: 150}
]
});
I am rendering it onto a window, like this:
Ext.define('Simviab.view.empresa.SociosWindow', {
extend: 'Ext.window.Window',
alias: 'widget.socioswindow',
title: 'Adicionar sócios',
modal: true,
autoShow: true,
iconCls: 'icon-form',
width: 400,
height: 400,
items:[
{
xtype:'label',
text: 'Adicionar sócios a Empresa: ',
itemId: 'empresaNome',
},{
xtype: 'fieldset',
title: 'Capital Social',
items: [
{
xtype: 'textfield',
fieldLabel: 'Nome do Sócio',
maxLength: 50,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Cargo/Função',
maxLength: 50,
allowBlank: false
},
{
xtype: 'numberfield',
fieldLabel: 'Percentual de participação',
maxValue: 100,
minValue: 1,
allowBlank: false,
step: 0.5
}
]
},{
xtype: 'sociosgrid'
}
]
});
Where I am going wrong?
I finally found out that the problem was with the app folder generated by Sencha CMD, now I have created a new app and put my code there and now it's working good...
The strange thing is that I had tried to create another app before with no success!
I am using Extjs 4.2 grid for my application. In my grid there is an option to select multiple rows and to delete them(via checkbox). But I am but the selected rows not returning any values.
Bellow is my code..
###########################################################################
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../js/extjs_4_2/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
{name: 'patient_name'},
{name: 'referrer_provider'},
{name: 'admit_date'},
{name: 'added_date'},
{name: 'billing_date'},
{name: 'dob'},
{name: 'loc_name'},
{name: 'physician_name'},
{name: 'imploded_diagnosis_name'},
{name: 'imploded_procedure_name'},
{name: 'imploded_optional_name'},
{name: 'imploded_quick_list_name'},
{name: 'med_record_no'},
{name: 'message'}
],
idProperty: 'bill_id'
});
var url = {
remote: '../new_charges_json.php'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
url: (local ? url.local : url.remote),
reader: {
root: 'charges_details',
totalProperty: 'total_count'
},
simpleSortMode: true
},
sorters: [{
property: 'patient_name',
direction: 'DESC'
}]
});
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [{
type: 'string',
dataIndex: 'patient_name'
}]
};
// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createColumns = function (finish, start) {
var columns = [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../js/extjs_4_2/examples/shared/icons/fam/user_profile.png', // Use a URL in the icon config
tooltip: 'Patient Profile',
renderer: renderTopic,
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Bill Id: " + rec.get('bill_id'));
//Ext.Msg.alert('Bill Info', rec.get('patient_name')+ ", Bill Id: " +rec.get('bill_id'));
window.location.href="../newdash/profile.php?bill_id="+rec.get('bill_id');
}
},
]
},
{
dataIndex: 'patient_name',
text: 'Patient Name',
sortable: true,
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
//,filter: {type: 'numeric'}
}, {
dataIndex: 'referrer_provider',
text: 'Referring',
sortable: true
//flex: 1,
}, {
dataIndex: 'admit_date',
text: 'Admit date',
}, {
dataIndex: 'added_date',
text: 'Sign-on date'
}, {
dataIndex: 'billing_date',
text: 'Date Of Service',
filter: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'dob',
text: 'DOB'
// this column's filter is defined in the filters feature config
},{
dataIndex: 'loc_name',
text: 'Location',
sortable: true
},{
dataIndex: 'physician_name',
text: 'Physician (BILLED)',
sortable: true
},{
dataIndex: 'imploded_diagnosis_name',
text: 'Diagnosis'
},{
dataIndex: 'imploded_procedure_name',
text: 'Procedure'
},{
dataIndex: 'imploded_optional_name',
text: 'OPT Template'
},{
dataIndex: 'imploded_quick_list_name',
text: 'Quick List'
},{
dataIndex: 'med_record_no',
text: 'Medical Record Number'
},{
dataIndex: 'message',
text: 'TEXT or NOTES'
}
];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'bill_id'}
],
checkOnly: true,
mode: 'multi',
enableKeyNav: false,
listeners: {
selectionchange: function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length === 0);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
//width: 1024,
height: 500,
title: 'Charge Information',
store: store,
//disableSelection: true,
loadMask: true,
features: [filters],
forceFit: true,
viewConfig: {
stripeRows: true,
enableTextSelection: true
},
// grid columns
colModel: createColumns(15),
selModel: selModel,
// inline buttons
dockedItems: [
{
xtype: 'toolbar',
items: [{
itemId: 'removeButton',
text:'Charge Batch',
tooltip:'Charge Batch',
disabled: false,
enableToggle: true,
toggleHandler: function() { // Here goes the delete functionality
alert(selModel.getCount());
var selected = selModel.getView().getSelectionModel().getSelections();
alert(selected.length);
var selectedIds;
if(selected.length>0) {
for(var i=0;i<selected.length;i++) {
if(i==0)
{
selectedIds = selected[i].get("bill_id");
}
else
{
selectedIds = selectedIds + "," + selected[i].get("bill_id");
}
}
}
alert("Seleted Id's: "+selectedIds);return false;
}
}]
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying charges {0} - {1} of {2}',
emptyMsg: "No charges to display"
}),
renderTo: 'charges-paging-grid'
});
store.loadPage(1);
});
#
It's giving the numbers in alert dialogue of the selected rows,here
alert(selModel.getCount());
But after this it's throwing a javascript error "selModel.getView is not a function" in the line bellow
var selected = selModel.getView().getSelectionModel().getSelections();
I changed it to var selected = grid.getView().getSelectionModel().getSelections(); Still it's throwing same kind of error(grid.getView is not a function).
Try this
var selected = selModel.getSelection();
Instead of this
var selected = selModel.getSelectionModel().getSelections();
You already have the selection model, why are you trying to ask to get the view to go back to the selection model? It's like doing node.parentNode.childNodes[0].innerHTML.
selModel.getSelection(); is sufficient. Also be sure to read the docs, there's no getView method listed there for Ext.selection.CheckboxModel, so you just made that up!
I am trying to make a proof of concept ExtJS datagrid en route to moving to a server-based store. At present my code is as follows:
var arrayData = [
['', 'Held', '', '', 'abc', '', '100.00', '0.00', 'Internal Approval'],
/* 11 similar rows deleted for sanitization's sake */
/* I've tried with and without quotes around the monetary amounts. */
];
var nameRecord = Ext.data.Record.create([
{name: 'approved_date', mapping: 1},
{name: 'approval_status', mapping: 2},
{name: 'approval_id', mapping: 3},
{name: 'reference_id', mapping: 4},
{name: 'manufacturer_distributor_name', mapping: 5},
{name: 'shipping_authorization_number', mapping: 6},
{name: 'purchase_order_number', mapping: 7},
{name: 'original_amount', mapping: 8},
{name: 'open_amount', mapping: 9},
{name: 'requestor', mapping: 10}
]);
var arrayReader = new Ext.data.ArrayReader({}, nameRecord);
var memoryProxy = new Ext.data.MemoryProxy(arrayData);
var store = new Ext.data.Store({
reader: arrayReader,
proxy: memoryProxy
});
var columnModel = new Ext.grid.ColumnModel([
{
header: 'Approved Date',
sortable: true,
dataIndex: 'approved_date'
},
{
header: 'Approval Status',
sortable: true,
dataIndex: 'approval_status'
},
{
header: 'Approval ID',
sortable: true,
dataIndex: 'approval_id'
},
{
header: 'Reference ID',
sortable: true,
dataIndex: 'reference_id'
},
{
header: 'Manufacturer / Distributor Name',
sortable: true,
dataIndex: 'manufacturer_distributor_name'
},
{
header: 'Shipping Authorization Number',
sortable: true,
dataIndex: 'shipping_authorization_number'
},
{
header: 'Purchase Order Number',
sortable: true,
dataIndex: 'purchase_order_number'
},
{
header: 'Original Amount',
sortable: true,
dataIndex: 'original_amount'
},
{
header: 'Open Amount',
sortable: true,
dataIndex: 'open_amount',
},
{
header: 'Requestor',
sortable: true,
dataIndex: 'requestor'
}]);
var gridView = new Ext.grid.GridView();
var selectionModel = new Ext.grid.RowSelectionModel({
singleSelect: true
});
var grid = new Ext.grid.GridPanel({
title: 'Approvals',
renderTo: Ext.getBody(),
height: 500,
width: 700,
store: store,
view: gridView,
colModel: columnModel,
selModel: selectionModel
});
This is intended to closely follow the "Hello world"-level grid example on pp. 159-161 in Jesus Garcia's ExtJS in Action. As it stands, my code populates column names with a blank white area; that is, it displays the column names and a blank white area on FF/Chrome, and doesn't seem to display anything on IE6-8. In Chrome, the JavaScript console does not show any error messages, or other logged information.
Any suggestions about what is wrong with my code or how I can fix it?
IE-6-8 may not be liking the dangling comma at dataIndex: 'open_amount', (and any other syntax errors that FF/Chrome would forgive)
Can you post a screenshot of what you are seeing in FF/Chrome?
Your code can be simplified quite a bit. e.g. Simply use ArrayStore instead of reader,proxy,record,store combination
EDIT-
var grid = new Ext.grid.GridPanel({
title: 'Approvals',
renderTo: Ext.getBody(),
height: 500,
width: 700,
store: new Ext.data.ArrayStore({
idIndex:0,
fields: ['approved_date', 'approval_status',{name:'approval_id', type:'int'}] //specify other fields here
}),
cm:new Ext.grid.ColumnModel({
defaults:{
sortable:true,
width:200
},
columns:[{
header:'Approval Date',
dataIndex:'approved_date'
},{
header:'Approval Status',
dataIndex:'approval_status'
},{
header:'Approval ID',
dataIndex:'approval_id'
}]
})
});
var myData=[
['01/01/11','Held', 1],
['02/02/11','Approved', 2]
]
grid.getStore().loadData(myData);