PDA

View Full Version : Itemselector -> 'b is null' error



pegasus
5 Nov 2010, 6:17 AM
Hi,

I'm trying to implement the Itemselector inside a form within a pop-up window. I've looked at the example code on the demo pages but keep getting stuck with errors. I've now stripped the ode to it's basic form on the demo page inorder to debug. Below is the code:


var win = new Ext.Window({
layout: 'fit',
id: 'win',
width: 400,
autoHeight: true,
closeAction:'hide',
plain: false,
closable: true,
constrain: true,
hidden: true,
modal: true
});

var ds = new Ext.data.ArrayStore({
data: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});

var isForm = new Ext.form.FormPanel({
title: 'ItemSelector Test',
width:700,
bodyStyle: 'padding:10px;',
renderTo: 'itemselector',
items:[{
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
imagePath: '../../master/ext/examples/ux/images/',
multiselects: [{
width: 250,
height: 200,
store: ds,
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 200,
store: [['10','Ten']]
}]
}]
});

win.add(isForm);
win.show(this);
I still get a 'b is null' error on the firebug. I know I must be missing something simple but I've looked at it for hours and not able to figure it out.

Condor
5 Nov 2010, 6:33 AM
Can you do the same, but use ext-all-debug.js, and post the real error, line number and stacktrace.

pegasus
5 Nov 2010, 6:58 AM
Hi Condor,

Here's the firebug error on Line 7:


b is null
chrome://firebug/content/blank.gifExt.DomHelper=function(){var s=null,j=...stopEvent();this.completeEdit()}}}});


Attached, is a shot of the firebug. I've also added the library files needed:

<script type="text/javascript" src="../../ext/examples/ux/MultiSelect.js"></script>
<script type="text/javascript" src="../../ext/examples/ux/ItemSelector.js"></script>
<script type="text/javascript" src="../../ext/examples/multiselect/multiselect-demo.js"></script>

Condor
5 Nov 2010, 7:26 AM
ext-all-debug.js

pegasus
5 Nov 2010, 7:51 AM
Is this sufficient?

ct is null on
Line 14639



29
14601 }else{
14602 this.cls = this.cls ? this.cls + ' ' + cls : cls;
14603 }
14604 return this;
14605 },
14606
14607 /**
14608 * Removes a CSS class from the component's underlying element.
14609 * @param {string} cls The CSS class name to remove
14610 * @return {Ext.Component} this
14611 */
14612 removeClass : function(cls){
14613 if(this.el){
14614 this.el.removeClass(cls);
14615 }else if(this.cls){
14616 this.cls = this.cls.split(' ').remove(cls).join(' ');
14617 }
14618 return this;
14619 },
14620
14621 // private
14622 // default function is not really useful
14623 onRender : function(ct, position){
14624 if(!this.el && this.autoEl){
14625 if(Ext.isString(this.autoEl)){
14626 this.el = document.createElement(this.autoEl);
14627 }else{
14628 var div = document.createElement('div');
14629 Ext.DomHelper.overwrite(div, this.autoEl);
14630 this.el = div.firstChild;
14631 }
14632 if (!this.el.id) {
14633 this.el.id = this.getId();
14634 }
14635 }
14636 if(this.el){
14637 this.el = Ext.get(this.el);
14638 if(this.allowDomMove !== false){
14639 ct.dom.insertBefore(this.el.dom, position);
14640 }
14641 }
14642 },
14643
14644 // private
14645 getAutoCreate : function(){
14646 var cfg = Ext.isObject(this.autoCreate) ?
14647 this.autoCreate : Ext.apply({}, this.defaultAutoCreate);
14648 if(this.id && !cfg.id){
14649 cfg.id = this.id;
14650 }
14651 return cfg;
14652 },
14653

Condor
5 Nov 2010, 11:27 AM
What is 'this' at this point?

win.show(this);
(in the code you copied this from, 'this' was the button that was clicked)

pegasus
5 Nov 2010, 12:47 PM
Hi Condor,

'this' is the reference to the Window element that is declared at the beginning of the code, which is not the culprit btw.. I figured out the problem :D it was "renderTo: 'itemselector'," which was throwing the error. The minute I erased that part, the itemSelector worked beautifully.

Thank you for your patience though!

Code:


var win = new Ext.Window({
layout: 'fit',
id: 'win',
autoWidth: true,
height: 700,
closeAction:'hide',
plain: false,
closable: true,
constrain: true,
hidden: true,
modal: true
});

var ds = new Ext.data.ArrayStore({
data: [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});

var isForm = new Ext.form.FormPanel({
title: 'ItemSelector Test',
width:700,
height: 700,
bodyStyle: 'padding:10px;',
items:[{
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
imagePath: '../ext/examples/ux/images/',
multiselects: [{
width: 250,
height: 200,
store: ds,
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 200,
store: [['10','Ten']],
tbar:[{
text: 'clear',
handler:function(){
isForm.getForm().findField('itemselector').reset();
}
}]
}]
}]
});

win.add(isForm);
win.show(this);
}