I am new to ExtJs(using EXT js 4 ), I am trying out simple code.
I have a submit button which is set disabled by default
buttons: [{
text: 'Submit',
id:'submit',
disabled:true
}]
I want to enable the button based on certain conditon.Something like
if (validation_status== "success") {
//Enable the submit button
//Ext.get('submit').dom.disabled = false; -- Not working
//Ext.get('submit').enable(); -- Not working
}
I tried above 2 option. Which did not worked for me.
Can anyone help me out?
Use this:
Ext.getCmp('submit').enable();
When you use Ext.getCmp(), it gives you the component which has a number of component methods to use. If you use Ext.get(), it gives you the element with a number of dom element modification functions. So, its always better to test in firebug console for any of these to know what methods are there.
console.log(Ext.getCmp('submit'));
console.log(Ext.get('submit'));
Related
How can I show programmatically the column PopupMenu in Ag-Grid?
PopupMenu Ag-Grid
With the gridApi you can hide it, but not show it
gridApi.hidePopupMenu()
I try also with the FilterInstance and the columnApi, but I haven't found anything that works
gridApi.getFilterInstance(colKey)
gridColumnApi?.getColumn(colKey) ...
Thanks
you can add a little workaround to open the filter popup:
// find the header menu button for the desired column
const colElement = document.querySelector("div[col-id='" + desiredColumn.getColId() + "'] > .ag-cell-label-container > .ag-header-cell-menu-button");
colElement.dispatchEvent(new Event("click")); // simulate a click on the menu button
// the next part ist to switch to the filter tab:
setTimeout(() => { // give the browser some time to render the menu
const tabElement = document.querySelectorAll("div.ag-tabs-header > .ag-tab")[1]; // select the filter tab
if (!tabElement.classList.contains("ag-tab-selected")) { // if the filter tab is not selected already
tabElement.dispatchEvent(new Event("click")); // click the filter tab
}
}, 10);
Basically, you locate the button in the DOM and execute a virtual click on it. It's not pretty but it works well, maybe we'll get an API for this in the future.
What you're wanting to do is to access getFilterInstance() of the Ag Grid API. Here's the relevant documentation: https://www.ag-grid.com/javascript-grid/filter-api/
Here's one way of accessing, and setting the filter using the getFilterInstance method
var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved') //added the option i wanted
FilterComponent.onFilterChanged();
Here's a related Stackoverflow question: how to pre-set column filter in ag-grid
How to make the quill editor field required? The editor gets rendered into a div, but it isn't clear if there is a way to make the field/editor required when the form submits.
As you wrote, Quill works with a div and not with a form element so it can't help you with form validation.
You'll need to check manually if the editor's content is empty, prevent the user from submitting the form and show a message that this field is required.
You can copy quill contents to a hidden input element before submitting the form as shown in this example.
A custom form control is also a good way to go. You can try to workaround with Quill's event handler and getting the value of the form.
Then a custom form validator is also possible.
Check : https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
I've been trying to work around exactly this problem too today, using Python for back-end and a hidden form-field (name='editor') to get the value from the quill container to the back-end. Ended up with not actually really a validator but working about the same:
if request.form['editor'] == '\"<p><br></p>\"':
flash("You cannot send in empty posts!")
return redirect(CURRENT PAGE)
else:
CODE EXECUTED IF EDITOR IS NOT EMPTY
Not sure what you're doing with the input on the editor or whether you're even using Python for backend but I hope this helps. "<p><br></p>" is what the console told me the standard input on empty submission was when getting the information out of the editor.
Good luck!
const yourText = '<div><br></div>';
const htmlTagsToRemove = ['<div>', '</div>', '<br>'];
function removeHtmlTags(data) {
let text = data;
htmlTagsToRemove.forEach(it => {
text = text.replace(it, '');
});
return text;
}
const newText = removeHtmlTags(yourText);
console.log(newText);
My greetings !
I am trying to focus on first pagingtoolbar`s button by hot key. For example, when it will be pushed combination CTRL + -->, the focus will be on first enabled button of pagingtoolbar.
At this time I can get fisrt disabled button:
Ext.ComponentQuery.query('pagingtoolbar button{isDisabled()}')[0]
But I need a code like that:
Ext.ComponentQuery.query('pagingtoolbar button{isEnabled()}')[0]
I have thought that there is such method in Ext.button.Button, but I could not find it.
Obviously, I can resolve my problem by another way, for example, I can get all enabled buttons in paging toolbar by this code:
var buttons = Ext.ComponentQuery.query('pagingtoolbar button');
var en_buttons = [];
for(var i=0;i<buttons.length;i++){
if( !buttons[i].isDisabled() )en_buttons.push(buttons[i]);
}
en_buttons[0].focus(false,100);
But I believe that there are no need to write such code, it must be resolved by one line of code.
With regards ,
A
You can use the disabled property.
Disabled buttons:
Ext.ComponentQuery.query('pagingtoolbar button[disabled=true]')
Enabled buttons:
Ext.ComponentQuery.query('pagingtoolbar button[disabled=false]')
I use https://github.com/CakeDC/TinyMCE to download plugin and did follow all the step to integrate on my cakePHP project. so right now, all the textarea was successfully changed to tinyMCE editor
But when click "SUBMIT" to submit my form, page cannot submit and post data. Without loading editor my form can submit and post data.
Is any jquery problem ? please advise me.
thank you.
Bootsrab.php
CakePlugin::load('TinyMCE');
Configure::write('TinyMCE.editorOptions', array('width' => '500px','height'=>'250px' ));
Controller:
public $helpers=array('Html','Form','TinyMCE.TinyMCE');
View:
$this->TinyMCE->editor(array('theme' => 'advanced', 'mode' => 'textareas'));
echo $this->Form->input('user_requirements',array('required'=>true) );
Layout : default
loding js file:
echo $this->Html->script(array('ddsmoothmenu','jquery-1.7.1.min','jquery-ui-1.8.17.custom.min'));
You've set the field to be required, so the problem you are experiencing is probably the browser based form validation.
The problem is that the validation applies before TinyMCE injects the contents into the textarea, and so the validation will always fail as the textarea is empty. This is a very long known "bug" btw:
http://www.tinymce.com/develop/bugtracker_view.php?id=4768
http://www.tinymce.com/develop/bugtracker_view.php?id=5671
In Firefox you might notice a validation bubble that appears "behind" the browser in the bottom left corner of the screen, and in Chrome for example it would throw the following error: "An invalid form control with name='...' is not focusable".
The quick and dirty fix would be to set required to false. In order to keep the required class on the generated container div you would have to set this manually using the div option:
'div' => array('class' => 'input text required')
It's also possible to disable browser validation completely by defining the novalidate attribute on the form:
$this->Form->create('ModelName', array('novalidate' => true));
or using the formnovalidate attribute on the submit button:
$this->Form->submit('Submit', array('formnovalidate' => true));
Theoretically it would also be possible to listen to the invalid event and display custom validation bubbles, but the problem here is that the browser behavior is not consistent, ie in Chrome it's not possible to validate invisible (using display or visibility) fields. Also the content would still be missing in the textarea field.
What seems to work is using opacity to hide the field, that way one could position the textarea under the editor, and the validation bubble would be displayed correctly. However that would also require to inject the editor contents in the textarea manually when pressing Enter and when clicking the submit button (or probably even simpler using proper editor change events). I'll see if I can come up with an example for this later on.
Update: I've implemented a fix/workaround in form of a TinyMCE 4.x plugin, as this was bugging me in some of my own applications too, see https://github.com/ndm2/tinymce-validatable
I seem to be struggling with something I have used a million times! I dont understand why all of a sudden it doesnt work anymore :)
My Layout
an accordion
> toolbar
> tabs
>tab 1
> form.panel 1
> textfield (alias: 'widget.mytextfield')
> form.panel 2
>tab 2
> form.panel 1
Now heres the problem... when im at panel 1 and I try to access the textfield (mytextfield)
//panel, being 'tab 1 > panel 1'
var textfield = panel.down('mytextfield')
It just returns null.
My output for
console.info(panel.down());
is the header of the panel (so im def at the right location) -> it seems as if it cant find the body of the panel
Any ideas? Totally stuck!
The only way I get get 'mytextfield' is with
var textfield = panel.items.items[0];
But if the textfield changes order then the above code wouldnt work anymore of course
Thanks in advance!
UPDATE
Ok, I've figured something out... which is strange
If I take the textfield out of the panel and place it in a separate file. Then include it using requires. I can access the textfield with .down()
For example in my main form panel
...
requires:['App.view.MyTextField'],
items:[{
xtype:'mytextfield' //i can access you with .down()
},{
xtype:'textfield',
alias:'widget.mytextfield2' //you are showing up - but I CANT access you with .down() - only panel.items.items[0]
}]
...
MyTextField
Ext.define('App.view.MyTextField', {
extend:'Ext.form.field.Textfield',
alias:'widget.mytextfield'
});
Any ideas why?
How and where do you get your parent panel component?
http://jsfiddle.net/UBb8n/1/ — works for me.
UPDATED:
According to documentation:
alias:
List of short aliases for class names.
Most useful for defining xtypes for widgets.
So keep in mind that items: {xtype: 'blah'} != Ext.define('My.Class.Blah', {alias: 'widget.blah'}).
First it's just an instantiation of the second one.
And alias: 'widget.mycoolpanel' is just a shorthand for helper function Ext.widget that searches components with xtype: 'widget.<…>'.