An earlier question mentioned a method using the el config in order to make the browser remember passwords. Howewer, the el config no longer exists in ExtJS 4.1.
Now, what should I do?
I believe it should be contentEl instead of el but I do this another way. You can build the entire thing with ExtJS directly. The only twist is that Ext fields will be created with the autocomplete=off attribute by default, so I use a derived class to override that.
Ext.define('ACField', {
extend: 'Ext.form.field.Text',
initComponent: function() {
Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
if (Ext.isString(oneTpl)) {
allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
}
});
this.callParent(arguments);
}
});
Ext.onReady(function() {
new Ext.panel.Panel({
renderTo: Ext.getBody(),
width: 300,
height: 100,
autoEl: {
tag: 'form',
action: 'login.php',
method: 'post'
},
items: [
new ACField({
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username'
}),
new ACField({
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password'
}),
],
buttons: [{
xtype: 'button',
text: 'Log in',
type: 'submit',
preventDefault: false
}]
});
});
The answer from lagnat was mostly correct, to get this also working on Chrome and Firefox the following is required:
1) Override default ExtJS Textfield behavior for autocomplete (copied from lagnat):
Ext.define('ACField', {
extend: 'Ext.form.field.Text',
initComponent: function() {
Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
if (Ext.isString(oneTpl)) {
allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
}
});
this.callParent(arguments);
}
});
2) Make sure the textfields are within a <form> tag: (see answer from lagnat), since ExtJS 4 the <form> tag is no longer present in a FormPanel.
autoEl: {
tag: 'form',
action: '/j_spring_security_check',
method: 'post'
},
3) Make sure there is a <form> present in the HTML, with the same <input> names:
items:[
Ext.create('ACField',{
fieldLabel: 'Username',
name:'j_username',
inputId: 'username',
allowBlank:false,
selectOnFocus:true
}),
Ext.create('ACField',{
fieldLabel:'Password',
name:'j_password',
inputId: 'password',
xtype:'textfield',
allowBlank:false,
inputType:'password'
})
],
and within the HTML the regular form with same input names:
<body>
<div id="login-panel">
<form id="loginForm" action="<c:url value="/j_spring_security_check"/>" method="post">
<input class="x-hidden" type="text" id="username" name="j_username"/>
<input class="x-hidden" type="password" id="password" name="j_password"/>
</form>
</div>
<noscript>Please enable JavaScript</noscript>
</body>
With all these changes in place, saving username/password works in IE, Chrome and Firefox.
There is the autoRender property which will allow you to apply the Extjs field to an already existing element on the page. So if you set up your basic form in html, the browser should recognize the fields for the form as login info, and then Extjs will overlay itself onto that form if you use the autoRender with a reference to the correct fields (and also the button on the form to a submit type button in your basic html form) it should work correctly.
Also, keep in mind that the browser probably will not recognize an ajax call for logging in and you may need to use the basic form submission. I have a working example in my application, but I would have a hard time trying to pull out application specific code so have an example for here. Please comment if you need the example and I may be able to get back to you by monday.
Answer by #Lagnat does not work for ExtJS 4.2.1 and 4.2.2. It might be due to removal of type config from button. What we need is standard submit button <input type="submit"> for the button. So I added it on the button with opacity: 0. Below is my working code (Tested working on Firefox 27, Chrome 33, Safari 5.1.7, IE 11. Autofill/Autosave password should be enabled for browser):
Ext.create('Ext.FormPanel', {
width: 400,
height: 500,
padding: '45 0 0 25',
autoEl: {
tag: 'form',
action: 'login.php',
method: 'post'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
name: 'username',
listeners: {
afterrender: function() {
this.inputEl.set({
'autocomplete': 'on'
});
}
}
}, {
xtype: 'textfield',
fieldLabel: 'Password',
inputType: 'password',
name: 'username',
listeners: {
afterrender: function() {
this.inputEl.set({
'autocomplete': 'on'
});
}
}
}, {
xtype: 'button',
text: 'LOG IN',
width: 100,
height: 35,
preventDefault: false,
clickEvent: 'click',
listeners: {
afterrender: function() {
this.el.createChild({
tag: 'input',
type: 'submit',
value: 'LOG IN',
style: 'width: 100px; height: 35px; position: relative; top: -31px; left: -4px; opacity: 0;'
});
}
}
}]
});
I recommend using the built in Cookie functionality of ExtJS.
You can read a cookie using: readCookie('password);
You can create a cookie using: createCookie('password', "pass123", 30); // save for 30 days
Then you can use basic business logic to auto-populate your formField with the stored password.
Does that make sense?
Related
I am trying to validate a field in my ExtJs file by sending a hit to my controller.. all works fine and I get the result back.. but the problem is that I am unable to get the me.article in the code as it shows undefined so my logic in the controller does not return the result as expected.
Any help would be highly appreciated.
Note: this only happens for Shopware v.5.4.6. It works fine for Shopware 5.2.
Shopware.apps.Article.view.detail.Base.prototype.createLeftElements = function() {
var me =this, articleId = null, additionalText = null;
console.log('article', me.article);
if (me.article instanceof Ext.data.Model && me.article.getMainDetail().first() instanceof Ext.data.Model) {
articleId = me.article.getMainDetail().first().get('id');
additionalText = me.article.getMainDetail().first().get('additionalText');
}
me.nameField = Ext.create('Ext.form.field.Text', {
name: 'name',
dataIndex: 'name',
fieldLabel: me.snippets.name,
allowBlank: false,
enableKeyEvents:true,
checkChangeBuffer:700,
labelWidth: 155,
anchor: '100%',
vtype:'remote',
validationUrl: '{url controller="MyController" action="check"}',
validationRequestParam: articleId,
validationErrorMsg: '{s name=detail/base/number_validation}Validation Message.{/s}'
});
// .. some code here which is irrelevant
return [
me.supplierCombo,
me.nameField,
me.mainDetailAdditionalText,
me.numberField,
{
xtype: 'checkbox',
name: 'active',
fieldLabel: me.snippets.active,
inputValue: true,
uncheckedValue:false
},
{
xtype: 'checkbox',
name: 'isConfigurator',
fieldLabel: me.snippets.configurator.fieldLabel,
inputValue: true,
uncheckedValue:false
}
];
};
I am not that deep into ExtJS, but perhaps the CSRF-protection causes this problem? Perhaps you need to whitelist your controller.
https://developers.shopware.com/developers-guide/csrf-protection/#addition-to-backend-token-validation
How to add custom icons in w2ui toolbar.
I need to add redo and undo icons in w2ui toolbar.
Could you please let me know?
You can use font awesome or any other CSS class based icons in a w2ui toolbar.
Example:
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type: 'button', id: 'item1', text: 'Undo', icon: 'fa fa-undo' },
{ type: 'button', id: 'item2', text: 'redo', icon: 'fa fa-repeat' }
],
onClick: function (event) {
console.log('Target: '+ event.target, event);
}
});
});
Internally, w2ui will create a <span class="fa fa-undo"> tag for the icon, thus - like I said - you can just use any other CSS based icons.
Live example: http://w2ui.com/web/demos/#!toolbar/toolbar-9
Note: the live example uses an old font awesome version, where the extra fa class is missing.
Change [] and ... Enjoy:
[!DOCTYPE html]
[html][head][title]W2UI Demo: toolbar-1[/title]
[link rel="stylesheet" href="http://w2ui.com/web/css/font-awesome/font-awesome.min.css"]
[link rel="stylesheet" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css"]
[script type="text/javascript" src="http://w2ui.com/web/js/jquery-2.1.1.min.js"][/script]
[script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"][/script]
[style]
.MyIcon1 { content:url('MyLocalIcon.png'); }
.MyIcon2 { content:url('https://www.gstatic.com/inputtools/images/tia.png'); }
[/style]
[/head]
[body]
[div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"][/div]
[script type="text/javascript"]
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [ { type: 'button', id: 'btn1', text: 'Undo', icon: 'fa-undo' }, //icon get from: font-awesome
{ type: 'button', id: 'btn2', text: 'Redo', icon: 'fa-repeat' }, //icon get from: font-awesome
{ type: 'button', id: 'btn3', text: 'Local Icon', icon: 'MyIcon1' }, //local file
{ type: 'button', id: 'btn4', text: 'Net Icon', icon: 'MyIcon2' } ] //internet link to file
});
});
[/script]
[/body]
[/html]
You can use also bootstrap glyphicon with no problem, example
icon: 'glyphicon glyphicon-menu-left'
But bootstrap 4 doesn't include fonts folders so you can download bootstrap3 and copy the fonts folder in you project , the folder contains
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
and after go here and add this css in bootstrap4 css at the end of the file..
https://gist.github.com/planetoftheweb/5d75a1ad45eb3059710747a3695fc068
and insert the right font path of your folder copied in your project.
Or you can use every png in right format for example in this way
<style type="text/css">
.icona:before{
content:url('yourUrl.png');
}
</style>
<script type="text/javascrpt">
//Your w2ui object....
{ type: 'button', id: 'item1', text: 'Undo', icon: 'icona' },
</script
I'm using tinymce a trying to extend a plugin to show a dialog with specific layout:
editor.windowManager.open({
title: 'Title of my dialog',
body: [
{type: 'label', text: 'my label'},
{ name:'my_input', type: 'textbox'},
// { type: 'text', html:'some content with <b>bold</b> if posilbe!'},
// { type: 'html', value:'<div>with custom formating</div>'}
]
}
I checked the the documentation for tinymce.ui several times but can find a way to add html or text component in the constructor of the dialog (like the comment rows in the example).
I know there is a option using a ready html template for the dialog.. but there are also a lot of events and triggers so using the constructor and .ui components is more suitable for my case.
I used to use JQuery UI dialog for this but ran into some issues after TinyMCE 4.0.
I have a TinyMCE plugin that lets people fetch the plain text version of their post in the WordPress editor. Then I show them that text using this:
var plain_block = {
type: 'container',
html: '<textarea style="margin: 10px; width: 550px !important; height: 450px !important; background-color: #eee;" readonly="readonly">Whatever plain text I need to show goes here</textarea>'
};
ed.windowManager.open({
title: "Plain Text of This Post",
spacing: 10,
padding: 10,
items: [
plain_block
],
buttons: [
{
text: "Close",
onclick: function() { ed.windowManager.close();}
}
]
});
End result is a pretty plain-jane dialog box with some HTML and a Close button
In a series of receiving elements of the dynamic form. After some of these elements, I need to add plug-in.
Ie first went to the field, such as input, and automatically added after a new xtype.
Tried createChild, but for some reason he swears by xtype.
var formPanel = new Ext.form.FormPanel({
title: 'Test Form',
labelWidth: 120,
width: 350,
padding: 10,
tbar: [{
text: 'Add Item',
handler: function () {
formPanel.add({
xtype: 'textfield',
fieldLabel: 'My TextBox'
});
formPanel.doLayout();
}
}],
renderTo: 'output'
});
Demo here http://ext4all.com/post/extjs-3-how-to-add-a-new-field-dynamically
Just diving into SenchaTouch which seems very promising.
I'm building my first application, a simple login form check source http://pastebin.com/8Zddr9cj
I'm looking for a way to do the following things :
Display 'nice' error message when the login/password is wrong. Can be in red to replace the 'Please enter your credentials); i don't know how to access this property.
If login success, close the form and load the application (probably another js file).
Quite simple, but i'm a newbie to this,
1) Fieldset has a method called setInstructions which you can call to update the instructions. So, you could specify an id configuration in your field set, then use that later on when you want to update the instructions.
...
items: [
{
xtype: 'fieldset',
id: 'fieldset',
title: 'Login',
instructions: 'Please enter your credentials',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'your#email.com',
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}]
}
],
...
//wherever you want to update the instructions
var fieldset = Ext.getCmp('fieldset');
fieldset.setInstructions('My new instructions!');
2) Here is a simple demo of this:
//create a panel, which is full screen, and will contain your form, and another item
//which you want to show at some point
var wrapper = new Ext.Panel({
fullscreen: true,
layout: 'card',
//my two items
items: [
form,
{
xtype: 'panel',
html: 'my second panel, which is not visible on render.'
}
]
});
//change the active card/item, when you need to
wrapper.setActiveItem(1); //starts at 0
Make sure you remove fullscreen from your form, as it is no longer fullscreen (this wrapper panel is).