Написал xaero в 19 Июль 2011

Сбросить значения после загрузка файла fileuploadfield

Не давно встретил такой баг у компонента fileuploadfield. После загрузка файла нажимаю второй раз отправить данных, а там тоже идёт загрузка файла второй раз. И вот решение этой проблемы:

 
Ext.override(Ext.form.FileUploadField, {
onRender : function(ct, position){
Ext.form.FileUploadField.superclass.onRender.call(this, ct, position);
this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
this.el.addClass('x-form-file-text');
this.el.dom.removeAttribute('name');
this.createFileInput();
var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
text: this.buttonText
});
this.button = new Ext.Button(Ext.apply(btnCfg, {
renderTo: this.wrap,
cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
}));
if(this.buttonOnly){
this.el.hide();
this.wrap.setWidth(this.button.getEl().getWidth());
}
this.addFileListener();
},
createFileInput : function() {
this.fileInput = this.wrap.createChild({
id: this.getFileInputId(),
name: this.name||this.getId(),
cls: 'x-form-file',
tag: 'input',
type: 'file',
size: 1
});
},
addFileListener : function() {
this.fileInput.on({
change: function(){
var v = this.fileInput.dom.value;
this.setValue(v);
this.fireEvent('fileselected', this, v);
},
mouseover: function() {
this.button.addClass(['x-btn-over','x-btn-focus'])
},
mouseout: function(){
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
},
mousedown: function(){
this.button.addClass('x-btn-click')
},
mouseup: function(){
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
},
scope : this
});
},
reset : function(){
this.fileInput.removeAllListeners();
this.fileInput.remove();
this.createFileInput();
this.addFileListener();
Ext.form.FileUploadField.superclass.reset.call(this);
}
});

Потом, после загрузка файла не забудьте использовать метод reset();

Источник: http://www.sencha.com/forum/showthread.php?46716-2.2-FileUploadField-reset-proposed-solution

Изменить css Ext.tree.Node

Написал xaero в 13 Декабрь 2010
<style>
.RedText a span
{
color: Red;
}
</style>
 
var currentClass = opNode.attributes.cls;
opNode.ui.removeClass(currentClass);
opNode.ui.addClass('RedText');
opNode.attributes.cls = 'RedText';

http://stackoverflow.com/questions/3346330/extjs-change-the-color-of-a-node

Загрузка store и Ext.grid.GridFilters

Написал xaero в 11 Декабрь 2010

Когда используйте плагин колоночные фильтры и store одновремеено:

Допустим так:

filters.clearFilters ();

или

filters.setFilters({
    after : new Date(dt.format('Y'), dt.format('n')-1, dt.format('j'))
});

И после используйте загрузка store с нужными параметрами.

Рекомендую использовать функции для плагин колоночные фильтры

filters.clearFiltersNoReload ();
filters.setFiltersNoReload ();

так у вас не получится паралеллные загрузки данных.

Установка значения колонок перед редактированием Ext.grid.EditorGridPanel

Написал xaero в 9 Декабрь 2010
var grid = new Ext.grid.EditorGridPanel({
  ...
  preEditValue: function(record, field){
    var v = this.constructor.prototype.preEditValue.call(this, record, field);
    if (field == 'myfield' && !v) {
      v = new Date();
    }
    return v;
  }
});

Ручное установка значении плагин Ext.grid.GridFilter

Написал xaero в 9 Декабрь 2010
// очистить фильтры
grid.getFilterPlugin().clearFilters();
 
// устанока строковые значении
grid.getFilterPlugin().getFilter('dataindex').setValue("value");
 
// устанока булевые значении
grid.getFilterPlugin().getFilter('dataindex').setValue(true);
 
// устанока числовые значении
grid.getFilterPlugin().getFilter('dataindex').setValue({gt:2, lt:9, eq:5});
 
// устанока дата
grid.getFilterPlugin().getFilter('dataindex').setValue({before: new Date(2008,0,1), after:..., on:...});
 
