PDA

View Full Version : Ext.ux.ListBox



flyzb
5 Sep 2008, 5:40 PM
It's strange,there'is no listbox in Extjs.So I change the multiselect to listbox,here's my code.It works fine.
BWT,it need DDView.js

Ext.ux.ListBox = Ext.extend(Ext.form.Field, {
store: null,
dataFields: [],
data: [],
width: 100,
height: 100,
displayField: 0,
valueField: 1,
allowBlank: true,
minLength: 0,
maxLength: Number.MAX_VALUE,
blankText: Ext.form.TextField.prototype.blankText,
minLengthText: 'Minimum {0} item(s) required',
maxLengthText: 'Maximum {0} item(s) allowed',
copy: false,
allowDup: false,
allowTrash: false,
legend: null,
focusClass: undefined,
delimiter: ',',
view: null,
dragGroup: null,
dropGroup: null,
tbar: null,
bbar: null,
appendOnly: false,
defaultAutoCreate: { tag: "div" },
initComponent: function() {
Ext.ux.ListBox.superclass.initComponent.call(this);
this.addEvents({
'dblclick': true,
'click': true,
'change': true,
'drop': true
});
},
onRender: function(ct, position) {
var fs, cls, tpl;
Ext.ux.ListBox.superclass.onRender.call(this, ct, position);

cls = 'ux-mselect';

fs = new Ext.form.FieldSet({
renderTo: this.el,
title: this.legend,
height: this.height,
width: this.width,
style: "padding:1px;",
tbar: this.tbar,
bbar: this.bbar
});
// if(!this.legend)fs.el.down('.'+fs.headerCls).remove();
fs.body.addClass(cls);

tpl = '<tpl for="."><div class="' + cls + '-item';
if (Ext.isIE || Ext.isIE7) tpl += '" unselectable=on';
else tpl += ' x-unselectable"';
tpl += '>{' + this.displayField + '}</div></tpl>';

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

this.view = new Ext.ux.DDView({
multiSelect: true, store: this.store, selectedClass: cls + "-selected", tpl: tpl,
itemSelector: "." + cls + "-item",
isFormField: true, applyTo: fs.body, appendOnly: this.appendOnly
});

fs.add(this.view);

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


this.hiddenName = this.name;
var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.name };
if (this.isFormField) {
this.hiddenField = this.el.createChild(hiddenTag);
} else {
this.hiddenField = Ext.get(document.body).createChild(hiddenTag);
}
fs.doLayout();
},

initValue: Ext.emptyFn,

onViewClick: function(vw, index, node, e) {
this.getValue();
this.fireEvent('click', this, e);
},

onViewDblClick: function(vw, index, node, e) {
return this.fireEvent('dblclick', vw, index, node, e);
},

getValue: function() {
var record = null;
var values = [];
for (var i = 0; i < this.view.store.getCount(); i++) {
record = this.view.store.getAt(i);
values.push(record.get(this.valueField));
}
this.hiddenField.dom.value = values.join(this.delimiter);
return this.hiddenField.dom.value;
},

setSelectValue: function(values) {
var index;
var selections = [];
this.view.clearSelections(true);
this.hiddenField.dom.value = '';

if (!values || (values == '')) { return; }

if (!(values instanceof Array)) { values = values.split(this.delimiter); }
for (var i = 0; i < values.length; i++) {
index = this.view.store.indexOf(this.view.store.query(this.valueField,
new RegExp('^' + values[i] + '$', "i")).itemAt(0));
selections.push(index);
}
this.view.select(selections);
this.hiddenField.dom.value = this.getValue();
this.validate();
},

getSelectValue: function() {
var record = null;
var values = [];
var selectionsRecords = this.view.getSelectedRecords();
for (var i = 0; i < selectionsRecords.length; i++) {
values.push(selectionsRecords[i].get(this.valueField));
}
return values.join(this.delimiter);
},

addValue: function(record) {
this.view.store.add(record);
var record = null;
var values = [];
for (var i = 0; i < this.view.store.getCount(); i++) {
record = this.view.store.getAt(i);
values.push(record.get(this.valueField));
}
this.hiddenField.dom.value = values.join(this.delimiter);
this.view.refresh();
},
delValue: function(record) {
this.view.remove(record);
this.getValue();
this.view.refresh();
},
removeSelected: function() {
var selectionsRecords = this.view.getSelectedRecords();
for (var i = 0; i < selectionsRecords.length; i++) {
this.view.store.remove(selectionsRecords[i]);
}
this.getValue();
},
selectAll: function() {
var selections = [];
for (var i = 0; i < this.view.store.getCount(); i++)
selections.push(i);
this.view.select(selections);
this.validate();
},
reset: function() {
this.setValue('');
},

getRawValue: function(valueField) {
var tmp = this.getValue(valueField);
if (tmp.length) {
tmp = tmp.split(this.delimiter);
}
else {
tmp = [];
}
return tmp;
},

setRawValue: function(values) {
setValue(values);
},

validateValue: function(value) {
if (value.length < 1) { // if it has no value
if (this.allowBlank) {
this.clearInvalid();
return true;
} else {
this.markInvalid(this.blankText);
return false;
}
}
if (value.length < this.minLength) {
this.markInvalid(String.format(this.minLengthText, this.minLength));
return false;
}
if (value.length > this.maxLength) {
this.markInvalid(String.format(this.maxLengthText, this.maxLength));
return false;
}
return true;
}
});

Ext.reg("ListBox", Ext.ux.ListBox);

mdissel
6 Sep 2008, 4:10 AM
Can you post a screenshot? to quickly get an idea of the looks..

mjlecomte
6 Sep 2008, 4:22 AM
There's another here? http://lovcombo.extjs.eu/

By the way you can post screenshots, demos, etc if you post it in the UX Repository.