PDA

View Full Version : Ext.ux.form.ComboBoxGrid > Drop down list Grid (light) for Combobox



denkoo
22 Feb 2009, 7:04 AM
I extend ComboBox for create a drop down list Grid (light grid, not Ext.grid.GridPanel)

Show picture on this thread to see an example



/* global Ext */
/* @class Ext.ux.form.ComboBoxGrid
* Version: 1.0
* Author: Laurent Mery - laurent.mery@gmail.com
* Copyright 2009, Free for use and distribute.
*
************************************************************************************
* This file is distributed on an AS IS BASIS WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE.
************************************************************************************

License: ux.form.ComboBoxGrid 1.0 are licensed under the terms of
the GNU General Public License (GPL) version 3 - http://www.gnu.org/licenses/gpl.html
*/

Ext.ns('Ext.ux.form.ComboBoxGrid');
Ext.ux.form.ComboBoxGrid = Ext.extend(Ext.form.ComboBox, {

initList : function(){
if(!this.list){
var cls = 'x-combogrid-list', iTemp, iWidthDefault = 10, iWidthTotal = 0, iColWidthEmpty = 0, iWidthDelta = 0,
lw, x, y, tplInside = '', columnHd = [], fi = this.store.fields.items, l = fi.length, lwM = '5000';

this.list = new Ext.Layer({
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});

lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
/*
* Calcul width
*/

for(x = 0; x < l; x ++) if(fi[x].width) {
iWidthTotal += fi[x].width;
}
else
iColWidthEmpty++;
iWidthDelta = lw - iWidthTotal;
if(iWidthDelta > 0) {
if(iColWidthEmpty > 0) {
iTemp = parseInt(iWidthDelta / iColWidthEmpty);
if( iTemp > iWidthDefault) iWidthDefault = iTemp;
}
else if(iColWidthEmpty == 0) {
fi[l - 1].width += iWidthTotal;
}
}
else {
lw += Math.abs(iWidthDelta);
for(x = 0; x < l; x ++) if(!fi[x].width) {
fi[x].width = iWidthDefault;
lw += iWidthDefault;
}
}

this.list.setWidth(lw);
this.list.swallowEvent('mousewheel');
this.assetHeight = 0;

if(this.title){
this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
this.assetHeight += this.header.getHeight();
}

if(Ext.isIE) lwM = lw;
/*
* Print Header
*/
for(x = 0; x < l; x ++) if(fi[x].header) {
columnHd.push({tag: 'td', width: String(fi[x].width || iWidthDefault), html: '' + String(fi[x].header)});
}
this.header = this.list.createChild({tag: 'table', style: 'width:' + lwM + 'px', cellpading: 0, cellspacing: 0, border: 0, cls: cls+'-header-column', children: [{tag: 'tbody', children: [ {tag: 'tr', children: columnHd}]}]});
this.assetHeight += this.header.getHeight();

this.innerList = this.list.createChild({cls:cls+'-inner'});
this.innerList.on('mouseover', this.onViewOver, this);
this.innerList.on('mousemove', this.onViewMove, this);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr') + (fi.length + 2));

if(this.pageSize){
this.footer = this.list.createChild({cls:cls+'-ft'});
this.pageTb = new Ext.PagingToolbar({
store:this.store,
pageSize: this.pageSize,
renderTo:this.footer
});
this.assetHeight += this.footer.getHeight();
}

if(!this.tpl){
this.tpl = '';
for(x = 0; x < l; x ++) if(fi[x].header) {
tplInside += '<td class="' + cls + '-column" style="width:' + String(fi[x].width || iWidthDefault) + '">{' + fi[x].name + '}</td>';
}
tplInside = '<table style="width:' + lwM + 'px" cellpadding="0" cellspacing="0" border="0"><tbody><tr>' + tplInside + '</tr></tbody></table>';
this.tpl += '<tpl for="."><div class="' + cls + '-item">' + tplInside + '</div></tpl>';
}

this.view = new Ext.DataView({
applyTo: this.innerList,
tpl: this.tpl,
singleSelect: true,
selectedClass: this.selectedClass,
itemSelector: this.itemSelector || '.' + cls + '-item'
});

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

this.bindStore(this.store, true);

if(this.resizable){
this.resizer = new Ext.Resizable(this.list, {
pinned:true, handles:'se'
});
this.resizer.on('resize', function(r, w, h){
this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
this.listWidth = w;
this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
this.restrictHeight();
}, this);
this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
}
}
}

});
Ext.reg('combogrid', Ext.ux.form.ComboBoxGrid);
You need special CSS


.x-combogrid-list{
border: 1px solid #98c0f4;
background:#ddecfe;
zoom:1;
overflow:hidden;
}
.x-combogrid-list-inner{
overflow: auto;
background: white;
position: relative;
zoom: 1;
overflow-x: hidden;
}
.x-combogrid-list-hd{
font: bold 11px tahoma,arial,helvetica,sans-serif;
color:#15428b;
background-image:url(images/combogrid-liste-hd.gif);
border-bottom: 1px solid #98c0f4;
padding: 3px;
}
.x-resizable-pinned .x-combogrid-list-inner{
border-bottom:1px solid #98c0f4;
}
.x-combogrid-list-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border:1px solid rgb(237, 237, 237);
}
.x-combogrid-list .x-combo-selected{
border: 1px dotted #a3bae9;
background: #DFE8F6;
cursor: pointer;
}
.x-combogrid-list .x-toolbar{
border-top:1px solid #98c0f4;
border-bottom:0 none;
}