// устанока занчения из список
grid.getFilterPlugin().getFilter('dataindex').setValue(['item1', item2]);
 
// отключить фильтр колонки
grid.getFilterPlugin().getFilter('dataindex').setActive(false);

Установка значения radiogroup и checkboxgroup

Написал xaero в 9 Декабрь 2010

Оверайд:

Ext.override(Ext.form.CheckboxGroup, {
    setValue : function(o, val){
        if (this.rendered){
            if (arguments.length == 1){
                var t = Ext.type(o);
                if (t == 'array'){
                    for (var i = 0, len = o.length; i < len; ++i){
                        var box = this.items.itemAt(i);
                        if (box){
                            box.setValue(o[i]);
                        }
                    }
                }else if (t == 'object'){
                    for (var i in o){
                        var f = this.getBox(i);
                        if (f){
                            f.setValue(o[i]);
                        }
                    }
                }
            }else{
                var f = this.getBox(o);
                if (f){
                    f.setValue(val);
                }
            }
        }
    },
 
    getBox: function(id){
        var box = null;
        this.items.each(function(f){
            if (f.dataIndex == id || f.id == id || f.getName() == id){
                box = f;
                return false;
            }
        }, this);
        return box;
    }
});
 
Ext.override(Ext.form.RadioGroup, {
 
    setValue: function(id, value){
        if (this.rendered){
            var f = this.getBox(id);
            if (f){
                f.setValue(value);
                if (value){
                    this.items.each(function(item){
                        if (item !== f){
                            item.setValue(false);
                        }
                    }, this);
                }
            }
        }
    }
});

Пример использование:

Ext.onReady(function(){
    var boxes1 = [], boxes2 = [];
    for (var i = 0; i < 10; ++i){
        boxes1[i] = {
            boxLabel: 'Check ' + (i + 1),
            name: 'check' + (i + 1)
        };
        boxes2[i] = {
            boxLabel: 'Radio ' + (i + 1),
            id: 'radio' + (i + 1),
            name: 'radios'
        };
    }
    var fp1 = new Ext.form.FormPanel({
        renderTo: document.body,
        width: 400,
        height: 400,
        title: 'Check',
        items: {
            vertical: true,
            columns: 1,
            xtype: 'checkboxgroup',
            fieldLabel: 'Checks',
            items: boxes1,
            id: 'checks'
        },
        buttons: [{
            text: 'Key/Value',
            handler: function(){
                var x = fp1.items.first();
                x.setValue('check5', true);
            }
        },{
            text: 'Array Style',
            handler: function(){
                var x = fp1.items.first();
                x.setValue([true, true, false, true, true, false, true, true, false, false]);
            }
        },{
            text: 'Object Style',
            handler: function(){
                var x = fp1.items.first();
                x.setValue({
                    check1: false,
                    check2: false,
                    check3: true,
                    check4: false,
                    check5: false,
                    check6: true,
                    check7: false,
                    check8: false,
                    check9: true,
                    check10: true
                });
            }
        },{
            text: 'Simulate loadRecord',
            handler: function(){
                fp1.getForm().setValues({
                    checks: {
                        check1: true,
                        check2: true,
                        check3: true,
                        check4: true,
                        check5: true,
                        check6: false,
                        check7: false,
                        check8: false,
                        check9: false,
                        check10: false
                    }
                });
            }
        }]
    });
 
    var fp2 = new Ext.form.FormPanel({
        renderTo: document.body,
        width: 400,
        height: 400,
        title: 'Radio',
        items: {
            vertical: true,
            columns: 1,
            xtype: 'radiogroup',
            fieldLabel: 'Sup',
            items: boxes2
        },
        buttons: [{
            text: 'Radio 3 on',
            handler: function(){
                fp2.items.first().setValue('radio3', true);
            }
        }, {
            text: 'Radio 3 off',
            handler: function(){
                fp2.items.first().setValue('radio3', false)
            }
        },{
            text: 'Radio 4 on',
            handler: function(){
                fp2.items.first().setValue('radio4', true)
            }
        }]
    });
});

