ExtJS 5
I am using ExtJs 5 Grid. I have a button, when i click on it, age column will be hidden by using below line.
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
I am using listener - beforecellclick just to get the index of clicked column. But when i click on last column (last column = next to hidden column) it still show original index of column. Hidden column still getting their position in grid.
In CSS - If we use visibility: hidden then it hides the component or tag but still take space in web page but if use display: none, it hides as well as it doesn't take space in web page.
I want hidden column should not take space while getting indexing of current clicked column. (Without using CSS).
Can anyone help me to sort this out.
Ext.onReady(function () {
var studentStore = new Ext.data.JsonStore({
autoLoad: true,
pageSize: 10,
fields: ['Name', 'Age', 'Fee'],
data: {
items: [
{ "Name": 'Puneet', "Age": '25', "Fee": '1000' },
{ "Name": 'Ankit', "Age": '23', "Fee": '2000' },
{ "Name": 'Rahul', "Age": '24', "Fee": '3000' }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
title: 'Grid Samples',
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'hide age column',
handler: function () {
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
}
},
{
xtype: 'grid',
id: 'grdSample',
height: 300,
selModel: Ext.create('Ext.selection.CheckboxModel',
{
}),
store: studentStore,
columns: [
{
header: 'Name',
dataIndex: 'Name',
},
{
header: 'Age',
dataIndex: 'Age',
},
{
header: 'Fee',
dataIndex: 'Fee'
}
],
listeners:{
beforecellclick: function (el, td, cellIndex, record, tr, rowIndex, e, eOpts) {
debugger;
}
},
dockedItems:
[
{
xtype: 'pagingtoolbar',
store:studentStore,
dock:'bottom',
displayInfo:true
}
]
}
]
}
]
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Name", flex : 1, dataIndex: 'Name'},
{text: "Age", flex : 1, dataIndex: 'Age', id : 'colAge'},
{text: "Fee", flex : 1, dataIndex: 'Fee'}
],
listeners : {
'cellclick' : function (me, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
me.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex)}} // here you get the correct value :)
});
Here is working Fiddle : http://jsfiddle.net/Xpe9V/1623/
Perhaps an overkill, but you could create an array of your columns
var columns= [{dataIndex: 'Name', header: 'Name'}, { dataIndex:'Age', header:
'Age' }, { dataIndex:'Fee', header: 'Fee'}]
2) then remove a column from array by index using javascript splice method
and reconfigure your grid
myGrid.reconfigure(myStore, columns);
Related
Intro:
I need to call the backend controller to see if the user is admin. If the user is NOT admin, hide the toolbar in the application. Currently the var is successfully changing; However, it is changing after the view is already created causing the view to always have the toolbar visable.
Problem:
Need to check backend to see if user is in the admin group.
Need to return true if they are in admin group
MyCode:
var adminBool = false;
function CheckAdmin() {
debugger;
var a;
Direct.Report.IsAdmin(this.results, a);
debugger;
};
function results(result, constructor, c, d, e, f, g, h) {
debugger;
this.adminBool= result.adminUser; //returns bool
}
Ext.define('Ext.View.MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.AdministrationViewModel',
init: this.CheckAdmin(),
data: {
addNew: true,
update: true,
gridData: null,
isAdmin: this.adminBool
}
});
Synopsis:
Call the backend controller for admin status
Return bool
Update viewModel with bool respectively
ViewModel property,'isAdmin', will bind with hidden property to hide unwanted actions for non admins
UPDATE:
Basically I need a way to delay "isAdmin: this.adminBool" check to after the backend call is finished.
As you are using ViewModel.
So you can use set() method to update your viewmodel field.
I have created an sencha fiddle demo using viewmodel. You can check, how it is working in fiddle. In this fiddle I have not used any API, it just example regarding of ViewModel. Hope this will help you to solve your problem or achieve your requirement.
//ViewModel
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.AdministrationViewModel',
data: {
isAdmin: true
}
});
//Panel
Ext.create('Ext.panel.Panel', {
title: 'ViewModel example',
width: '100%',
renderTo: Ext.getBody(),
viewModel: 'AdministrationViewModel',
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 10
},
defaults: {
margin: 10
},
items: [{
xtype: 'combo',
height: 40,
fieldLabel: 'Choose Admin or user',
emptyText: 'Choose Admin or user',
labelAlign: 'top',
store: {
fields: ['name', 'value'],
data: [{
"value": true,
"name": "Admin"
}, {
"value": false,
"name": "User"
}]
},
queryMode: 'local',
displayField: 'name',
valueField: 'value',
listeners: {
select: function (combo, record) {
var viewModel = combo.up('panel').getViewModel(),
isAdmin = record.get('value');
//If selected value is {Admin} then we will show toolbar otherwise in case of {User} hide
viewModel.set('isAdmin', !isAdmin);
}
}
}, {
xtype: 'toolbar',
width: '100%',
height: 50,
padding: 10,
bind: {
hidden: '{isAdmin}'
},
items: [{
// xtype: 'button', // default for Toolbars
text: 'Admin',
}, {
xtype: 'splitbutton',
text: 'Split Button'
},
// begin using the right-justified button container
'->', // same as { xtype: 'tbfill' }
{
xtype: 'textfield',
name: 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
{
xtype: 'tbspacer'
}, // same as ' ' to create Ext.toolbar.Spacer
'text 2', {
xtype: 'tbspacer',
width: 50
}, // add a 50px space
'text 3'
]
}]
});
I need to modify a value in text field when I click a column in Ext.grid.Panel, so I used beforeshow listener like
Ext.create('Ext.data.Store', { storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart#simpsons.com", "phone":"555-222-1234"},
{"name":"Homer", "email":"homer#simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge#simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false,
listeners : {
beforeshow : function(obj, event, eOpts) {
alert();
}
}
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
https://fiddle.sencha.com/#fiddle/qiv
But the listener is not firing when I click on the column, can you please let me know how can I modify the value before showing in the text field when I click on the column.
Thanks in Advance.
If you want to display a value different from the one stored, I think a better way is to use a Renderer in your column.
Simply move your listener code from plugin to grid.
That is instead of ...
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
listeners : {
beforeedit: function(ed, context){
var field,
column = grid.headerCt.getHeaderAtIndex(context.colIdx);
if (context.column.dataIndex === 'email') {
context.column.field.setValue('ashok');
console.log(context.column);
}
}
}
},
Move the listener to grid. :)
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
},
listeners : {
beforeedit: function(ed, context){
var field,
column = grid.headerCt.getHeaderAtIndex(context.colIdx);
if (context.column.dataIndex === 'email') {
context.column.field.setValue('ashok');
console.log(context.column);
}
}
},
I got a response from Sencha Forum,
If any one is interested please follow the following code and links
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart#simpsons.com", "phone":"555-222-1234"},
{"name":"Homer", "email":"homer#simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge#simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
listeners : {
beforeedit: function(ed, context){
var field,
column = grid.headerCt.getHeaderAtIndex(context.colIdx);
if (context.column.dataIndex === 'email') {
console.log('ashok');
}
}
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Fiddle:- https://fiddle.sencha.com/#fiddle/qiv
Forum Post:- Forum Post Link
I have a grid panel which shows all my users from my database.
I want my grid items(rows) to be clickable, as something to happen when i click on them but it doesn't seem like the listener is ok.
Ext.define('PRJ.view.Home', {
extend: 'Ext.panel.Panel',
alias: 'widget.home',
title: 'Home',
layout: 'fit',
items: [
{
xtype: 'gridpanel',
store: 'Users',
title: 'Users grid',
columns: [
{text: 'Id', dataIndex: 'id' },
{text: 'Name', dataIndex: 'name', width : 200 }
]
}
]
});
Ext.define('PRJ.controller.Menu', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'centerPanel',
selector: '#center-panel'
}
],
stores: ["Users"
],
init: function() {
this.control({
'gridpanel': {
itemdblclick: this.editUser
}
});
},
editUser: function() {
alert('User double clicked');
},
});
This may just be as simple as changing itemdblclick to rowdblclick.
I have created a fiddle here showing a slightly different approach (by adding listeners in the config). Code below:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
rowdblclick: function(grid, record, tr, rowIndex, e, eOpts) {
alert(record.get("name"));
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
You should also look at Selection Model and Row Editing.
You can use cell editing plugin to make cells editable on click.
Include something like this in your grid conf :
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
pluginId: 'cellEditor'
})
]
I found out what the problem was.
The answers I got were not helping, because I needed to keep the listener in the controller instead of moving it to the view.
The problem was that I needed to put the listener on home gridpanel like
init: function() {
this.control({
'home gridpanel': {
itemdblclick: this.editUser
}
});
},
Now it works like charm.
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 have an Ext.grid.Panel with a listener for dblclick. It looks like this:
listeners: {
dblclick: {
fn : function() {
console.log("double click event processed");
},
element: 'el'
}
}
When a row is double clicked, I would like to open a URL in a new page. In order to determine the URL, I need access to row data - either that, or to the "row" in my JSON that serves as the Panel's store. How would I access this data?
Well, the event is itemdblclick (no dblclick). And the row is passed as an argumento to the handler.
For example, in the follow sample, when you double click on a row you can see an alert pop-up window displaying the selected Simpson name:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
listeners: {
itemdblclick: {
fn : function(grid, record) {
alert(record.get('name'));
}
}
},
renderTo: Ext.getBody()
});
You also can see it working here: http://jsfiddle.net/lontivero/utjyd/1/
Good luck!