пропозиції роботи
Paweł Kozicki Główny programista
Temat: Ext.ux.form.OptionsGrid
Razem z kolegą z pracy napisaliśmy pluginy które udostępniamy:
Ext.ns('Ext.ux.form');
Ext.ux.form.OptionsGrid = Ext.extend(Ext.form.Field, {
removeRowText: this.removeRowText || 'Remove',
clearRowText: this.removeRowText || 'Clear',
addRowText: this.addRowText || 'Add',
addRowTooltip: this.addTooltip || 'Add a new row',
addRowIconCls: this.addIconCls || 'addOption',
removeRowTooltip: this.removeTooltip || 'Remove the selected item',
clearRowTooltip: this.removeTooltip || 'Clear the all item',
removeRowIconCls: this.removeIconCls || 'removeOption',
clearRowIconCls: this.clearIconCls || 'clearOption',
headerRowName: this.headerRowName || 'Name',
headerRowValue: this.headerRowValue || 'Value',
validGrid: true,
repeatText: this.repeatText || 'Double value in name',
delimiter: ',',
anchor: 0,
minSelections: 0,
enableJson: true,
firstSeparator: '|',
secondSeparator: ',',
valueField: 1,
blankText: Ext.form.TextField.prototype.blankText,
maxSelections: Number.MAX_VALUE,
minSelectionsText: this.minSelectionsText || 'Minimum {0} item(s) required',
maxSelectionsText: this.maxSelectionsText || 'Maximum {0} item(s) allowed',
confirmDelete: this.confirmDelete || 'Are you sure you want to carry out the operation?',
warningDelete: this.warningDelete || 'at least a selection of information, delete!',
defaultAutoCreate: {
tag: "div"
}, initComponent: function (config) {
var css = '.ux-scroll-xy {overflow-y: hidden; overflow-x: hidden;}';
Ext.util.CSS.createStyleSheet(css);
this.addClass('ux-scroll-xy');
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
Ext.ux.form.OptionsGrid.superclass.initComponent.apply(this, arguments);
this.addEvents({
'dblclick': true,
'click': true,
'change': true
});
}, onRender: function (ct, position) {
Ext.ux.form.OptionsGrid.superclass.onRender.call(this, ct, position);
this.fs = new Ext.form.FieldSet({
title: this.legend,
width: this.width,
height: this.height,
layout: 'fit',
renderTo: this.el,
style: "padding:0;",
tbar: this.tbar
});
this.csm = new Ext.grid.CheckboxSelectionModel();
this.grid = new Ext.grid.EditorGridPanel({
border: false,
stripeRows: true,
width: this.width,
enableColumnHide: false,
enableHdMenu: false,
layout: 'fit',
viewConfig: {
forceFit: true
}, loadMask: true,
clicksToEdit: 1,
store: new Ext.data.SimpleStore({
fields: [this.valueName, this.valueData]
}),
cm: new Ext.grid.ColumnModel({
menuDisabled: true,
columns: [{
header: this.headerRowName,
id: this.valueName,
name: 'name',
dataIndex: 'name',
editor: new Ext.form.TextField({
allowBlank: false
})
}, {
header: this.headerRowValue,
id: this.valueData,
name: 'value',
dataIndex: 'value',
editor: new Ext.form.TextField({
allowBlank: false
})
}]
}),
sm: this.csm,
bbar: [{
text: this.addRowText,
tooltip: this.addRowTooltip,
iconCls: this.addRowIconCls,
scope: this,
handler: this.setRecord
}, '-', {
text: this.removeRowText,
tooltip: this.removeRowTooltip,
iconCls: this.removeRowIconCls,
scope: this,
handler: this.removeRecord
}, '-', {
text: this.clearRowText,
tooltip: this.clearRowTooltip,
iconCls: this.clearRowIconCls,
scope: this,
handler: this.clearRecords
}]
});
this.fs.add(this.grid);
this.hiddenName = this.name || Ext.id();
var hiddenTag = {
tag: "input",
type: "hidden",
value: "",
name: this.hiddenName
};
this.grid.on('click', this.onViewClick, this);
this.hiddenField = this.el.createChild(hiddenTag);
this.hiddenField.dom.disabled = this.hiddenName != this.name;
this.fs.doLayout();
}, afterRender: function () {
Ext.ux.form.OptionsGrid.superclass.afterRender.call(this);
}, setRecord: function () {
var n = this.grid.getStore().getCount();
var rec = this.grid.getStore().recordType;
var p = new rec({
id: n + 1
});
this.grid.stopEditing();
this.grid.store.insert(n, p);
this.grid.startEditing(n, 0);
}, removeRecord: function (grid, rowIndex, e) {
this.grid.stopEditing();
var selections = this.grid.getSelectionModel();
var records = selections.getSelections();
if (typeof(records) == 'undefined' || parseInt(records.length) == 0) {
Ext.MessageBox.alert('warning', this.warningDelete);
} else {
Ext.MessageBox.confirm('prompt box', this.confirmDelete, function (btn) {
if (btn == 'yes') {
if (records) {
Ext.each(records, this.grid.store.remove, this.grid.store);
this.hiddenField.dom.value = this.getValue();
}
}
}, this);
}
this.validate();
}, getValue: function () {
var data = new Array();
if (this.grid.store.getRange().length != 0) {
Ext.each(this.grid.store.getRange(), function (item, index) {
data[index] = item.data;
}, this);
return Ext.util.JSON.encode(data);
}
return null;
}, gridValid: function () {
var arr = new Array();
var values = new Array();
var valid = true;
var arr = Ext.util.JSON.decode(this.getValue());
var a;
Ext.each(arr, function (item, index) {
values[index] = item['name'];
if (!item['name'] /* || !item['value'] */ ) {
valid = false;
this.markInvalid(this.blankText);
}
}, this);
for (i = 0; i < values.length; i++) {
a = 0;
for (j = 0; j < values.length; j++) {
if (values[i] && values[j]) {
if (values[i] == values[j]) {
if (a >= 1) {
valid = false;
this.markInvalid(this.repeatText);
}
a++;
}
}
}
}
return valid;
}, setValue: function (value) {
if (value == '') return false;
if (!this.enableJson) {
var records = new Array();
var vv = new Array();
value = value.split(this.firstSeparator);
Ext.each(value, function (item, index) {
vv = item.split(this.secondSeparator);
records[index] = new Array();
records[index]['name'] = vv[0];
records[index]['value'] = vv[1];
}, this);
}
else {
var records = Ext.util.JSON.decode(value);
}
var rec = this.grid.getStore().recordType;
Ext.each(records, function (item, index) {
this.grid.store.insert(index, new rec(item));
}, this);
this.validate();
}, clearRecords: function () {
this.grid.store.removeAll();
this.hiddenField.dom.value = this.getValue();
this.validate();
}, validateValue: function (value) {
value = this.grid.store.getRange();
if (value.length < 1) {
if (this.allowBlank) {
this.clearInvalid();
return true;
}
else {
this.markInvalid(this.blankText);
return false;
}
}
if (this.validGrid) {
if (!this.gridValid()) {
return false;
}
}
if (value.length < this.minSelections) {
this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
return false;
}
if (value.length > this.maxSelections) {
this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
return false;
}
return true;
}, onViewClick: function (vw, index, node, e) {
this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
this.hiddenField.dom.value = this.getValue();
this.fireEvent('click', this, e);
this.validate();
this.gridValid();
}, disable: function () {
this.disabled = true;
this.hiddenField.dom.disabled = true;
this.grid.disable();
}, enable: function () {
this.disabled = false;
this.hiddenField.dom.disabled = false;
this.grid.enable();
}
});
Ext.reg('optionsgrid', Ext.ux.form.OptionsGrid);
zastosowanie:
var myfield = {
xtype:'optionsgrid',
fieldLabel: 'Label',
labelStyle: 'font-weight:bold',
name: 'field_option',
height: 200,
width: 588
};
jak są jakieś pytania to odpiszę... niedługo wrzucę więcej pluginów.
