PDA

View Full Version : [3.x] Ext.ux.ItemSelectorEx



sormy
19 Feb 2011, 2:09 PM
I have created Ext.ux.ItemSelector analog but with better rendering layout and it is working better as field. Ext.ux.ItemSelectorEx support anchor layout, one store with available variants, value describe selected items, filters for both sides and key navigation.

mathos
4 Apr 2011, 3:35 AM
This is VERY NICE !!!!
I did a few modifications, icons, and JSON store for not only the From but also the To selector.
Also I used multiSelect: true instead of singleSelect: true, and I have done some coloring (light-red-ish BG on FROM and light-green-ish BG on To listview's) and a colored border around it. The icons were different.

This was, other than the modifications, a real timesaver and just provided almost what I needed.

THANKS!!!!!

valani
21 Jul 2011, 6:36 AM
Thanks for posting this. It worked right away in my complex panel setup. =D>

Cédric VIDREQUIN
26 Sep 2011, 2:27 AM
Hello,

I discovered this pluggin and it is great !

How can I programatically set the selected items into my script ?

I tried to use setValue() but it is not defined ?

Cédric VIDREQUIN
26 Sep 2011, 4:08 AM
I found a way to set the expected values :
1) I added an 'id' property to the itemSelector object :


mySelector = new Ext.form.FormPanel({
title: 'Title',
items:[{
id: 'mySelector',
xtype: "itemselectorex",
name: 'itemselector',
imagesDir: getServerURL() + '/resources/images/',
anchor: '90%',
store: myListStore,
valueField: 'id',
displayField: 'title'
}]
});
2) I use the id to find the expected component :

Ext.getCmp('mySelector').setValue('toto,tata, tutu, titi');

Cédric VIDREQUIN
27 Sep 2011, 12:25 AM
Hello all,

