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
]
});
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 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()
});
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'm new to Ext-Js and I've gotten a html editor with some plugins from github, now I've got a button on the editor that is supposed to pop an alert box with the contents of the text area.
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var top = Ext.create('Ext.form.Panel', {
frame:true,
title: 'HtmlEditor plugins',
bodyStyle: 'padding:5px 5px 0',
//width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
items: [{
xtype: 'htmleditor',
fieldLabel: 'Text editor',
height: 300,
plugins: [
Ext.create('Ext.ux.form.plugin.HtmlEditor',{
enableAll: true
,enableMultipleToolbars: true
})
],
anchor: '100%'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
top.render(document.body);
});
I know I'm supposed to add
handler:function(){alert(someextjscodehere)}
but I have no idea what function returns it, nor can I find it on google...
You need to use the getValue method of the editor to retrieve its content.
handler is an option of the button.
You'll need a reference to the editor in the handler, to get its content. You can get it from the form with the findField method, or with a component query.
Here's how to update your code to alert the content of the editor when clicking the save button. I've added a second save button to show you the component query method. I've tested it in this fiddle.
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var top = Ext.create('Ext.form.Panel', {
frame:true,
title: 'HtmlEditor plugins',
bodyStyle: 'padding:5px 5px 0',
//width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
items: [{
xtype: 'htmleditor',
name: 'htmlContent', // add a name to retrieve the field without ambiguity
fieldLabel: 'Text editor',
height: 300,
/* plugins: [
Ext.create('Ext.ux.form.plugin.HtmlEditor',{
enableAll: true
,enableMultipleToolbars: true
})
],
*/ anchor: '100%'
}],
buttons: [{
text: 'Save'
,handler: function() {
var editor = top.getForm().findField('htmlContent');
alert(editor.getValue());
}
},{
text: 'Save 2'
,handler: function() {
// You can grab the editor with a component query too
var editor = top.down('htmleditor');
alert(editor.getValue());
}
},{
text: 'Cancel'
}]
});
top.render(document.body);
});
I'm using Ext JS 2.3.0 and have created the search dialog shown below.
The search results are shown in a GridPanel with a single Name column, but notice that this column does not stretch to fill all the available horizontal space. However, after I perform a search, the column resizes properly (even if no results are returned):
How can I make the column display correctly when it's shown initially? The relevant code is shown below:
FV.FindEntityDialog = Ext.extend(Ext.util.Observable, {
constructor: function() {
var queryTextField = new Ext.form.TextField({
hideLabel: true,
width: 275,
colspan: 2,
});
var self = this;
// the search query panel
var entitySearchForm = new Ext.form.FormPanel({
width: '100%',
frame: true,
layout:'table',
layoutConfig: {columns: 3},
items: [
queryTextField,
{
xtype: 'button',
text: locale["dialogSearch.button.search"],
handler: function() {
var queryString = queryTextField.getValue();
self._doSearch(queryString);
}
}
]
});
// the search results model and view
this._searchResultsStore = new Ext.data.SimpleStore({
data: [],
fields: ['name']
});
var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);
var selectionModel = new Ext.grid.RowSelectionModel({singleSelect: false});
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
stripeRows: true,
autoWidth: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,
colModel: colModel,
selModel: selectionModel,
hidden: false,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
handler: function () {
entitySearchWindow.close();
}
},
{
text: locale["dialogSearch.button.cancel"],
handler: function () {
entitySearchWindow.close();
}
}
]
});
// a modal window that contains both the search query and results panels
var entitySearchWindow = new Ext.Window({
closable: true,
resizable: false,
draggable: true,
modal: true,
viewConfig: {
forceFit: true
},
title: locale['dialogSearch.title'],
items: [entitySearchForm, this._searchResultsPanel]
});
entitySearchWindow.show();
},
/**
* Search for an entity that matches the query and update the results panel with a list of matches
* #param queryString
*/
_doSearch: function(queryString) {
def dummyResults = [['foo'], ['bar'], ['baz']];
self._searchResultsStore.loadData(dummyResults, false);
}
});
It's the same issue you had in an earlier question, the viewConfig is an config item for the grid panel check the docs , so it should be
this._searchResultsPanel = new Ext.grid.GridPanel({
viewConfig: {
forceFit: true
},
....other configs you need,
To be more precise the viewConfig accepts the Ext.grid.GridView configs, feel free to read the docs on that one too.
Otherwise this seems to be the only problem, and i refer the column width, not the gridpanel width. On the gridpanel you have a title and two buttons who doesn't seem to be affected. So i repeat the gridPanel's width is ok, it's the columns width issue.
Try to remove autoWidth from GridPanel configuration, because setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all.
In addition you can try to call .doLayout(false, true) on your grid after it was rendered.
Try to add flex: 1 to your GridPanel