Оверайд для динамическое добавления и удаления колонки грида.

Написал xaero в 9 Декабрь 2010

Оверрайд:

Ext.override(Ext.data.Store,{
	addField: function(field){
		field = new Ext.data.Field(field);
		this.recordType.prototype.fields.replace(field);
		if(typeof field.defaultValue != 'undefined'){
			this.each(function(r){
				if(typeof r.data[field.name] == 'undefined'){
					r.data[field.name] = field.defaultValue;
				}
			});
		}
	},
	removeField: function(name){
		this.recordType.prototype.fields.removeKey(name);
		this.each(function(r){
			delete r.data[name];
			if(r.modified){
				delete r.modified[name];
			}
		});
	}
});
Ext.override(Ext.grid.ColumnModel,{
	addColumn: function(column, colIndex){
		if(typeof column == 'string'){
			column = {header: column, dataIndex: column};
		}
		var config = this.config;
		this.config = [];
		if(typeof colIndex == 'number'){
			config.splice(colIndex, 0, column);
		}else{
			colIndex = config.push(column);
		}
		this.setConfig(config);
		return colIndex;
	},
	removeColumn: function(colIndex){
		var config = this.config;
		this.config = [config[colIndex]];
		config.splice(colIndex, 1);
		this.setConfig(config);
	}
});
Ext.override(Ext.grid.GridPanel,{
	addColumn: function(field, column, colIndex){
		if(!column){
			if(field.dataIndex){
				column = field;
				field = field.dataIndex;
			} else{
				column = field.name || field;
			}
		}
		this.store.addField(field);
		return this.colModel.addColumn(column, colIndex);
	},
	removeColumn: function(name, colIndex){
		this.store.removeField(name);
		if(typeof colIndex != 'number'){
			colIndex = this.colModel.findColumnIndex(name);
		}
		if(colIndex >= 0){
			this.colModel.removeColumn(colIndex);
		}
	}
});

Пример использование:

var grid = new Ext.grid.GridPanel({
	store: new Ext.data.SimpleStore({
		fields: ['A', 'B'],
		data: [['ABC', 'DEF'], ['GHI', 'JKL']]
	}),
	columns: [
		{header: 'A', dataIndex: 'A'},
		{header: 'B', dataIndex: 'B'}
	]
});
new Ext.Viewport({
	layout: 'fit',
	items: grid
});
grid.addColumn('C');
grid.addColumn({name: 'D', defaultValue: 'D'}, {header: 'D', dataIndex: 'D'});
grid.removeColumn('B');

Примечание:
После использование кода добавления и удаления рекомендуется использовать код:

delete store.reader.ef;
store.reader.buildExtractors();

Белый фон у compositefield при валидации формы

Написал kroxus в 21 Август 2010

Можно исправить путем

invalidClass:"compositeField"

Получение информации о сортировке полей в store

Написал kroxus в 24 Апрель 2010

Столкнулся с такой проблемой.
Когда для какого нибудь Ajax request’а берем baseParams из store пропадает или не получаем информацию о сортировке.
Старею наверно. Решение было найдено за пол дня :(

if(this.store.sortInfo && this.store.remoteSort){
   var pn = this.store.paramNames;
   reqparams[pn.sort] = this.store.sortInfo.field;
   reqparams[pn.dir] = this.store.sortInfo.direction;
}

Опеределение индекса записи в store из selections

Написал kroxus в 24 Апрель 2010

И так, есть у нас Grid.
И выбрали на нём один или несколько записей надо определить индексы записей.

var selections = tmpGrid.getSelectionModel().getSelections();
//Это и есть индекс записи в store
console.log(this.store.indexOf(selections[0]));

Copyright © 2007-2009 Kroxus Software Group.