I have another problem, this pluggin words perfect with FF but it fails with IE8 :(



Erreur d'exécution inconnue (~ "Unknown execution error" in EN)
extensible-all-debug.js line 651 character 13


Here is a snippets of the code arround the given line :


// This heinous override is required to fix IE9's removal of createContextualFragment.
// Unfortunately since DomHelper is a singleton there's not much of a way around it.
Ext.apply(Ext.DomHelper,
function(){
(...)
pub = {
(...)
/**
* Creates new DOM element(s) and overwrites the contents of el with them.
* @param {Mixed} el The context element
* @param {Object/String} o The DOM object spec (and children) or raw HTML blob
* @param {Boolean} returnElement (optional) true to return a Ext.Element
* @return {HTMLElement/Ext.Element} The new node
*/
overwrite : function(el, o, returnElement){
el = Ext.getDom(el);
el.innerHTML = createHtml(o);
return returnElement ? Ext.get(el.firstChild) : el.firstChild;
}, createHtml : createHtml
};
return pub;
}());


It seems that the "createHtml()" function works but that the result cannot be put into el.innerHTML ...

Does anyone have an idea please ?


EDIT : I found the reason why it failed by myself ! I was adding the ItemSelector into a FormPanel like in the example ... but this FormPanel wass added into a form ... and a form into a form is bad !

Maybe it will help someone else ...

trvd1707
1 Nov 2011, 8:46 AM
This extension is great, but I'm also having a problem in IE6. It fails on the onRender function:

onRender: function()
{
Ext.ux.form.ItemSelectorEx.superclass.onRender.apply(this, arguments);

var hiddenTag = {tag: "input", type: "hidden", value: this.value || "", name: this.name || Ext.id()};
this.hiddenField = this.el.createChild(hiddenTag);

this.cmp.on('render', this.onValueSetReady, this);

this.on('render', function(){
this.cmp.setWidth(this.getWidth());
this.cmp.setHeight(this.getHeight());
this.cmp.render(this.el);// <==== this line fails

this.el.on("click", this.toolsClickHandler, this);
this.on("resize", function(){
this.cmp.setWidth(this.getWidth());
this.cmp.setHeight(this.getHeight());
}, this);

this.initDD();
}, this);
},



When Ext is rendering the this.el, it calls this function in ext-all-debug.js library with w==0, which makes sw on line 27580 equals to a negative number so invalid.



onResize : function(w, h){
var bd = this.innerBody.dom;
var hd = this.innerHd.dom;
if(!bd){
return;
}
var bdp = bd.parentNode;
if(Ext.isNumber(w)){
var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
if(this.reserveScrollOffset || ((bdp.offsetWidth - bdp.clientWidth) > 10)){
bd.style.width = sw + 'px';
hd.style.width = sw + 'px';
}else{


Any one can help with a fix?

Thanks,
Teresa

sormy
1 Nov 2011, 9:13 AM
I have no problems with IE6.
Can you provide simple example how to repeat problem?

trvd1707
1 Nov 2011, 10:21 AM
Here is the example. I'm using ExtJS 3.2.1


Ext.onReady(function (){ Ext.ux.form.ItemSelectorEx.prototype.imagesDir = './images';
alert("starting itemSelectorEx test");
var myArray = [
[1, 'value1'],
[2, 'value2'],
[3, 'value3'],
[4, 'value4'],
[5, 'value5'],
[6, 'value6'],
[7, 'value7'],
[8, 'value8'],
[9, 'value9'],
[10, 'value10'],
[11, 'value11'],
[12, 'value12']
];
var shareReportCard = {
xtype: 'form',
autowidth:true,
buttonAlign:'center',
border: false,
buttons:[{
xtype:'button',
text:"OK",
listeners:{
click: function(b,e){
var list = Ext.getCmp('list-users').getValue();
var selectedUsers = list.split(',');
var totalSelected = selectedUsers.length;
for (var i=0; i<totalSelected; ++i){
var index = selectedUsers[i] | 0;
selectedUsers[i]=myArray[index-1][1];
}


alert("Selected USERS:"+ selectedUsers);

shareWindow.close();
}
}
}],
items:[{xtype:'label',text:"Select users"}
,{
//fieldLabel: 'Item Selector',
xtype: "itemselectorex",
id:'list-users',
store: myArray,
width:250,
name: 'itemselector1'
}]
};


var shareWindow = new Ext.Window({
title: 'Share report:',
autoHeight:true,
width:300,
items:shareReportCard
});


shareWindow.show();


});




The html file I used:

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reporting Portal</title>


<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/ux-all.css" />
<link rel="stylesheet" type="text/css" id="style" href="css/xtheme-gray.css" />
<!-- overrides to base library -->
<link rel="stylesheet" type="text/css" href="css/menus.css" />
<link rel="stylesheet" type="text/css" href="css/local.css" />
<link rel="stylesheet" type="text/css" href="css/Portal.css" />
<link rel="stylesheet" type="text/css" href="css/GroupTab.css" />

<!-- page specific -->
<link rel="stylesheet" type="text/css" href="css/sample.css" />
<link rel="stylesheet" type="text/css" href="css/multigrid.css" />
<link rel="stylesheet" type="text/css" href="css/MultiSelect.css" />
<link rel="stylesheet" type="text/css" href="css/Ext.ux.form.ItemSelectorEx.css" />
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="./lib/adapter/ext-base-debug.js"></script>


<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="./lib/ext-all-debug.js"></script>

<!-- extensions -->
<script type="text/javascript" src="lib/ux/MultiSelect.js"></script>
<script type="text/javascript" src="lib/ux/Ext.ux.form.ItemSelectorEx.js"></script>


<!-- Components -->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'images/default/s.gif';
</script>

<script type="text/javascript" src="testItemSelectorEx.js"></script>


</head>
<body>
<h1> This is Index 2 </h1>
</body>
</html>

trvd1707
1 Nov 2011, 10:27 AM
If I add the following to ext-all-debug.js under line 27578:

if (Ext.isIE) {
sw = sw>0?sw:0;
}


It works but the sizing calculation is not right. Resizing the window will eventually show the itemSelectorEx component.

trvd1707
1 Nov 2011, 10:32 AM
BTW I removed all the extra css from index.html, leaving just the bare minimum for the component to work and I still get the error.
Thanks for any help on that. I would like to be able to deploy without changes to ext-all.js if possible.

sormy
1 Nov 2011, 12:32 PM
I have no errors in IE6 on Ext 3.3.1
but I have error in resize when decreasing width of window.
It seems like IE6 HBOX layout problem. I have no idea how to fix it. I recommend you to try found solution for IE6 HBOX on this forum.

trvd1707
1 Nov 2011, 6:39 PM
I went step by step, putting some alert around the code and I got to the problem. It is the layout:'fit' that is causing the code to crash when it is rendering the list views on the itemSelectorEx component.

For now,as a workaround, everywhere you have layout:'fit' I replaced by layout:Ext.isIE?'auto':'fit'.

This allows the list views to render in IE, but they don't have a vertical scroll bar.

Any idea on how to fix it?

Thanks,
Teresa

sormy
2 Nov 2011, 7:03 AM
ExtJS doesn't have auto layout.
There are problems with vbox/hbox layouts in IE6 with ExtJS 3.3.1 (incorrect absolute positioning)
But it's not fatal, because problem occurred only if you decrease size of window (in ExtJS 3.3.1).
Did you try ExtJS 3.3.1 or ExtJS 3.4.0 ?
If you product will work on closed network i recommend you to install google chrome frame for very conservative users.

trvd1707
2 Nov 2011, 7:06 AM
I got the 'auto' layout from the documentation. It's the default layout. Unfortunately I have no choice on the version of ExtJS to use or the browser. My client mandates ExtJS 3.2.1 and browser IE6 :(

sormy
2 Nov 2011, 7:50 AM
Your example on steroids:
window size decreasing not working in IE6


Ext.override(Ext.list.ListView, {
// private
onResize : function(w, h){
var bd = this.innerBody.dom;
var hd = this.innerHd.dom;
if(!bd){
return;
}
var bdp = bd.parentNode;
if(Ext.isNumber(w)){
var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
if(this.reserveScrollOffset || ((bdp.offsetWidth - bdp.clientWidth) > 10)){
bd.style.width = (sw < 0 ? 0 : sw) + 'px'; // patch
hd.style.width = (sw < 0 ? 0 : sw) + 'px'; // patch
}else{
bd.style.width = w + 'px';
hd.style.width = w + 'px';
setTimeout(function(){
if((bdp.offsetWidth - bdp.clientWidth) > 10){
bd.style.width = sw + 'px';
hd.style.width = sw + 'px';
}
}, 10);
}
}
if(Ext.isNumber(h)){
bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px';
}
}
});

Ext.BLANK_IMAGE_URL = 'images/default/s.gif';

Ext.onReady(function (){
Ext.ux.form.ItemSelectorEx.prototype.imagesDir = './images';

var myArray = [
[1, 'value1'],
[2, 'value2'],
[3, 'value3'],
[4, 'value4'],
[5, 'value5'],
[6, 'value6'],
[7, 'value7'],
[8, 'value8'],
[9, 'value9'],
[10, 'value10'],
[11, 'value11'],
[12, 'value12']
];

var shareReportCard = {
xtype: 'form',
buttonAlign: 'center',
labelAlign: 'top',
border: false,
padding: 10,
buttons:[
{
xtype:'button',
text:"OK",
listeners:{
click: function(b,e){
var list = Ext.getCmp('list-users').getValue();
var selectedUsers = list.split(',');
var totalSelected = selectedUsers.length;
for (var i=0; i<totalSelected; ++i){
var index = selectedUsers[i] || 1;
selectedUsers[i]=myArray[index-1][1];
}


alert("Selected USERS:"+ selectedUsers);

shareWindow.close();
}
}
}
],
items: [
{
fieldLabel: 'Item Selector',
xtype: "itemselectorex",
id:'list-users',
store: myArray,
anchor: '100% 100%',
name: 'itemselector1'
}
]
};


var shareWindow = new Ext.Window({
title: 'Share report:',
layout: 'fit',
width: 400,
height: 400,
resizable: !Ext.isIE,
items:shareReportCard
});


shareWindow.show();
});

trvd1707
2 Nov 2011, 8:37 AM
Thank you! It worked. I didn't know we could override Ext methods like this. And it is even showing the scroll bar on the list view now. I have to make the layout:'fit' on the window.

AnuDhiman
3 Jul 2012, 11:43 PM
As the page loads..all the controls except Itemselector displays..
& when i set the compatibility icon in address bar..it gets shown..
dont know why this is happening...


please help

Thanx

vinay_vrrc
31 Mar 2014, 7:18 AM
I am using ExtJS 4 and the plugin doesnt work because ListView is no longer supported by ExtJs4.Is there a fix for this?