I want to remove a form field, firing a click event in a afterLabelTextTpl.
However, I am not able to remove each field individually.
Fiddle: https://fiddle.sencha.com/#fiddle/1ie7
The two span textfields has the same id. It must be so because the text fields are added dynamically from a standard textfield
If you cannot set the id individually, you can set the id to be unique by taking advantage of the way the XTemplate in beforeLabelTextTpl generates markup. One way to do this is to append the field's generated id to the word 'icon' (or some other prefix):
'<span id="icon{id}" ...
When rendered, this will replace {id} with the field's id property. Then you can refer to this unique id in the afterrender handler:
var simboloEl = Ext.get("icon" + field.id);
Fiddle: https://fiddle.sencha.com/#fiddle/1iek
This happen because you use same id's for both fields and when you click on first one it works for second one also.
Please Check Fiddle:https://fiddle.sencha.com/#fiddle/1ien
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false,
beforeLabelTextTpl: [
'<tpl>',
'<span style="color: red; cursor: pointer"; class="' + Ext.baseCSSPrefix + 'required">X </span>',
'</tpl>'
],
listeners: {
afterrender: function(field){
var form = this.up('form');
var simboloEl = Ext.get(field.getEl().dom.childNodes[0].getElementsByClassName('x-required')[0]);
//var simboloEl = Ext.get("icon");
if(simboloEl){
simboloEl.on("click", function () {
form.remove(field);
});
}
}
}
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false,
beforeLabelTextTpl: [
'<tpl>',
'<span style="color: red; cursor: pointer"; class="' + Ext.baseCSSPrefix + 'required">X </span>',
'</tpl>'
],
listeners: {
afterrender: function(field){
var form = this.up('form');
var simboloEl = Ext.get(field.getEl().dom.childNodes[0].getElementsByClassName('x-required')[0]);
//var simboloEl = Ext.get("icon1");
if(simboloEl){
simboloEl.on("click", function () {
form.remove(field);
});
}
}
}
}],
renderTo: Ext.getBody()
});
Related
When I click on a tree record, I try to set the values of this record and set these values in the form.
In the eventcler itemclick: this.showDataFields function is triggered:
....
showDataFields: function(view, record, item, index, event) {
//got a form with fields
var panel = view.up('maintab');
console.log(panel)
//var formfield = panel.down('actionform');
//assign values from selected record to form fields
//formfield.loadRecord(record);
},
..........
In this function, view.up ('maintab') is underfined.
The maintab is Ext.tab.Panel which houses the tree.
Why can not get the topmost container and how to do it correctly?
Made an example in fiddle
thank
You should use view.up('treepanel').nextSibling().getForm().setValues(record.data) in your showDataFields function to set these values in the form.
You could have provided a better example, therefore within the limitations that were proposed.
The answer I got was this were the changes in the ActionFormTree class that got the code below:
Ext.define('Fiddle.view.ActionFormTree', {
extend: 'Ext.form.Panel',
alias: 'widget.actionformtree',
xtype: 'actionform',//mainform,
initComponent: function(){
var me = this;
Ext.apply(me,{
items: [{
xtype: 'form',
border: false,
anchor: '100%',
height: 100,
layout: {
type: 'vbox',
align: 'middle',
pack: 'center'
},
items: [{
xtype: 'textfield',
name: 'text',
fieldLabel: 'Наименование',
itemId: 'name_field',
}, {
xtype: 'textfield',
name: 'code',
fieldLabel: 'Код',
itemId: 'code_field',
}]
}],
buttons: [{
text: 'Save Changes',
scope: me,
handler: function (button) {
//Эта панель со значениями полей
form = me.down('form');
var mainpanel = me.up('#maincontainer');
var treeform = mainpanel.down('usertree');
var sel = treeform.getSelectionModel().getSelection()[0];
store = treeform.getStore();
console.log(treeform)
store.suspendAutoSync()
var child = sel.set({
text: 'Измененное',
leaf: true
});
sel.expand()
store.resumeAutoSync();
//var currRecord = form.getRecord();
//if (currRecord) {
// form.updateRecord();
// form.reset();
//}
}
}]
});
me.callParent(arguments);
}
});
So, in this example, for it to work, you will need to have a node selected to work.
Hope it helps and finalize your question.
Sample to your code
I am using ExtJs4.2.1 as the frontend and asp.net mvc 4 as the backend. My customer has the following requirements:
They wanna copy bunch of stuff from a document(like .docx file etc.) directly into the extjs's htmleditor. So, there will inevitably be mixtures of rich texts and images inside the editor, which is a problem because the html editor of extjs can not upload picture directly. So, I wonder if there is an solution for this? I googled a lot, and some of the answers will involve to add a extra button for the editor and pop up an add File panel to let the customer insert image. I think it is little bit tricky. Could I filter out the picture in the editor and directly upload it without popping up another selection panel? Anyway, is there a more elegant way to do things like this?
Any help relating this topic will be really appreciated.
Although I have not tried this you could use TinyMCE which has a plugin that claims to do this http://www.tinymce.com/wiki.php/Plugin:paste
There is an ExtJS component for TinyMCE https://www.sencha.com/forum/showthread.php?198699-Ext.ux.form.TinyMCETextArea-a-text-area-with-integrated-TinyMCE-WYSIWYG-Editor.
ExtJs HtmlEditor image upload
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'Test panel',
renderTo: Ext.getBody(),
items: [{
xtype: 'htmleditor',
itemId: 'txtBody',
fieldLabel: 'Body',
enableFormat: false,
enableFont: false,
enableFontSize: false,
enableColors: false,
allowBlank: false,
listeners: {
render: function(editor) {
editor.getToolbar().add({
xtype: 'button',
text: 'fileIUpload',
handler: function() {
new Ext.Window({
title: 'Image Upload',
closable: true,
itemId: 'wndImageUpload',
height: 120,
width: 300,
items: [{
xtype: 'form',
itemId: 'frmFileUpload',
fileUpload: true,
items: [{
xtype: 'fileuploadfield',
fieldLabel: 'Select Image',
name: 'Upload',
itemId: 'imgFileUploadField',
labelWidth: '90',
margin: '20 0 0 0'
},
{
xtype: 'button',
text: 'Submit',
scope: this,
margin: '15 0 0 200',
//handler: function (config) {
// var ns = config.ns;
// var form = ns.frmFileUpload.getForm();
// form.submit({
// url: 'Admin/UploadEmailTemplateImage',
// success: function (fp, result) {
// var imagePath = '/Upload/EmailTemplateImage/' + result.result.data);
// var imageHeight = result.result.imageHeight;
// var imageWidth = result.result.imageWidth;
// var html = '<img src="' + imagePath + '" Height= "' + imageHeight + '" Width= "' + imageWidth + '"/>';
// ns.txtBody.setValue(html);
// ns.wndImageUpload.hide();
// },
// failure: function (fp, result) {
// Ext.Msg.alert(t('Error'), result.result.message);
// }
// });
//}
},
]
}]
}).show();
}
});
}
}
}
]
}).show();
});
Change the editor to Ext.ux.form.TinyMCETextArea.
While creating the component, initialize the tinyMCEConfig parameter of the editor with a config object having paste_data_images: true
I have an Ext.Window that contains a formPanel. The formPanel has a radiogroup item which loads a radioItemsArray. Initially I create each radioItem based on data from myRadioStore and is mapped to the radiogroup in formpanel. This works fine, see code below:
this.radioItemsArr = [];
Ext.each(myRadioStore.data.items, function(itm, i, all) {
var radioItem = new Ext.form.Radio({
id : itm.data.dataId,
// custom radio label with text + images
boxLabel:
'<b>Data id:</b> ' + itm.data.dataId + '<br/>' +
'<b>Data:</b> ' + itm.data.dataDetail + '<br/>' +
'<p>' + '<img id style="imgStyle" src=\"' + itm.data.url + '\"/></p>',
name: 'radioName',
inputValue: itm.data.dataId ,
height: 'auto',
checked: false
});
this.radioItemsArr.push(radioItem);
}, this);
this.myForm = new Ext.form.FormPanel({
border: false,
id:'my-form',
frame : true,
layout : 'fit',
items: [{
autoScroll: true,
id: 'myFormId',
defaults: {
labelStyle: 'font-weight:bold;'
},
items: [{
title: 'Custom Title',
items: [{
// custom description text set on form load
id: 'descId',
style : { marginTop: '15px', border:'5px'}
}]
}, {
title: 'Select an item from below',
items: [{
anchor: '0',
autoHeight: true,
xtype: 'radiogroup',
hideLabels: true,
id: 'allRadiosID',
items: [
this.radioItemsArr
],
}]
}
],
}],
buttonAlign :'center',
buttons: [{
// save button
},{
// cancel button
}]
});
This loads all the radio buttons correctly the first time. But when myRadioStore is updated with new data from server (it happens when user clicks a button), I want my form panel to update with the new radio buttons. So when myRadioStore is updated, I remove all items in radioItemsArray and then creates new radioItem by looping through the store and pushing to radioItemsArr. I can see that the radioItemsArr has new radio button options. But the radiogroup in formpanel is not getting refreshed.
Calling Ext.getCmp('my-form').doLayout() don't seem to work. Any thought/comments?
Edit: I'm using extjs 3.4
Thanks!
Nothing is binding the store to the radio group directly. You could add a listener to the store, with the update listener to then programatically add the new store radios.
Untested code but should be near-enough.
// Add a listener to the store, this can be defined in the `listeners` property of the store config too.
myRadioStore.addListener('update', function () {
// get the radio group and remove all items
var radioGroup = Ext.getCmp('allRadiosID');
radioGroup.removeAll();
// call the function to renew the radio array.
getRadioArray();
radioGroup.add(this.radioItemsArr);
// Optionally update the container form too
Ext.getCmp('my-form').doLayout();
}, this);
this.radioItemsArr = [];
function getRadioArray() {
this.radioItemsArr = [];
Ext.each(myRadioStore.data.items, function (itm, i, all) {
var radioItem = new Ext.form.Radio({
id: itm.data.dataId,
// custom radio label with text + images
boxLabel:
'<b>Data id:</b> ' + itm.data.dataId + '<br/>' +
'<b>Data:</b> ' + itm.data.dataDetail + '<br/>' +
'<p>' + '<img id style="imgStyle" src=\"' + itm.data.url + '\"/></p>',
name: 'radioName',
inputValue: itm.data.dataId,
height: 'auto',
checked: false
});
this.radioItemsArr.push(radioItem);
}, this);
}
getRadioArray();
this.myForm = new Ext.form.FormPanel({
border: false,
id: 'my-form',
frame: true,
layout: 'fit',
items: [{
autoScroll: true,
id: 'myFormId',
defaults: {
labelStyle: 'font-weight:bold;'
},
items: [{
title: 'Custom Title',
items: [{
// custom description text set on form load
id: 'descId',
style: {
marginTop: '15px',
border: '5px'
}
}]
}, {
title: 'Select an item from below',
items: [{
anchor: '0',
autoHeight: true,
xtype: 'radiogroup',
hideLabels: true,
id: 'allRadiosID',
items: [this.radioItemsArr]
}]
}]
}],
buttonAlign: 'center',
buttons: [{
// save button
}, {
// cancel button
}]
});
Calling layout/render on form did not work in case of radioGroup. So every time myRadioStore is updated, you need to remove the radiogroup from the form, create a radio array from myRadioStore and then re-add the radiogroup array back in the form.
Something like:
Ext.getCmp('my-form').remove(Ext.getCmp('allRadiosID'), true);
// recreate `radioItemsArr[]` array of radios from updated `radioItemsArr` and add it back to form
Ext.getCmp('my-form').add(new Ext.form.RadioGroup({
anchor: '0',
autoHeight: true,
id: 'allRadiosID',
items: [
radioItemsArr
]
});
I am almost new to sencha touch and I have this simple question:
I have a panel with a search field and a start search button (a simple search):
items: [{
xtype: 'container',
html: '<div style="width:100%;text-align:center;"><img src="images/logo.png" style="max-width:40%;" /></div>',
},{
xtype: 'fieldset',
title: '<center>Insert your adress</center>',
cls:'ps-red',
items: [{
xtype: 'textfield',
name: 'adress',
required: true,
clearIcon: true,
}]
},{
xtype:'button',
text:'Search',
ui:'confirm-round',
margin:5,
handler:function(){
}
}]
Clicking on the search button I need to make an ajax call with the input text params, and display results to another panel. What should I write in the handler function of the button?
Ext.define('Demo.view.SearchResults', {
extend: 'Ext.Container',
xtype: 'resultcard',
config: {
layout:'fit',
cls:'ks-basic',
items: [{
xtype: 'dataview',
scrollable: 'vertical',
cls: 'dataview-basic',
store: '????',
}]
}
});
OK let us assume the store as 'SampleStore'
this is the sample call that you should write in handler function, see if it is useful to you,in this example I added push view, you can update panel if you want
handler : function(){
var navigationView = button.up('navigationview');
Ext.getStore('SampleStore').getProxy().setExtraParam('search',address);
Ext.getStore('SampleStore').load({
callback: function(record, operation, success) {
if(success && record.length) {
// here you can call any other function to update panel
navigationView.push({
xtype : 'resultcard',
record : record
});
} else {
Ext.Msg.alert('Address not found. (' + address + ')');
}
}
});
}// handler close
I have total six textfields on page. by default it will show only two textfields.It also has one button "add text" . When I click on button it will add one textfield at a time . So, How can I implement the functionality in extjs.
Please help..
Ext.require('*');
Ext.onReady(function() {
var i = 0;
Ext.create('Ext.button.Button', {
renderTo: document.body,
text: 'Add',
handler: function(){
++i;
form.add({
xtype: 'textfield',
fieldLabel: 'Field ' + i
});
}
})
var form = new Ext.form.Panel({
bodyPadding: 5,
renderTo: document.body,
width: 300,
items: []
});
});