PDA

View Full Version : Problem with View, Ext 1.1.1



wang
19 Oct 2007, 11:18 PM
Hey guys,
I'm using View of Ext 1.1.1. The code is something like this:
view = new Ext.View(body, template, {...})
And I put a checkbox in the template, with an event on the checkbox. Now when i click the checkbox, it stays unchecked. When i debug it with firebug, i found it is checked in the click event. But when the event ends, it is changed to unchecked. And i cannot find why :-/
Has anyone met the same problem?
Any suggestions would be appreciated.

brian.moeskau
19 Oct 2007, 11:36 PM
Code please ;)

Animal
19 Oct 2007, 11:58 PM
This is correct.

I think it's a browser problem creating checkboxes from innerHTML.

There's a post wchi demonstrates this in the DDView thread at http://extjs.com/forum/showthread.php?p=72689#post72689

I pulled down that code, adjusted paths so that it fit into examples/View, and indeed, the checkboxes in newly created items won't interact with the mouse. You can change their selected property in script, but not with mouse clicks.

wang
20 Oct 2007, 5:32 AM
This is correct.

I think it's a browser problem creating checkboxes from innerHTML.

There's a post wchi demonstrates this in the DDView thread at http://extjs.com/forum/showthread.php?p=72689#post72689

I pulled down that code, adjusted paths so that it fit into examples/View, and indeed, the checkboxes in newly created items won't interact with the mouse. You can change their selected property in script, but not with mouse clicks.

Thanks, animal - -!
It does interact with the mouse at first.I can see it with firebug. But when my click event ends, it is modified to unchecked again. Is it some event that repaint the view, i guess? But i cannot see anything happened with firebug. OMG, that's what puzzled me.
I can change its state in script, indeed. But i cannot find when it is changed.
Anyway, maybe i should use a link instead of the checkbox.B)

wang
20 Oct 2007, 5:44 AM
Code please ;)

var cateTemplate = new Ext.Template(
'<div class="thumb-wrap" id="cate_div_{id}">' +
'<div><img class="thumb" src="{fileName}" title="{name}"></div>' +
'<b><input type="checkbox" id="cate_view_{id}" name="cate_{id}" onclick="CateLocalManager.cateChosen(event)"/><span>{name}</span></b>' +
'<br><b>Price: </b>' +
'<span>{price}</span>' +
'</div>');

store = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(CateManager.getCatesByRestaurant, true),
reader: new Ext.data.ListRangeReader( {id: 'id', totalProperty:'totalSize'}, recordType),
remoteSort: false
});

store.on("load", function () {});

store.load({params:{start:0, limit:20}, arg:[4]});


view = new Ext.View(viewBody, cateTemplate, {
singleSelect: true,
store: store,
emptyText : '<div style="padding:10px;">No cates right now...</div>'
});
view.on('selectionchange', CateLocalManager.showDetails, this, {buffer: 100});

Something like that. A template, a store, and a view. The 'magic' happens when the event of the checkbox ends.:-?

Animal
20 Oct 2007, 6:05 AM
I don't think an inline onclick is a good idea.

I'd add the listeners using a DomQuery CompositeElement after rendering to add listeners to input[type=checkbox] in the Ext manner.

wang
20 Oct 2007, 6:43 AM
I don't think an inline onclick is a good idea.

I'd add the listeners using a DomQuery CompositeElement after rendering to add listeners to input[type=checkbox] in the Ext manner.

I've tried this. But it does't work. Still my question, what happens after the click event? I cannot find anything with firebug.:-?

sonkey
24 Oct 2007, 6:49 AM
I have the same problem too.



onRender : function(ct, position){

this.el = ct.createChild();
this.el.dom.style.zoom = 1;
this.el.addClass(this.fieldCls);
this.el.setWidth(this.width);
this.el.setHeight(this.height);

var div = this.el.createChild({tag: div});

if (!this.store) {
this.store = new Ext.data.SimpleStore({
fields: this.dataFields,
data : this.data
});
}

this.store.on('clear', this.reset, this);

var cls = 'x-combo-list';

this.list = new Ext.Layer({
shadow: false, cls: [cls, 'ux-mselect-valid'].join(' '), constrain:false
}, div);

var lw = this.width - this.el.getFrameWidth('lr');
var lh = this.height - this.el.getFrameWidth('tb');

this.list.setWidth(lw);
this.list.setHeight(lh);

this.innerList = this.list.createChild({tag: 'div'});
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
this.innerList.setHeight(lh - this.list.getFrameWidth('tb'));

var tpl = '<div class="x-form-check-wrap">'
+'<input class="x-form-checkbox" type="checkbox"/>'
+'<label class="x-form-cb-label">{' + this.displayField + '}</label></div>';

this.view = new Ext.View(this.innerList, tpl, {
multiSelect: true, store: this.store
});

this.view.on('click', this.onViewClick, this);
this.view.on('beforeClick', this.onViewBeforeClick, this);

this.list.setStyle('position', '');
this.list.show();

this.hiddenName = this.name;
this.defaultAutoCreate.name = this.name;
if (this.isFormField) {
this.hiddenField = this.el.createChild(this.defaultAutoCreate);
} else {
this.hiddenField = Ext.get(document.body).createChild(this.defaultAutoCreate);
}
},

