I have a toolbar having one button as follows
{ text: 'Save', tooltip: 'Save report', iconCls: 'some-cls', handler: 'somehandler' }
I want to hide this button for some condition.
for this I am getting toolbar items and hide/show the items as follows.
showHideToolbarItems: function(titles)
{
tbarItems = getToolbarItems(); // Getting items successfully
for (var i = 0, len = tbarItems.count; i < len; i++) {
var item = tbarItems.itemAt(i);
if (titles.indexOf(item.text) > -1)
{
item.setVisible(false);
}
}
}
I am calling this function as showHideToolbarItems(['Save']);
But I am getting error setvisible is not a function.
What I am doing wrong here
You can add reference to your button for faster access and right approach
{
text: 'Save',
reference: 'saveBtn',
tooltip: 'Save report',
iconCls: 'some-cls',
handler: 'somehandler'
}
and inside your viewController:
showHideToolbarItems: function(titles)
{
var view = this.getView(),
saveButton = view.lookupReference('saveBtn');
saveButton.hide();
//saveButton.show();
}
Related
I tried to add edit button functionality in grid panel. I want to open an edit window on edit button click for updating grid row record using Ext Window Form which contains fields like (Shift Name, Time, Total, Requirement, Note). The window form is created, but the row values that I have selected in grid are not set in form fields.
I tried to use this code:
Ext.getCmp('shiftWindow').getForm().setValues(selection[0].data);
but it's giving the following error
Uncaught TypeError: Cannot call method 'getForm' of undefined
Here is my code:
var shiftWindow = Ext.create('Ext.window.Window', {
title: 'Edit Shift',
resizable: false,
id: 'shiftwindow',
width: 465, //bodyPadding: 5, modal: true, store: shiftStorePlanner,
items: {
xtype: 'form',
id: 'idFormShift',
bodyPadding: 10,
items: shiftViewModelPlannerData
},
buttons: [{
text: 'Save',
cls: 'planner-save-button',
overCls: 'planner-save-button-over',
handler: function () {
var wi = this.up('.window')
var form = Ext.getCmp('idFormShift');
if (form.isValid()) {
shiftTimemappingarray = [];
getShiftTime();
//this.up('.window').close();
}
}
}, {
text: 'Cancel',
handler: function () {
this.up('.window').close();
}
}]
});
var host1 = Ext.getCmp('plannershifteditor');
var selection = host1._shiftPlannerGrid.getSelectionModel().getSelection();
if (selection.length === 0) {
return;
}
selection[0].data.ShiftName = selection[0].data.ShiftName.replace('(ARCHIVED)', '').trim(); //if edit Archive record then text name show without (ARCHIVED)
//shiftWindow.getForm().setValues(selection[0].data);
Ext.getCmp('shiftWindow').getForm().setValues(selection[0].data);
//Ext.getCmp('shiftWindow').setValue(selection[0].data);
shiftWindow.show();
There's no getForm method in the window. You can get the form using shiftWindow.down('form'). Here's the snippet:
shiftWindow.down('form').form.setValues(selection[0].data)
I'm trying to enable/disable a button when the store getNewRecords() function return the length, but not work!
bind: {
disabled: "{!grid.getStore().getNewRecords().length}"
}
Fiddle: https://fiddle.sencha.com/fiddle/1sj5
Someone have idea to how resolve this?
You need to create a formula in your viewmodel:
viewModel: {
formulas: {
hasNewRecords: function (r) {
return this.getView().down("treepanel").getStore().getNewRecords().length > 0;
}
}
}
then you can use it for your bindings:
bind: {
disabled: "{hasNewRecords}"
}
(probably not the best way to get the data you want).
You can read about it here, here and here .
What you're wanting to do here is currently not possible in the framework. Instead, you should create a ViewModel data value and modify that where need be, like this:
var form = Ext.create("Ext.form.Panel", {
viewModel: {
data: {
newRecords: false
}
},
items: [{
xtype: "textfield",
labelField: "Add Child",
name: "col1",
value: "Teste 123"
}],
tbar: {
xtype: "button",
text: "Add new record",
handler: function () {
var data = this.up("form").getForm().getFieldValues();
var rec = grid.getStore().getAt(0);
data["treeCol"] = rec.childNodes.length + 1;
// setting value, so binding updates
this.lookupViewModel().set('newRecords', true);
rec.appendChild(data);
}
},
bbar: {
xtype: "button",
text: "button to disabled when new records",
bind: {
disabled: "{newRecords}"
}
},
renderTo: Ext.getBody()
});
Or by simply doing this.
In your controller:
me.getView().getViewModel().set('storeLen', store.getNewRecords().length);
In your ViewModel, simply do this:
formulas : {
hasNewRecords : {
get : function(get){
var length = get('storeLen') // --> gets the one you set at your controller
return length > 0 ? true : false;
}
}
}
In your View:
bind : {
disabled : '{hasNewRecords}'
}
I am trying to add dynamically created contextmenu's to an Ext.tree.TreePanel object. The menus will all be different depending on user selections.
I can create the menu outside the treePanel descriptor but how can I append the dynamically created menu to the Ext.tree.TreePanel? The documentation seems to indicate that treePanel.on(nameOfMenuHere) would append the menu but it returns as undefined.
var menu1 = new Ext.menu.Menu({
id: 'menu1',
items: [{
id: 'menu1-item1',
text: 'Menu 1 - Item 1'
},
{
id: 'menu1-item2',
text: 'Menu 1 - Item 2'
}],
listeners: {
itemclick: function (item) {
switch (item.id) {
case 'menu1-item1':
var n = item.parentMenu.contextNode;
if (n.parentNode) {
alert(n.parentNode.text);
alert("node ID: " + n.id + ", node text: " + n.text); //Ext ID and text of selected node
}
break;
}
}
}
});
userLayerTree.on(menu1);
use the listener itemcontextmenu within the tree panel. something like this should work.
var tpanel = {
xtype : 'treepanel',
width: 250,
.........
..........
listeners : {
itemcontextmenu: showLyrContextMenu
}
}
and then create the function to create and show your menu
function showLyrContextMenu(view, record, item, index, event){
lyrTreeContextMenu = new Ext.menu.Menu({
id : 'lyrcontxtmenu',
.......
items: items
});
lyrTreeContextMenu.showAt(event.getXY());
event.stopEvent();
}
I have a grid and associated checkbox with it. By default when the grid loads it dispalys all the records but i want to filter it when the checkbox is selected and load back all the records when the checkbox is unchecked. Basically i want to display only the grid data with resolved date that equals "0001-01-01".I have given the checkbox code and grid screenshot below.
{
xtype: 'checkboxfield',
boxLabel: 'Filter by UN-Resolved',
id:'chkBox',
handler: function() {
var store = Ext.getCmp('defGrid').getStore();
if(Ext.getCmp('chkBox').getValue()){
store.filterBy([
{filterFn: function(item) {return item.get('ID') == 'Sales';{console.log(item);}}
]);
if(filter.data.items[0].data.ResolvedDate === '0001-01-01')
{console.log("I'm inside");}
});
}
I was finally able to resolve this... code as below ...
{
xtype: 'checkboxfield',
boxLabel: 'Filter by UN-Resolved',
id:'chkBox',
handler: function() {
var grid = Ext.getCmp('defGrid');
var checked = Ext.getCmp('chkBox').getValue();
if(checked){
if (grid.store!=undefined) {
grid.store.filterBy(function(record) {
//console.log(record.data.ResolvedDate);
return record.data.ResolvedDate === '0001-01-01' ;
});
grid.getView().refresh();
}
}
else{
var grid = Ext.getCmp('defGrid');
grid.store.clearFilter(true);
grid.getView().refresh();
}
}
}
I'm using Ext.ux.grid.RowExpander
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p>{history}</p>'
)
});
it's used in my grid:
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
expander,
...
Now i want all expander rows to be expanded by deafult.
I'm trying to use expander.expandRow(grid.view.getRow(0)); (i think if i make it, i'll be able to use a for loop :) but i get an error
this.mainBody is undefined # ***/ext/ext-all.js:11
Please, help me to expand all rows of my grid! Thanks!
You can do this with a loop, it's quite simple...
for(i = 0; i <= pageSize; i++) {
expander.expandRow(i);
}
Where pageSize is the number of records per page in your grid. Alternatively you could use the store's count (probably a more scalable solution)...
for(i = 0; i <= grid.getStore().getCount(); i++) {
expander.expandRow(i);
}
In 4.1.3 i use this method
function expand() {
var expander = grid.plugins[0];
var store = grid.getStore();
for ( i=0; i < store.getCount(); i++ ) {
if (expander.isCollapsed(i)) {
expander.toggleRow(i, store.getAt(i));
}
}
}
If your Grid uses a DirectStore or some other RPC mechanism, you may want to listen for the store's load event:
grid.store.addListener('load', function() {
var expander = grid.plugins;
for(i = 0; i < grid.getStore().getCount(); i++) {
expander.expandRow(i);
}
}
Btw: It should be "i < ..." instead of "i <= ...".
You can declare a grouping object and then call it from within your GridPanel:
// grouping
var grouping = Ext.create('Ext.grid.feature.Grouping',{
startCollapsed: true, // sets the default init collapse/expand all
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
expander,
...
Then add this code in the body of you GridPanel:
// collapse/expand all botton
tbar: [{
text: 'collapse all',
handler: function (btn) {
grouping.collapseAll();
}
},{
text: 'expand all',
handler: function (btn) {
grouping.expandAll();
}
}],
It will add two buttons that expand/collapse all the groups.
If you want everything to be expanded/collapsed by default notice the 'startCollapsed' variable above.