I added two listeners 'check change' and 'item click' in Ext.tree.Panel. But i noticed that,
when ever the check change occurs then it is also triggering item click event also. I wish to prevent this item click event.
listeners : {
checkchange: function(node, checked, eOpts){
alert('this is check change');
},
itemclick : function(obj, record, item, index, e, eOpts){
alert('this is item click');
}
}
This are the listeners in Ext tree. On check change i wish to get 'this is check change' this alert only. How it is possible ?
You can use event getTarget method to check DOM of the checkbox. The complete solution is below:
onItemClick: function( self, record, item, index, eventObj, eOpts ) {
var colIdx = eventObj.getTarget('.x-grid-cell').cellIndex;
if (colIdx===0) { // Apply item event click to the first column only
var node=self.getTreeStore().getNodeById(record.internalId);
if (!eventObj.getTarget('.x-tree-checkbox',1,true)) {
record.set('checked',!record.get('checked'));
this.fireEvent('checkchange', node, record.get('checked'));
}
}
}
Lame solution !
I was able to limit the script only to the 'itemclick'.
Works well in ExtJs 5.1.1 and probably in all versions where css checkbox class name is 'x-tree-checkbox'
listeners : {
itemclick : function(panel, record , item , index, event){
var clazz = '';
if(event.target.classList != null){
clazz = event.target.classList[0];
}
if(clazz != 'x-tree-checkbox'){
...
}
}
}
If you are clicking the checkbox to change its value the itemclick event will always fire before the checkchange event. If you dont wish for anything to happen on the itemclick event, simply dont define it (remove the listener).
Have you tried to implement the 'beforeitemclick' event? it fires when you click the item, and inside this handler you can implement the checkchange.
Related
There are two combo boxes and a button.I want a validation i.e. if "combo1" is selected then "combo2" should get enabled and when i select "combo2" then browse button should get enabled.
Mabe something like that (insert text on first combobox):
The combobox2 and button must have this configs:
hidden:true,
disabled:true,
On combobox1:
listeners:{
change: function(combobox,newValue, eOpts){
var combo2 = Ext.ComponentQuery.query('#combo2ItemId')[0];
var button = Ext.ComponentQuery.query('#buttonItemId')[0];
if(!Ext.isEmpty(newValue)) {
combo2.setHidden(false).setDisabled(false);
button.setHidden(true).setDisabled(true);
}
else {
combo2.setHidden(true).setDisabled(true);
button.setHidden(true).setDisabled(true);
}
}
On combobox2:
listeners:{
change: function(combobox,newValue, eOpts){
var button = Ext.ComponentQuery.query('#buttonItemId')[0];
if(!Ext.isEmpty(newValue)) {
button.setHidden(false).setDisabled(false);
}
else {
button.setHidden(true).setDisabled(true);
}
}
I hope this helps!
I guess you may want to disable the second combo and button when the page first shows.
Then You could listen for the change event for each combo and in your handler code disable\enable which ever controls you need to based on the values passed into the handler function arguments.
I have a ComboBox subclass which has a customized template for rendering its data. Once one internal list item is clicked, there is a listener to the browser "click" event, which needs to make some changes on the original combobox.
How can I find a reference to its related combobox from this listener?
This is what I found, which answers my question.
From the "click" listener 2nd argument, we get the click event target element. We can then navigate to its parent boundlist element, using the .x-boundlist class, get its component and finally reach the combobox through its not-documented pickerField property or its getBubbleTarget() method.
click:{
element:'el',
fn: function(ev, target) { //listener
var el= Ext.get(target),
boundList_el, boundList, combobox;
boundList_el= el && el.findParentNode(".x-boundlist");
boundList= boundList_el && Ext.getCmp(boundList_el.id);
combobox= boundList && boundList.getBubbleParent();
//Do something with the combobox, like changing its value
}
Since the customized combo contents was defined using listConfig and its click listener was defined through the listeners config, this refers to the boundList element in the scope of the listener. A more simple way to reach the same result:
click:{
element:'el',
fn: function(ev, target) { //listener
var boundList= Ext.getCmp(this.id),
combobox= boundList && boundList.getBubbleParent();
//Do something with the combobox, like changing its value
}
I have a typical structure of a collection holding models.
In the view, each object has an 'edit' button, that should desactivate all 'edit' buttons of other objects.
I wonder what is the best practice of doing that. Thanks!!
You could add a property editable on your models that is default set to true. Then when you click the 'edit' button on one of the views, you could loop through all the models of the other views and set editable to false. On the view you would listen to model changes, and re-render the view. If editable is false you would disable the edit button.
Ok, so I came up with the following approach:
Assume that model has a property status, and when it is modified to active I want to hide the edit button in other entries (or simply disable it).
My collection view listens to a change in a model:
initialize: function(){
this.listenTo(this.collection, "change:status", this.triggerEditable);
},
The listener callback looks like that:
triggerEditable: function(obj){
var triggerValue = null;
// I am interested in a status which became 'active' or stopped being 'active'
if (obj.get("status") == 'active' && obj.previous("status") != 'active') {
triggerValue = "editable:false";
} else if (obj.get("status") != 'active' && obj.previous("status") == 'active') {
triggerValue = "editable:true";
}
// for any other status change - return
if (!triggerValue) return;
// trigger is fired for all other objects in the collection
_.each(obj.collection.without(obj),function(otherObj) {
otherObj.trigger(triggerValue);
});
}
So, when one object becomes active or stop being active, edidable:false or edidable:true are triggered for all other entries. All I need to do is to add to the model view initializer a listener:
this.listenTo(this.model, "editable:false", this.disableEdit);
this.listenTo(this.model, "editable:true", this.enableEdit);
Here I guess I could combine these two lines into one, first by listening to the editable namespace (how??) and then by passing an argument to the function (again, how exactly?).
From here it is straight forward - implement the listener callback:
disableEdit: function() {
var e = this.$el.find('button.edit')
e.attr('disabled','disabled');
}
If somebody has something to add or to make this solution nicer, I will be glad to hear.
Anyway, hope it will be helpful to others!!
I have two grids; I call them child and parent grid. When I add a new row(data) into the parent grid, I want to reload the parent grid. I was trying to edit it using the afteredit function in the code. If I uncomment out line number 2 in the alert, that works fine. But with out the alert, the newly added row is hidden. I don't understand what's going wrong in my code. Please can anyone tell me what to do after I add the new row in to my grid and how to reload the grid immediately?
this my afteredit function
afteredit : function (roweditor, changes, record, rowIndex)
{ //alert('alert me');
if (!roweditor.initialized) {
roweditor.initFields();
}
var fields = roweditor.items.items;
// Disable key fields if its not a new row
Ext.each(fields, function (field, i) {
field.setReadOnly(false);
field.removeClass('x-item-disabled');
});
this.grid.getSelectionModel().selectRow(0);
this.grid.getView().refresh();
},
xt.ux.grid.woerp =
{
configRowEditor:
{
saveText: "Save",
cancelText: "Cancel",
commitChangesText: WOERP.constants.gridCommitChanges,
errorText: 'Errors',
listeners:
{
beforeedit: WOERP.grid.handler.beforeedit,
validateedit: WOERP.grid.handler.validateedit,
canceledit: WOERP.grid.handler.canceledit,
afteredit: WOERP.grid.handler.afteredit,
aftershow: WOERP.grid.handler.aftershow,
move: WOERP.grid.handler.resize,
hide: function (p)
{
var mainBody = this.grid.getView().mainBody;
if (typeof mainBody != 'undefined')
{
var lastRow = Ext.fly(this.grid.getView().getRow(this.grid.getStore().getCount() - 1));
if (lastRow != null)
{
mainBody.setHeight(lastRow.getBottom() - mainBody.getTop(),
{
callback: function ()
{
mainBody.setHeight('auto');
}
});
}
}
},
afterlayout: WOERP.grid.handler.resize
}
},
AFAIK RowEditor is a plugin for GridPanel which changes underlying data which comes from store. Usually updates are also made by store. If you want to know when data is saved, you should attach event handler to store. Example:
grid.getStore().on('save', function(){ [...] });
Finally i found solution. When i add reload function in to the afteredit method that will be hide newly added row. So Grid reload After commit data in to that data grid store work well for me. Anyway thanks lot all the people who try to help
this my code look like
record.commit();
grid.getView().refresh();
I think there exist a Save button after editing grid.
So in the handler of Save you can catch the event
or using
Ext.getCmp('your_saveButtonId').on('click', function(component, e) {
// Here they will be checking for modified records and sending them to backend to save.
// So here also you can catch save event
}
I have a grid on my panel, named gridView, and gridView is in panel named panelMain, by dbclick listener on grid row, I load a from by doing something like this:
listeners:{
itemdblclick: function(dataview, index, item, e) {
/* I did not create new studentForm every time.*/
var editStudent = Ext.getCmp('editStudent');
if(editStudent == undefined)
editStudent = Ext.create('H.view.EditStudent');
editStudent.getForm().load({
url: 'studentDetails.php',
params: {studentId: studentId},
method:'GET',
success: function (form, action) {
var panelMain = Ext.getCmp('panelMain');
panelMain.items.clear();
panelMain.add(editStudent);
panelMain.update();
panelMain.doLayout();
},
failure: function (form, action) {
/// do nothing
}
});
}
After I edited the student I should come back to grid page, so I do something like this:
var panelMain = Ext.getCmp('panelMain');
var gridView = Ext.getCmp('gridView');
panelMain.items.clear();
panelMain.add(gridView);
panelMain.update();
panelMain.doLayout();
The problem is when I come back to the grid, it does not fire any itemdbclick event any more (it's like the grid is just an image in page, no event fires).
And sometimes when I go to edit studentForm and come back grid work, but when I go to student form again, the student page does not fire any event, when I click edit button, I do not get any answer, I cant see even on mouse hover (that causes changes on button color).
What is the problem here?
I use Extjs 4 and Extjs MVC.
I have one Controller for grid and edit student page.
I think your misunderstand the success config on form.
Try:
listeners:{
itemdblclick: function ( gridView, record, item, index, e, eOpts ) {
var editStudent = Ext.getCmp('editStudent');
if(editStudent == undefined)
editStudent = Ext.create('H.view.EditStudent');
/* Load record in the form.
Form must have on formfields property: 'name' equals to 'dataIndex' */
editStudent.getForm().loadRecord(record);
var panelMain = Ext.getCmp('panelMain');
panelMain.items.clear();
panelMain.add(editStudent);
}
success and failure are the callbacks functions for the submit function.
a) You are not using MVC pattern here. With what Sencha calls MVC, you would have all this code in a Controller instead of event listener.
b) I strongly suspect that this code causes deadlocks somewhere, with events firing so rapidly in succession that browser just freezes. You need to use debugger to see what exactly happens.