When I check the checkbox, itg's is changed. but after all my event finished, it become the uncheck status.I want to change it in script, but I don't where should I add the script

cchiriac
25 Oct 2007, 12:18 AM
Here's how I'm creating some checkboxes.



tpl = new Ext.XTemplate(
'<table align="center" cellpadding="0" cellspacing="20"><tr>',
'<tpl for="totems">',
'<td>',
'<div class="totemContainer">',
'<div>',
'<p class="totemNumber">Totem #{order}</p>',
'<p class="totemTitle">{label}</p>',
'</div>',
'<ul class="checkPbList">',
'<tpl for="pb">',
'<li>',
'<label>',
'<input type="checkbox" class="checkPDU" name="pb_{id}"{isDisplayed:this.checkedFormat}>',
'<img class="imgPbDiff" src="img/icons/ecran.png" width="32" height="32">',
'</label>',
'</li>',
'</tpl></ul>',
'</div>',
'</td>',
'</tpl>',
'</tr></table>'
);

tpl.checkedFormat = function(value) {
return value == '1' ? ' checked' : '';
};

It's the isDisplayed field in JSON that decides the state of the checkbox. About the formatting i think i could have done better something like this


tpl.checkedFormat = function(value) {
return value == '1' ? ' "checked"="on"' : '';
};

but i haven't tested it.

If you want to attach a listener on all the checkboxes perhaps it's better to attach it to their container. In the listener you can see if the click was on a checkbox and detect on which and so on.

To serialize all the checkboxes i'm doing like this:

var aCheckedPbs = Ext.DomQuery.select('input[class=checkPDU]');
var s = '';
Ext.each(aCheckedPbs, function(node){
if(node.checked){
s = s + node.name + '=1&';
}
});


and later on after serializing some other data


return s.substring(-1,s.length -1);

wang
28 Oct 2007, 8:18 AM
Thanks, cchiriac.
I've added the listen like what you say. But still it doesn't work. Later I changed the template like this:

var cateTemplate = new Ext.Template(
'<div class="thumb-wrap" id="cate_div_{id}">' +
'<div><img class="thumb" src="{fileName}" title="{name}"></div>' +
'<span>{name}</span>' +
'<span>Price: {price}</span>' +
'<a href="javascript: CateLocalManager.cateChosen({id})" ><span>Add to Shopping Cart</span></a>' +
'</div>');
But unfortunately it doesn't work either. It does not respond to the click on the link.
Any suggestion?

Animal
28 Oct 2007, 8:48 AM
You'd do much better to add a class:



var cateTemplate = new Ext.Template(
'<div class="thumb-wrap" id="cate_div_{id}">' +
'<div><img class="thumb" src="{fileName}" title="{name}"></div>' +
'<span>{name}</span>' +
'<span>Price: {price}</span>' +
'<span class="add-to-cart">Add to Shopping Cart</span>' +
'</div>');



Then



myView.on('click', function(view, index, node, e) {
if (e.getTarget().is('.add-to-cart')) {
rec = view.store.getAt(index);
// You have all the data you need in the record
}
});

cchiriac
28 Oct 2007, 2:25 PM
You'd do much better to add a class:



var cateTemplate = new Ext.Template(
'<div class="thumb-wrap" id="cate_div_{id}">' +
'<div><img class="thumb" src="{fileName}" title="{name}"></div>' +
'<span>{name}</span>' +
'<span>Price: {price}</span>' +
'<span class="add-to-cart">Add to Shopping Cart</span>' +
'</div>');



Then



myView.on('click', function(view, index, node, e) {
if (e.getTarget().is('.add-to-cart')) {
rec = view.store.getAt(index);
// You have all the data you need in the record
}
});


Thanks Animal! Totally agree.
I would have done a far less elegant use of getTarget() :)

wang
30 Oct 2007, 7:19 AM
Thanks, animal!
It works fine. One thing to mention is that is() seems not to be a function of the object returned by e.getTarget(). In firefox, it reports an error. So i changed to
e.getTarget().className == 'add-to-cart'
Anyway, thank you very much!

sdupont73
28 Nov 2007, 4:47 PM
I've found that checkbox clicks 'take' (UI-wise) if the singleSelect cfg option is false.

However, this leads to another problem which is that view.clearSelections() will not work unless singleSelect is true. I have no idea why this is.

Can someone comment on why singleSelect is required to clearSelections()?


clearSelections : function(suppressEvent){
if(this.nodes && (this.multiSelect || this.singleSelect) && this.selections.length > 0){
this.cmp.elements = this.selections;
this.cmp.removeClass(this.selectedClass);
this.selections = [];
if(!suppressEvent){
this.fireEvent("selectionchange", this, this.selections);
}
}
},

Of course, I could force this to work by adding 'multiSelect: true' as a cfg option, but that leads me back to teh original problem, where checkbox clicks do not take.