Related
I'm using a htmleditor field in a form and want to see the red rectangle when I use markInvalid on the field but it seems to not work.
Here a code sample :
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Contact Info',
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id: 'nameId',
fieldLabel: 'Name'
}, {
xtype: 'htmleditor',
name: 'name2',
id: 'nameId2',
fieldLabel: 'Name2'
}],
bbar: [{
text: 'Mark both fields invalid',
handler: function() {
// Working fine, as expected
var nameField = formPanel.getForm().findField('name');
nameField.markInvalid('Name invalid message');
// Not working
// (but the docs specify markInvalid should works)
var nameField2 = formPanel.getForm().findField('name2');
nameField2.markInvalid('Name invalid message');
// Not working either
//var nameField3 = Ext.getCmp('nameId2');
//nameField3.markInvalid('Name invalid message');
}
}]
});
When you click on the button, only the textfield appear in red.
The HTMLeditor doesn't appear red.
Am I missing something ?
This markInvalid function is empty for htmleditor in it's source file that's why is not working.
You need to first override this htmleditor and create markInvalid like below.
Ext.define('EXT.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
markInvalid: function(errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
}
});
In this Fiddle, I have create a demo using HtmlEditor.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('EXT.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
markInvalid: function (errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
}
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
bodyPadding: 10,
height:500,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id: 'nameId',
fieldLabel: 'Name'
}, {
xtype: 'htmleditor',
name: 'name2',
id: 'nameId2',
fieldLabel: 'Name2'
}],
bbar: [{
text: 'Mark both fields invalid',
handler: function (button) {
var form = button.up('form').getForm();
form.findField('name').markInvalid('Name invalid message');
form.findField('name2').markInvalid('Html editor invalid message');
}
}]
});
}
});
CSS
<style>
.x-form-invalid .x-html-editor-wrap {
background-color: white;
background-image: url(//cdn.sencha.com/ext/gpl/4.1.1/resources/themes/images/default/grid/invalid_line.gif);
background-repeat: repeat-x;
background-position: center bottom;
border-color: rgb(204, 51, 0);
}
</style>
i have a form A containing some fields about questions(a model in my application),but it can not submit directly by form.getForm().submit().the buttons in form A will open another window,and a field on that window.i want to attach the field to form A ,so i can submit those fields together.
the detail is as follows:
enter image description here
In this case, I would try to give two different ID's to forms. Next, retrieve the values from them and merge If the field names are different.
var first_form_values = Ext.getCmp('first-form').getForm().getValues();
var second_form_values = Ext.getCmp('second-form').getForm().getValues();
var all_values = Ext.Object.merge(first_form_values , second_form_values);
Then you have all the values and you can send them by Ext.Ajax etc.
Full example:
Ext.create('Ext.window.Window', {
title: 'First Form',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
id: 'first-form',
items: [
{
xtype: 'textfield',
fieldLabel: 'First field',
name: 'first-field',
}
]
},
buttons: [
{
text: 'Show second form'
handler: function()
{
Ext.create('Ext.window.Window', {
title: 'Second Form',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
id: 'second-form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Second field',
name: 'second-field',
}
]
},
buttons: [
{
text: 'Submit'
handler: function()
{
var first_form = Ext.getCmp('first-form'),
second_form = Ext.getCmp('second-form');
if(first_form && second_form)
{
var fist_form_values = first_form.getForm().getValues(),
second_form_values = second_form.getForm().getValues();
var values = Ext.Object.merge(fist_form_values, second_form_values);
// You have all values from two forms
}
}
}
]
}).show();
}
}
]
}).show();
I have a grid panel in a form. Any row of the grid panel have a filefield. I want to send any row (name field and filename field) to server.
Model:
Ext.define('FM.model.DefineCode', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'filename', type: 'string'}
],
validations: [
{type: 'presence', field: 'id'},
{type: 'presence', field: 'name'},
{type: 'presence', field: 'filename'}
]
});
Store:
Ext.define('FM.store.DefineCode', {
extend: 'Ext.data.Store',
model: 'FM.model.DefineCode',
autoLoad: true,
data: []
});
View:
Ext.define('FM.view.map.DefineCode', {
extend: 'Ext.window.Window',
title: 'Define Code',
alias: 'widget.mmDefineCode',
width: 600,
modal: true,
items: [{
xtype: 'form',
items: [{
xtype: 'gridpanel',
title: 'myGrid',
store: 'DefineCode',
columns: [
{
text: 'Id',
xtype: 'rownumberer',
width: 20
}, {
text: 'Name',
dataIndex: 'name',
flex: 1,
editor:{
xtype: 'textfield'
}
}, {
text: 'File',
dataIndex: 'filename',
width: 200,
editor:{
xtype: 'filefield',
emptyText: 'Select your Icon',
name: 'photo-path',
buttonText: '',
flex: 1,
buttonConfig: {
iconCls: 'icon-upload-18x18'
},
listeners: {
change: function(e, ee, eee) {
var grid = this.up('grid');
var store = grid.getStore();
var newStore = Ext.create('FM.store.DefineCode',{});
store.insert(store.data.items.length, newStore);
}
}
},
}, {
text: '',
width: 40
}
],
height: 200,
width: 600,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]}
],
}],
buttons: [{text: 'OK', action: 'OK'}],
initComponent: function() {
var me = this;
Ext.apply(me, {});
me.callParent(arguments);
}
});
Controller:
...
form.submit({
url: 'icon/create',
});
When I submit form, only last row is sending to server.
Where is problem?
Why you using this ?
var newStore = Ext.create('FM.store.Path', {});
store.insert(store.data.items.length, newStore);
try using rowEditing to edit/submit 1 row data :
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
clicksToMoveEditor: 1,
listeners: {
'validateedit': function(editor, e) {},
'afteredit': function(editor, e) {
var me = this;
var jsonData = Ext.encode(e.record.data);
Ext.Ajax.request({
method: 'POST',
url: 'your_url/save',
params: {data: jsonData},
success: function(response){
e.store.reload({
callback: function(){
var newRecordIndex = e.store.findBy(
function(record, filename) {
if (record.get('filename') === e.record.data.filename) {
return true;
}
return false;
}
);
me.grid.getSelectionModel().select(newRecordIndex);
}
});
}
});
return true;
}
}
});
and place it to your plugin.
I don't try it first, but may be this will help you a little.
AND this is for your controller to add a record from your grid, you need a button to trigger this function.
createRecord: function() {
var model = Ext.ModelMgr.getModel('FM.model.DefineCode');
var r = Ext.ModelManager.create({
id: '',
name: '',
filename: ''
}, model);
this.getYourgrid().getStore().insert(0, r);
this.getYourgrid().rowEditing.startEdit(0, 0);
}
check this for your need, this is look a like. You need to specify the content-type.
And for your java need, please read this method to upload a file.
i have 6 different filters on a single list and i want to render the app on mobile screen
to save the toolbar space I want to combine all that filters.
the problem is, when I combine these filters in a single form panel these filters dose not work
can you please guide me on how to combine them, should I combine these filters in overlay panel rather than formPanel
following is the code for filters.js
kiva.views.LoanFilter = Ext.extend(Ext.form.FormPanel, {
ui: 'green',
cls: 'x-toolbar-dark',
baseCls: 'x-toolbar',
initComponent: function() {
this.addEvents('filter');
this.enableBubble('filter');
var form;
var showForm = function(btn, event) {
form = new Ext.form.FormPanel(formBase);
form.showBy(btn);
form.show();
};
Ext.apply(this, {
defaults: {
listeners: {
change: this.onFieldChange,
scope: this
}
},
layout: {
type: 'hbox',
align: 'center'
},
items: [
{
xtype: 'button',
iconCls:'info',
title:'info',
iconMask:true,
ui:'plain',
},{
xtype: 'spacer'
},/*{
xtype: 'selectfield',
name: 'search',
prependText: 'Search:',
options: [
{text: 'Location', value: 'location'},
{text: 'Theme', value: 'theme'},
]
},*/{
xtype: 'searchfield',
name: 'q',
placeholder: 'Search',
value: 'Destination or ID',
listeners : {
change: this.onFieldChange,
keyup: function(field, e) {
var key = e.browserEvent.keyCode;
// blur field when user presses enter/search which will trigger a change if necessary.
if (key === 13) {
field.blur();
}
},
scope : this
}
},{
xtype: 'selectfield',
name : 'sort_by',
prependText: 'sort_by:',
ui:'button',
cls:'sortbox',
options: [
{text: 'Sort By', value: ''},
{text: 'Newest', value: 'modified'},
{text: 'Sleeps', value: 'sleep_max'},
{text: 'Sleeps Desc', value: 'sleep_max DESC'},
{text: 'Bedrooms', value: 'bedroom'},
{text: 'Bedrooms Desc', value: 'bedroom DESC'},
// {text: 'Rates', value: 'rates'},
]
},{
xtype: 'button',
text: 'Filters',
handler: showForm
}
]
});
kiva.views.LoanFilter.superclass.initComponent.apply(this, arguments);
//for filters form
var formBase = {
scroll: 'vertical',
//url :
standardSubmit : true,
items: [{
xtype: 'fieldset',
title: 'Filters',
instructions: 'Please enter the information above.',
defaults: {
//required: true,
labelAlign: 'left',
labelWidth: '30%'
},
items: [
{
xtype: 'spinnerfield',
name : 'sleep_max',
label: 'Sleeps',
minValue: 0,
maxValue:10
},{
xtype: 'spinnerfield',
name : 'bedroom',
label: 'Bedrooms',
minValue: 0,
maxValue:10
},{
xtype: 'spinnerfield',
name : 'rates',
label: 'Rates',
minValue: 50,
maxValue:5000,
incrementValue: 100,
cycle: false
},/*{
xtype: 'datepickerfield',
name : 'checkIn',
label: 'Check In',
destroyPickerOnHide: true,
},{
xtype: 'datepickerfield',
name : 'checkOut',
label: 'Check Out',
destroyPickerOnHide: true,
},*/{
xtype: 'selectfield',
name : 'themes',
label: 'Themes',
options: [
{text: 'Themes', value: ''},
{text: 'Skiing', value: 'skiing'},
{text: 'Golf', value: 'golf'},
{text: 'Beaches', value: 'beaches'},
{text: 'Adventure', value: 'adventure'},
{text: 'Family', value: 'family'},
{text: 'Fishing', value: 'fishing'},
{text: 'Boating', value: 'boating'},
{text: 'Historic', value: 'historic'},
{text: 'Biking', value: 'biking'},
]
},/*{
xtype: 'hiddenfield',
name : 'secret',
value: 'false'
},*/]
}],
listeners : {
submit : function(form, result){
console.log('success', Ext.toArray(arguments));
console.log(form);
console.log(result);
form.hide();
// Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
form.hide();
// Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Cancel',
handler: function() {
form.hide();
}
},
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Apply',
ui: 'confirm',
handler: function() {
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});
}
}
]
}
]
};
if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: false,
hideOnMaskTap: false,
height: 300,
width: 420,
});
}
},
/**
* This is called whenever any of the fields in the form are changed. It simply collects all of the
* values of the fields and fires the custom 'filter' event.
*/
onFieldChange : function(comp, value) {
//console.log(comp); console.log(value);
this.fireEvent('filter', this.getValues(), this);
}
});
Ext.reg('loanFilter', kiva.views.LoanFilter);
Its not clear what do you mean under "filters doesn't work".
Form with filter is not showing, then probably you need to set floating: true for the form as it is a panel and need to be floated if you want to show popup. http://docs.sencha.com/touch/1-1/#!/api/Ext.lib.Component-cfg-floating
Your form is not a part of LoanFilter form (why it is a form?), so method onFieldChange will not be triggered while you changing fields inside form. You need to move event listener to formBase
var formBase = {
defaults: {
listeners: {
change: this.onFieldChange,
scope: this
}
},
...
i am working with grid to tree drag n drop. i am able to add new node to root of tree by dragging it from grid but i dont know how to add child to node i hovered on? I spent 2 days on dis but no luck.below is my code :
Ext.define('Overdrive.view.ui.MyViewport', {
extend: 'Ext.container.Viewport',
initComponent: function () {
var me = this;
me.items = [{
xtype: 'panel',
height: 600,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'PARENT',
items: [{
xtype: 'treepanel',
border: '',
id: 'treepanel',
collapseDirection: 'left',
collapsible: true,
title: 'Items',
titleCollapse: true,
store: 'Test',
flex: 1,
viewConfig: {
listeners: {
render: function (tree) {
var dropTarget = new Ext.dd.DropTarget(tree.el, {
ddGroup: 'gridtotree',
copy: false,
notifyDrop: function (dragSource, event, data) {
var idFrom = data.records[0].data.name;
var node = Ext.getCmp('treepanel').getRootNode(); //working
node.appendChild({
'text': idFrom,
'children': []
});
}
});
}
}
}
}, {
xtype: 'panel',
height: 596,
flex: 3,
items: [{
xtype: 'panel',
height: 285,
layout: {
type: 'anchor'
}
}, {
xtype: 'gridpanel',
id: 'itemtypegrid',
title: 'Item Type',
store: 'GridTest',
enableDragDrop: true,
ddText: 'Shift Row',
columns: [{
xtype: 'gridcolumn',
width: 100,
dataIndex: 'name',
text: 'Name'
}],
viewConfig: {
plugins: [
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup: 'gridtotree',
enableDrop: true
})]
}
}]
}]
}];
me.callParent(arguments);
}
To catch the tree-node you can add this handler to Tree.Panel -> ViewConfig -> listeners:
itemmouseenter: function (view, model, htmlItem, index, e)
{
console.log(model);
},
You can save this value and use in another handler - notifyDrop