HI,
I hope somebody can help me here with the extjs framework.
The problem I am having is that the field validation is not being rendered for the tabs that are not visibele on initialisation off the panel.
It only starts working when clicking in the textfields.
What I need is something to force the validation cue's for the fields on activating the tabs.
EDIT
I came up with this
Ext.getCmp('aanMakenGebruikerTabPanel').on('tabchange',function(){
AanMakenGebruikerWindow.syncShadow();
Ext.getCmp('Mobiel1Veld').on('render',function(v){v.validate();});
Ext.getCmp('Email1Veld').on('render',function(v){v.validate();});
//console.log("[aanMakenGebruikerTabPanel] resize -- sync");
});
EDIT
I SOLVED IT BY USING THE CASCADE FUNCTION SO IT ALSO REACHES ITEMS IN A FIELDSET.
Ext.getCmp('aanMakenGebruikerTabPanel').on('tabchange',function(tabPanel,tab){
AanMakenGebruikerWindow.syncShadow();
tab.cascade(function(item) {
if (item.isFormField) {
item.validate();
}
} );
});
thanks, Richard
The deferredRender option defaults to true. Will setting it to false help?
{
xtype: 'tabpanel',
deferredRender: false,
items: []
}
In your Tab Panel config object add listeners for the beforetabchange/tabchange event. In the handler you have to iterate through the fields contained in the activated tab and trigger each field's validation. Hope this helps.
Related
I am having a weird problem with my v-combobox that is hard to explain but I will try my best.
When i start typing in the combobox the "list" gets filtered and if i click one of the items in the dropdown menu everything is fine.
The problem hapens if i click an item and then add another letter and directly press the send button in my form, the new charachters in my combo box is not passed to my axios request. If i instead change to another field all the information in my combobox is passed to the axios.post request.
But the weirdest part is that if i put:
console.log(this.shortname)
The output contains all characters in the combobox but not in the axios.post request.
Below is my code.
// TEMPLATE
<v-combobox v-model="shortname" color="forms" :items="shortnames" autocomplete="off"></v-combobox>
// SCRIPT
sendForm(){
console.log(this.shortname)
axios.post('/endpoint, {
shortname: this.shortname
})
.then((response) => {})
}
So in the sendForm() function if i type "Richa" in the combobox and click the "Richard" listitem the
console.log(this.shortname) // outputs "Richard" and so will axios request
But if i type "Richa" and click the "Richard" listitem and then ADD "sdf" (Richardsdf)
the
console.log(this.shortname) // outputs "Richardsdf" but axios request is still "Richard"
However if i change fields after I add "sdf" axios.post will have "Richardsdf"
Im using vuetify version 2.4.2 and same behaviour on chrome and safari
My question is if there is a way to be able to get all added info into the combobox without having to change input fields?
// Best regards.
Found the solution.
I added id="targetInput" and #update:search-input="updateTargetInput" and removed the v-model to combobox
<v-combobox id="targetInput" #update:search-input="updateTargetInput" :items="shortnames" outlined :rules="shortnameRules"></v-combobox>
and in the methods i added
methods: {
updateTargetInput(currentValue){
this.shortnameone = currentValue
console.log(this.shortnameone)
},
}
Credits go to PradeepNooney
https://github.com/vuetifyjs/vuetify/issues/4679#issuecomment-682456398
Does anyone know of a way to trigger the editing of a row just by clicking the row?
I would like to see the same functionality that I see when I click an edit command button, but triggered by selecting the row.
You can add this to your change event for your grid:
myGrid.setOptions({
editable: {
mode: "inline"
},
change: function(){
this.editRow(this.select());
}
});
I know this is an old question, but I just had need for a solution and this is what worked for me. I wanted to use double-click, but the click event should also work.
var grid = $('#grid').data('kendoGrid');
$('#grid .k-grid-content table').on(
'dblclick',
'tr',
function () { grid.editRow($(this)); }
);
The selector ("#grid .k-grid-content table") works for my current configuration (mainly I have virtual scrolling turned on) and so may need to be adjusted for your specific situation.
I have kendo tree view with check boxes. When i do the button click the values are getting lost after refresh. I wanted to show back to the user after button click could you please help me on this.
$("#treeview1").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource:EquipmentTypes,
id: ["EquipmentTypeId"],
dataTextField:["EquipmentTypeName"],
expanded: false,
spriteCssClass: "rootfolder",
dataValueField: ["EquipmentTypeId"],
value:"#Model.UtilizationFilter.EquipmentTypeFilter"
});
I assume this is because the button in the question does a post of a form. If that is the case then I don't see any easy solutions.
You could either change the buttons so they fetch via ajax. Or add a change event to the tree and then save the values in hidden fields and set them manually after load.
.Events(e => e.Check("onCheck"))
In my JqGrid I am binding the dropdown dynamically, also I want the dropdown to be disabled after bindind, I written the code for this beforeShowForm event in edit portion but it get fired before buildSelect event in colModel,
as a result attribute is not getting applied, please give me some direction to disable the dropdown in this situation.
Thnaks.
I found the answer to that question,
editOptions{
dataInit: function (elem) {
$(elem).width(150);
$(elem).attr('disabled', 'disabled');
},
}
Use the following code , Its may be heplfyll
$("#dropdown").prop("disabled", true);
$("#dropdown").prop("disabled", false);
I need to be able to make the URL input field in the Link Dialog window readonly or disable it. The field gets populated when the user selects a file from the server.
Another user posted this link as a solution, http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.uiElement.html#disable but there is no example and I can't figure out how to implement it.
In the onLoad handler of the dialog you can disable it this way:
this.getContentElement("info", "url").disable();
this is what I ended up doing. I wrote it in my js file instead of the plugin file, but I dont think that would make a difference. I am using inline ckeditor version 4.0.2
CKEDITOR.on('dialogDefinition', function(event) {
var dialogName = event.data.name;
var dialogDefinition = event.data.definition;
//some code here
if(dialogName == 'flash'){ // flash dialog box name
//some code here
dialogDefinition.onShow = function () {
this.getContentElement("info","width").disable(); // info is the name of the tab and width is the id of the element inside the tab
this.getContentElement("info","height").disable();
}
}
});
You can disable url field by just one line
CKEDITOR.dialog.getCurrent().getContentElement('info','txtUrl').disable()
I got it. I added this.getInputElement().setAttribute( 'readOnly', true ); to the onload funciton in ckeditor\plugins\links\dialogs\link.js. Before I was adding it to ckeditor\_source\plugins\links\dialogs\link.js. I'd still like an example of how to use the CKEDITOR.ui.dialog.uiElement disable feature, if anyone has one.