I want to remove a parameter from the store of a comboBox before it shows to the user, I know more or less how to do it but it´s not working properly, any one could give some solution? Maybe I need to select an specific event, but I tried with all the events that make sense and didn´t work, Here is the code:
var combo = fwk.ctrl.form.ComboBox({
storeConfig: {
url: app.bo.type.type_find
,fields: ['id', 'code']
}
,comboBoxConfig:{
triggerAction: 'all'
,allowBlank:false
}
});
combo.on('beforeshow', function() {
combo.store.removeAt(2);
});
Thank you very much!!!
Try removing it inside 'afterRender' event,
sample code:
listeners: {
'afterrender': function(comboRef) {
comboRef.store.removeAt(2);
}
}
Here you have the solution,
combo.getStore().load({
callback: function (r, options, success) {
if (success) {
combo.store.removeAt(2);
}
}
});
Is necessary to change it before the load of the store because first is painted the combobox and then is charged with the store data I was erasing data in a empty store.
Related
When I'm trying to paste into the empty area within the webix datatable, nothing happens and onPaste event doesn't occur.
Basically, I want to add a new item through onPaste even when existing data items aren't selected. But whether it's possible?
Something like the 'insert' operation in a list, but in my use-case the datatable can be empty after init (in the following sample I've added an item to make clipboard work). Here it is:
http://webix.com/snippet/9ae6635b
webix.ui({
id:'grid',
view:'datatable',
select:true,
clipboard:'custom',
editable:true,
columns:[
{ id:'id' },
{ id:'name', fillspace:true, editor:"text" },
{ id:'details' }
],
data: [
{ }
],
on:{
onPaste: function(text){
this.add({ id:webix.uid(), name:text })
}
}
});
Any suggestions are appreciated.
I found that 'clipbuffer' has focus only when datatable has the selection. Most probably it is required for data editing, detecting position or whatever. Anyway, the 'clipbuffer' can be focused manually:
var clipEvent = webix.event($$("grid").getNode(), "click", function(){
webix.clipbuffer.focus();
});
Sample: http://webix.com/snippet/aa441e70
I have a filefield componente in my application and I want to restrict it to only image files. I've found this question on stackoverflow:
How to restrict file type using xtype filefield(extjs 4.1.0)?
Add accept="image/*" attribute to input field in ExtJs
I'm using this code:
{
xtype:'filefield',
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}
But this code only works the first time I click on "Examine" button, when I click again on it, the restriction dissapears. I've been looking for other events like onclick to write this code in that event, but I don't find the best way to do it, Anyone has any idea?
Greetings.
This is happening because when you submit form, it calls Ext.form.field.File#reset().
You should override reset() method like this, to keep you accept property:
{
xtype:'filefield',
reset: function () {
var me = this,
clear = me.clearOnSubmit;
if (me.rendered) {
me.button.reset(clear);
me.fileInputEl = me.button.fileInputEl;
me.fileInputEl.set({
accept: 'audio/*'
});
if (clear) {
me.inputEl.dom.value = '';
}
me.callParent();
}},
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}
We're working on a Kendo UI grid that is bound to REST endpoint. The messaging portion is working great.
Where we're having trouble is trying to mask a phone number input. We like the following behavior:
1) User clicks into phone number cell.
2) User enters 1234567890.
3) When leaving the cell, the format is changed to (123) 456-7890.
We looked already at custom formats. Those seem date/time and number specific. I haven't found a way to do a custom format for a string column.
We also looked at doing this with a formatPhoneNumber function that is called on each cell's change event. I'm not happy with that approach, though it does work.
Here is the base code for the grid. I'd like to just find a way to include a custom format, or bind to a function when defining the column or field properties.
EditGridConfig = function() {
var self = this;
self.gridConfig = {
columns: [
{ field: 'PhoneNumber', title: 'Phone Number', width: '150px' },
],
data: [],
toolbar: [
{ name: "save" },
{ name: "cancel" }
],
dataSource: {
type: "json",
transport: {
read: "/api/BusinessEntity",
update: {
url: function(parent) {
return "/api/BusinessEntity/" + parent.Id;
},
dataType: "json",
type: "PUT"
}
},
schema: {
model: {
id: "Id",
fields: {
PhoneNumber: { type: "string" },
}
}
}
},
editable: "incell"
};
self.selectedData = ko.observable();
};
Here is the change event and formatPhoneNumber function we are using to get the phone number to format when focus leaves the cell. I'm just not happy with this approach, and am looking for a "cleaner" way to do it.
change: function (e) {
if (e.field == "PhoneNumber") {
console.log('before' + e.items[0].PhoneNumber);
e.items[0].PhoneNumber = formatPhoneNumber(e.items[0].PhoneNumber);
console.log('after' + e.items[0].PhoneNumber);
}
}
function formatPhoneNumber(number) {
return number.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
}
Thanks much for any suggestions!
Sorry for answering my own question. I thought I would add some more detail along the lines of #James McConnell's answer so other people won't struggle like I did trying to wire up the jQuery.on event with the .mask function.
Thanks to James' hint, I wound up using the Masked Input jQuery plugin and wiring up to dynamically created events using jQuery.on.
Here is the helper function I wrote (simplified for example):
applyDynamicInputMask = function(container, selector, event, mask) {
$(container).on(event, selector, function() {
var $this = $(this);
$this.mask(mask);
});
};
And to call it:
applyDynamicInputMask(document, "[name='PhoneNumber']", 'focusin', "(999) 999-9999");
edit: function (e) {
//if edit click
if (!e.model.isNew()) {
$('input[name=Time]').attr("data-role", "maskedtextbox").attr("data-mask", "00:00");
//init mask widget
kendo.init($('input[name=Time]'));
}
}
Have you tried a jQuery plugin? We use this one at work:
http://digitalbush.com/projects/masked-input-plugin/
You can bind the plugin to any jQuery selector, so just slap a custom class on the input that needs formatted, and use that to hook up the plugin. Not sure if this is a viable solution, but it's what I've used in the past. HTH! :)
in my ExtJS application I want to reset the stores when I change the page.
Which means I don't want any filters, groupings or listener from any old view/page.
Currentyl I am setting the store of my view like this:
{
xtype: 'admingrid',
...
columns: [
...
],
store: 'appname.store.administration.User'
}
I am loading the store like that:
onAfterRender: function() {
//load all users
this.setUserStore(this.getUserGrid().getStore());
this.getUserStore().load();
},
and in some cases like this:
onAfterRender: function() {
//load all users
this.setUserStore(Ext.StoreManager.lookup('appname.store.administration.User'));
this.getUserStore().load();
},
all my my pages extends my Base view and so I thought I just do something like this:
Ext.define("appname.view.Base", {
extend: 'Ext.panel.Panel',
ui: 'basepanel',
padding: 15,
contentPaddingProperty: 'padding',
listeners: {
beforedestroy: function() {
Ext.StoreManager.each(function (item, index, len) {
item.clearFilter(true); // param: suppressEvent
item.clearGrouping();
item.clearListeners(); // this will also remove managed listeners
});
}
}
});
this will cause that the grid is sometimes empty when I am entering the view the first time... I don't understand why.. when I am entering the view the second or sometimes the third time it does show the grid with the entries..
Is there a common way to accomplish such a thing? What I am doing wrong? I don't understand why this is happening.
Just clear the store if it's present in your afterrender event. That way, you'll re-use the store and just clear it.
So in your afterrender, use StoreManager to lookup the store. If its present, it's been created before and you can clear it.
var store = Ext.StoreManager.lookup('storeid');
if(store) {
store.clearFilter(true);
store.clearGrouping();
}
This will clear the store whenever it's present.
i use a livegrid in ExtJs 3.3.1 but believe this question is global to ExtJs.
How does a listener on a store know which grid the event comes from ?
Here why and some code.
I have a listener on a store and on update i would like to know which rows were selected in the grid and also suspend the events. This all so that i can make a selection in the grid, update a field in that range and update that field in the whole selection. Selection is done without a checkbox, just by highlighting the rows. Since this listener is used by many grids i need a way to get it froml what the gridlistener gets as parameters but that is only store, record and action
Ext.override(Ext.ux.grid.livegrid.Store, {
listeners: {
'update': function(store, record, action) {
if (action=='commit'){ //each update has 2 actions, an edit and a commit
var selected = grid.getSelectionModel().getSelections(); //need to know which grid
if (selected.length>1){ //if more than one row selected
grid.suspendEvents();
store.writer.autoSave = false;
for(var i=0; i < selected.length; i++){
if (this.fieldChanged) {
for (var name in this.fieldChanged) {
//get the field changed and update the selection with the value
if (selected[i].get(name)!=this.fieldChanged[name]){
selected[i].set(name, this.fieldChanged[name]);
}
}
}
}
grid.resumeEvents();
store.fireEvent("datachanged", store);
store.writer.autoSave = true;
}
}
if (action=='edit'){
this.fieldChanged = record.getChanges()
}
}
}
});
It would be easier in an extension but it can be done in an override as well.
MyGridPanel = Ext.extend(Ext.ux.grid.livegrid.EditorGridPanel, {
initComponent: function(){
MyGridPanel.superclass.initComponent.call(this);
this.store.grid = this;
}
});
edit --- Showing how to do it in an override, it isn't pretty but it is useful.
var oldInit = Ext.ux.grid.livegrid.EditorGridPanel.prototype.initComponent;
Ext.override(Ext.ux.grid.livegrid.EditorGridPanel, {
initComponent: function(){
oldInit.call(this);
this.store.grid = this;
}
});
There may be more grids using the store. Preferably in Ext Js 4 you observe the Gridpanel class like so:
//Associate all rendered grids to the store, so that we know which grids use a store.
Ext.util.Observable.observe(Ext.grid.Panel);
Ext.grid.Panel.on('render', function(grid){
if (!grid.store.associatedGrids){
grid.store.associatedGrids=[];
}
grid.store.associatedGrids.push(grid);
});
Found a solution myself, i override the livegrid to include a reference to itself in its store like so
Ext.override(Ext.ux.grid.livegrid.EditorGridPanel, {
listeners: {
'afterrender': function(self) {
this.store.grid = this.id;
}
}
});
Then in my store listener i can refer to store.grid