Is there any way to parametrizethe number of line displayed in a grid using EXTJS?
For exemple having a comboboxwhich can tell me how many lines I want to display : if I choose 10, the grid will display 10 lines ...etc
You can add combo to your top docked toolbar :
{
xtype :'combo',
fieldLabel :'Show',
labelSeparator:'',
name :'show',
labelWidth :30,
value :'10',
store :[10,20,50],
listeners :{
change:function( thisObj, newValue, oldValue, eOpts ){
pageSize = newValue;
store = Ext.getStore('gridStore');
store.pageSize = pageSize;
Ext.getCmp('pagingToolbarID').moveFirst();
}
}
}
Hope this helps :-)
Related
In extjs6 label with databinding, how do I convert the bound value everytime it changes?
Right now I am using a viewmodel with formula, but it only hits this method on creation of the panel, I want it to hit the formula everytime I have an incoming change of the label value.
can someone see what I am doing wrong?
here is my label in view
columnWidth: 0.5,
xtype: 'label',
itemId: 'labelDateStatementId',
cls: 'myLabelCRM2',
bind: {
text: '{convertDateStatement}'
}
here is my formula in viewmodel
formulas: {
convertDateStatement: function (get) {
var me = this;
var myView = me.getView();
var label = myView.queryById('labelDateStatementId');
debugger;
}
it does hit the formula on view creation... but I need it to change everytime I change the source of the bind value of label.
maybe this solution will be good for You (setting data on view model directly):
Check example on fiddle
After 2 seconds change label on field.
Or You can bind a record to view model like this:
Check example 2 on fiddle
Hi i have a grid with values ,
when i click a the row in the grid i need to
open a window with all the values in that row.
I have done till loading a grid and populating values in the grid. I am working in ext js for the last two weeks can any one tell me how to proceed further
My Code:
function loadcolleaguesVal(jsonContent){
var localJson = Ext.util.JSON.decode(jsonContent);
colleagueGridJS=Ext.util.JSON.decode(localJson.ColleagueInfo);
colleagueGridDataJS=Ext.util.JSON.decode(localJson.colData);
var caseReGridData= new Ext.data.JsonStore({
autoLoad :true,
fields: ["NAME",
"TOTAL_CASES_ALLOWED",
"TOTAL_OPEN_CASES",
"CLIENT_TEAM_CASES_ALLOWED",
"CLIENT_TEAM_TOTAL_CASES",
"PAY_AUTH_MAX",
"DAYS_MAX",
"LUMP_SUM_MAX",
"DENIAL_ADMIN",
"DENIAL_CLINICAL"],
storeId :'ColleagueInfo',
data : colleagueGridDataJS,
root : 'data',
listeners : {
load : colleagueGridListerner
}
});
}
function colleagueGridListerner(){
nucleus.tools.master(colleagueGridJS,"NonEditableGrid","colleagueGrid",caseReGridData,"twoFields");
panelForPage.addButton({
text:'Add new colleague',
type:'Submit',
name:'btnGo',
handler:function()
{
showColleagueSetup();
}
});
Ext.getCmp('colleagueCenter').add(panelForPage);
Ext.getCmp('colleagueGrid_Grid').setHeight(145);
Ext.getCmp('colleagueGrid_Grid').doLayout();
tabPanel.doLayout();
Ext.getCmp("colleagueGrid_Grid").collapse();
}
I can't see grid into your code but you can add selection model into grid:
var grid = new Ext.grid.GridPanel({
.
.
.
sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
.
.
});
and add event:
grid.getSelectionModel().on('rowselect', function (selModel, rowIndex, record ) {
//Your row selected data is:
var data = record.data;
//Open window code
...
});
I am new to Ext-JS4. I am working on a project in which I am configuring a toolbar. I have added few buttons to the toolbar, one of which has a menu and the menu basically has a grid which is loaded from a JSON store. The grid is used within the menu due to such requirement in the project. The grid is loaded properly but I need access to the menu item being clicked within the menu. I want the text of the menu item which is clicked. The following code will better explain my question.
var store = Ext.create('Ext.data.Store', {
storeId : 'favStore',
model : favModel,
autoLoad : true,
groupField : 'group_header',
proxy : {
type : 'ajax',
url : '../../data/favorites.json',
reader : {
type : 'json',
root : 'favoritesMenu'
}
}
});
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false
});
var favMenu = Ext.create('Ext.menu.Menu', {
items : [favGrid],
listeners : {
'click' : function(store,item) {
alert('Item clicked= ');//tried item.text here but not working
}
}
});
In the alert method on the click event I want the text of the menu item clicked. I hope I am clear with the question. Can anyone give me some suggestions? Also can anyone suggest me some good blogs on Ext-JS4?
All these things are defined within the initComponent method of Ext.define() for toolbar.
You can use the documentation.
For me it was very usefull:
http://docs.sencha.com/ext-js/4-0/
I believe in your case you want the listener to be attributed to your grid, not the menu. Something like...
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false,
listeners: {
'itemclick': function(view, record, item, index, e, eOpts){
//Assuming 'name' is a fieldname in the record
alert('item clicked = ' + record.get('name'));
}
}
});
Check out the Ext.grid.Panel documentation here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel . Click on "events" at the top and find "itemclick".
or you can have your menu listen to the grid's event by relaying the events.
favMenu.relayEvents(favGrid, ['itemclick']);
favMenu.on('itemclick', me.onFavFunction, me);
Is there a standard way to highlight active row in a grid like in attached screen?
I mean having a grid, with cellmodel selection type, when clicking on an item in the grid, it highlights the cell. I would like to highlight the active row at the same time.
It is very useful when gird contain a lots of data to be analysed,
when selecting cell, and entire row (maybe collumn?) needs to be highlighted.
Thanks for your help guys. We did it :) Here is the one possible solution :
selModel: Ext.create('Ext.selection.CellModel', {
listeners: {
select: function (cellModel, record, rowIndex) {
var myGrid = this.items.get('gridItemId');
myGrid.getView().addRowCls(rowIndex, 'row-style');
},
deselect: function (cellModel, record, rowIndex) {
var myGrid = this.items.get('gridItemId');
myGrid.getView().removeRowCls(rowIndex, 'row-style');
},
scope: this
}
}),
you can use addRowCls method of grid which Adds a CSS Class to a specific row.
http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.View-method-addRowCls
Even if you are using the CellSelectionModel, you could easily apply styles/classes to the row the selected cell is in. If you take a look at the events for CellSelectionModel, you'll see the cellselect actually returns the rowIndex.
cellselect : ( SelectionModel this, Number rowIndex, Number colIndex )
So, what you could so is something like the following:
// we'll say you have your Grid stored in a variable, grid
CellSelectionModel ...({
listeners: {
'cellselect': function(selModel, rowIndex) {
var cellRow = grid.getView().getRow(rowIndex);
Ext.fly(cellRow).addClass('selectedRow')
// do any other logic with the actual DOM element here
}
})
I have a grid panel i need to show / hide columns in a grid panel depending on the value of a checkbox. If the checkbox is checked i need to display column in the grid and if it is unchecked i need to hide the column in the grid.
Here is my code
var chkEnableDisplayResponsibilityForAction = '<%=Session["chkEnableDisplayResponsibilityForAction"]%>';
var flags = Boolean.parse(chkEnableDisplayResponsibilityForAction);
var flags1 = !Boolean.parse(chkEnableDisplayResponsibilityForAction)
var colModel = new Ext.grid.ColumnModel([
{ header: "PricePlanID", width: 100, sortable: true, dataIndex: 'PricePlanID', hidden: flags, hideable: flags1 },
]);
when i refresh the page i am not able to toggle the columns depending on the value of the checkbox. But when i login and log out i am able to see the changes in the grid panel. Can anyone help me in refreshing the column values in the grid panel?
if take a look at the ExtJS API, particulary the ColumModel there is a setHidden method, it would hide/show a column in a GridPanel.
myGrid.getColumnModel().setHidden(0, true);
you should also hook the onchange event of your check box so you can show or hide the column
In Ext JS 4.1, to hide a column, you use:
grid.columns[0].setVisible(false);
Looks like getColumnModel() with its setHidden() method is no longer part of the grid:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel
You can show/hide columns using column header menu - you can choose which column you want to have shown. Anyway, if you want to show/hide a column, try this
myGrid.getColumnModel().setHidden(0, true);
In ExtJS 4 gain access to your grid panel, and then access the columns attribute which is an array of Column objects.
From there you can use the array iterator methods ( http://www.diveintojavascript.com/core-javascript-reference/the-array-object ) to perform an action.
In the below example I hide and show a few of the columns based on their header names, but you can obviously perform action based on any Column attribute.
var grid = Ext.getCmp( 'my_grid_panel' );
grid.columns.forEach( function( col ) {
if( ( col.text == "Foo" ) || ( col.text == "Bar" ) ) {
col.setVisible( true );
} else if( col.text == "Baz" ) {
col.setVisible( false );
}
});
The answers above I think are pretty good.
But let me give you a advice.
1) In ExtJS 4.x it is recommended to use Ext.ComponentQuery`s methods instead of Ext.getCmp()
2) To hide/show columns of the grid you can use following code
Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].hide()
or to show
Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].show()
It should resolve hiding/showing any column in a grid.
Here grid is your grid , it maybe id or xtype etc.
setVisibleColumn : function(name, flag) {
name = Ext.Array.from(name);
var column;
for (var i = 0; i < name.length; i++) {
column = this.getColumn(name[i]);
if (column) {
flag ? column.show() : column.hide();
}
}
}