.x-combogrid-list-header-column td {
font: 700 11px tahoma, arial, helvetica, verdana, sans-serif;
float: left;
padding:4px 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-left:1px solid #EEEEEE;
border-right:1px solid #D0D0D0;
height: 14px; line-height: 14px;
-moz-user-select:none;
outline-color: invert;
outline-style: none;
outline-width: medium;
background: #F9F9F9 url(images/combogrid-list-header-column.gif) repeat-x scroll 0pt bottom;
}
.x-combogrid-list-ft {
font: normal 10px tahoma,arial,helvetica,sans-serif;
color: #369;
padding: 3px;
}
.x-combogrid-list-column {
float: left;
padding:2px 2px;
font: normal 11px tahoma, arial, helvetica, verdana, sans-serif;
}
The Exemple for obtain result on picture is :


{
xtype: 'combogrid',
width: 250,
store: new Ext.data.SimpleStore({
fields: [
{name: 'value', header: 'ID', width: 20},
{name: 'text', header: 'Texte', width: 200},
{name: 'group', header: 'Groupe', width: 120}
],
data: [
[1, 'Item 1a', 'Group 1'],
[2, 'Item 1b', 'Group 1'],
[3, 'Item 1c', 'Group 1'],
[4, 'Item 2a', 'Group 2'],
[5, 'Item 2b', 'Group 2'],
[6, 'Item 3a', 'Group 3'],
[7, 'Item 3b', 'Group 3']
]
}
Some informations :

* If your field declaration, if you don't declare header, column will be not display


fields: [
'value',
{name: 'text', header: 'Texte', width: 200},
{name: 'group', header: 'Groupe', width: 120}
],
=> this, print only text and group column


* if you don't declare one column's width... this column take delta on listWidth and sum of all declare width
* if you don't declare deux columns's width... the delta / 2 (columns)... etc

Exemple 2 (picture 2):
Add pageSize, Title, lazyInit, lazyRender supported



{
xtype: 'combogrid',
x: 60,
y: 60,
width: 250,
lazyInit: false,
lazyRender: true,
listAlign: 'tr-br',
title: 'test',
pageSize: '5',
store: new Ext.data.SimpleStore({
id: 1,
fields: [
'value',
{name: 'text', header: 'Texte', width: 200},
{name: 'group', header: 'Groupe', width: 120}
],
data: [
[1, 'Item 1a', 'Group 1'],
[2, 'Item 1b', 'Group 1'],
[3, 'Item 1c', 'Group 1'],
[4, 'Item 2a', 'Group 2'],
[5, 'Item 2b', 'Group 2'],
[6, 'Item 3a', 'Group 3'],
[7, 'Item 3b', 'Group 3']
]
}
Enjoy

prince1a
25 Feb 2009, 10:14 AM
Hey. This looks nice. Can you provide a working example also ? Thanks

zhw511006
25 Feb 2009, 5:50 PM
Thank You For Sharing!

But maybe some errors!

1)how get the selected row
2)only set the combo, mode: "local" , your example can work! I use IE7 and Ext2.2!
3)Can't paging !

Any Idears? Thank You!

garraS
25 Feb 2009, 8:43 PM
Nice ux.

Here's the code that I used:


Ext.onReady(function(){
new Ext.form.FormPanel({
renderTo: Ext.getBody(),
frame: true,
items: [{
xtype: 'combogrid',
fieldLabel: 'asd',
mode: 'local',
triggerAction: 'all',
width: 250,
lazyInit: false,
lazyRender: true,
listAlign: 'tr-br',
title: 'test',
pageSize: '5',
store: new Ext.data.SimpleStore({
id: 1,
fields: [
{name: 'value', header: 'ID', width: 20},
{name: 'text', header: 'Texte', width: 200},
{name: 'group', header: 'Groupe', width: 120}
],
data: [
[1, 'Item 1a', 'Group 1'],
[2, 'Item 1b', 'Group 1'],
[3, 'Item 1c', 'Group 1'],
[4, 'Item 2a', 'Group 2'],
[5, 'Item 2b', 'Group 2'],
[6, 'Item 3a', 'Group 3'],
[7, 'Item 3b', 'Group 3']
]
}),
onSelect: function(record){
this.setValue(record.get('text'));
this.collapse();
}
}]
});
});


In FF (3.0.6), columns don't respect the width.
Why you don't try a really GridPanel and forget using tables?

Sorry for my english.

mabra
28 Jun 2009, 9:32 AM
Hi !

I get only "object expected" error [IE]. So, what ext libs do I have to use [I am using: ext-base.js, ext-all-debug.js, your component]?? You are binding to the document's body, so I should not need any more html objects in the page, right? Due to my restricted in-depth knowledge of javascript:Where Do I have to include your component? I include it in the header after the libs. If I set 'xtype: combogrid' as a comment, the page displays, otherwise, it fails. Should your component be put inside an Ext.onReady(..) ???

Thanks.

br--mabra

santoshj
11 Feb 2010, 3:53 AM
The Code given works fine in IE and Mozilla firefox .

But its not working in Opera and Safari.

Any suggestions.
Thanks in advance