I want to perform inline editing when I click on button then it activate textfield for title and numberfield for duration.How can it be achieve as I am new in Sencha.
{
xtype: 'list',
store: "Plays",
itemId:"playsList",
mode: 'MULTI',
loadingText: "Loading PlaysList...",
emptyText: '<div class="notes-list-empty-text">No PlayList found.</div>',
itemTpl: '<div class="list"><div class="list-item-title">{title}</div><div class="list-item-narrative">{duration}</div><div class="list-item-hide">{hidden}</div></div>',
grouped: true,
},
{
xtype: "button",
iconCls: "inlineedit",
iconMask: true,
itemId: "inlineediting"
},
So when I click on button it activate or have editing feature at list for title textfield and for duration numberfield.
My guess would be to do something like this :
Add a editing field to you model
fields: [
... // Other fields
{name:"editing", type:"boolean", defaultValue: false},
]
Use this kind of template
itemTpl: new Ext.XTemplate(
'<tpl if="editing == false">',
'<input type="text" name="title" value="{title}" disabled/>',
'<tpl else>',
'<input type="text" name="title" value="{title}"/>',
'</tpl>'
)
Then when you click on the button, you need to follow these steps :
Get your store
Loop through all the records of the store
For each records, set the editing value to true
Then the template will re-render and the inputs will be editable.
Of course you need to do work on the CSS to hide to the user that it's an input.
Finally, when the editing is done (I presume you will have some sort of 'Done' button), you need to go through all the items of your list and update the store with their new values.
I haven't tried it but I've done things similar in the past.
Hope this helps
Related
I need to add a little blip about an update to a form and I'm making it unnecessarily hard on myself. How do I add a text field that simply says Notice: XYZ underneath the Transfer date field? Is it a certain xtype I need to implement?
There are many possible way to add textfield/ displayfield in your form. Get hold of form and then add the textfield. Or simply add the textfield in form panel.
I created a fiddler for you in that I am adding next to 'Transfer Date' by this way.
{
xtype :'textfield',
name: 'last',
editable :false,
allowBlank: false,
fieldLabel: 'Notice',
value: 'xyz'
}
Since you asked for textfield so we can do like that and make editable :false, but the easier option is to achieve this is
{
xtype: 'displayfield',
fieldLabel: 'Notice',
value: 'xyz'
}
Both type of solution is available in fiddler. Have a look and choose as per your choice. Fiddle
Add in your form object
formPanel.add({
xtype: 'displayfield',
fieldLabel: 'Notice',
value: 'xyz'
})
try adding a new component of xtype: label to your form panel.
for example:
formPanel.add({
xtype: 'label',
text: 'Notice: XYZ'
});
I have my table where I can add new rows by simply clicking "Add" button (solution found on SO). What I want is detecting if new row added this way has any empty cells in order to disable "Save" button under the whole table so that user cannot save such changes to DB.
Any ideas?
Why not use the handy validation of AngularJS?
Define your cellTemplates like this:
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'name',
displayName: 'Name',
cellTemplate: '<div class="ngCellText"><input type="text" required ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\"></div>'
}, {
field: 'age',
displayName: 'Age',
cellTemplate: '<div class="ngCellText"><input type="text" required ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\"></div>'
}]
};
Note the required attribute in the inputs.
Then put the whole grid in a form and give the SAVE button a ng-disabled directive.
<button ng-disabled="signup_form.$invalid" ng-click="save()">Save</button>
Here is a minimalistic Plunker
In EXTJS, is there anyway we can add a fieldLabel inside a field? Something like an emptyText but should not disappear on editing the field.
As for as i understand you want to display some content inside field that can not be editable.
What you can do is display content just besides the text field
{
xtype: 'textfield',
fieldLabel:'<span>Scale <span class="help_text">your static content goes here</span></span>',
labelWidth: 170,
value: appName ,
name : "appName",
readOnly: true,
allowBlank: false
}
I need to implement validation messages that appear right next to invalid field. Any help would be appreciated.
msgTarget: 'side' will Add an error icon to the right of the field, displaying the message in a popup on hover only.
if you read the documentation carefully, one more option is there for msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget
[element id] Add the error message directly to the innerHTML of the specified element.
you have to add a "td" to the right side of the control dynamically with the id. then if you specify msgTarget: 'element id' it will work.
The msgTarget: 'elementId' can work, but it seem very limited, particularly when you want multiple instances of one reusable ExtJs component (and therefor multiple instances of the same msgTarget element). For example I have an MDI style editor where you can open multiple editors of one type in a tab interface. It also doesn't seem to work with itemId or recognize DOM/container hierarchy.
I therefor prefer to turn off the default handling if I don't want exactly one of the built in message display options by setting msgTarget: none and then performing my own message display by handling the fielderrorchange event which is designed for exactly this scenario. In this case I can now respect hierarchy of my forms even with multiple instances of the same editor form as I can select the error display element relative to the editor.
Here's how I do it:
{
xtype: 'fieldcontainer',
fieldLabel: 'My Field Label',
layout: 'hbox', // this will be container with 2 elements: the editor & the error
items: [{
xtype: 'numberfield',
itemId: 'myDataFieldName',
name: 'myDataFieldName',
width: 150,
msgTarget: 'none', // don't use the default built in error message display
validator: function (value) {
return 'This is my custom validation message. All real validation logic removed for example clarity.';
}
}, {
xtype: 'label',
itemId: 'errorBox', // This ID lets me find the display element relative to the editor above
cls: 'errorBox' // This class lets me customize the appearance of the error element in CSS
}],
listeners: {
'fielderrorchange': function (container, field, error, eOpts) {
var errUI = container.down('#errorBox');
if (error) {
// show error element, don't esape any HTML formatting provided
errUI.setText(error, false);
errUI.show();
} else {
// hide error element
errUI.hide();
}
}
}
}
See the msgTarget config of the control. msgTarget: 'side' would put the validation message to the right of the control.
Use msgTarget 'side' for validation in right side and msgTarget 'under' for bottom
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
allowBlank: false,
name: 'name',
msgTarget: 'side',
blankText: 'This should not be blank!'
}]
You can use 'msgTarget: [element id]'. You have to write html in order to use element id instead of itemId. The validation function adds a list element under an element that you set as 'msgTarget'.
In case you want to show elements that you want for the validation, you can pass html instead of just a text.
{
xtype: 'container',
items: [
{
xtype: 'textfield',
allowBlank: false,
msgTarget: 'hoge'
blankText: '<div style="color:red;">validation message</div>', // optional
},
{
xtype: 'box',
html: '<div id="hoge"></div>' // this id has to be same as msgTarget
}
]
}
To show the error message under/side the input text box, msgTarget property will work only in case of you are using the form layout.
To work around this in other than form layout we need to wrap the element in "x-form-field-wrap" class.
you can find more on thread :
https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem
I need to set up grid enline-editing combo box to show custom HTML. To be more concrete, please, look at this sample. Click any cell in Light column, open combobox. I want to place near every option ("Shade", "Mostly shady", ...) square box with unique color.
I was having the same problem. Finally found the answer when I was trying the solution above (which doesn't work either but is really close).
Turns out that the class for the list items is x-boundlist-item not x-combo-list-item.
If you mark your div with that class it will work. Extremely frustrating that this isn't outlined in the Sencha docs under the tpl config item for combo boxes, especially when all of the examples I can find just show a simple div for the items. I'm guessing it used to work by wrapping whatever was in the tpl config with the li and the class but it doesn't anymore. That said this is more versatile since you can make headers and lines that aren't selectable in your dropdowns by leaving off the class for those items.
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
Ext.application({
name: 'SRC',
launch: function() {
Ext.create('Ext.container.Viewport', {
xtype:{
type:'vbox',
align: 'center',
pack: 'center'
}, items:[
{xtype:'combobox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
tpl:'<tpl for="."><div class="x-boundlist-item">{name}</div></tpl>'
}
]})
}})
Thanks
For making it work globally (for all comboboxes), use the following override:
Ext.override(Ext.form.field.ComboBox, {
initComponent: function() {
// the code above remains same (you can copy it from ext-all-debug.js), add the following at the end of initComponent
me.tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-boundlist-item">',
'{' + me.displayField + ':htmlEncode}',
'</div>',
'</tpl>'
);
}
});
What you need to do is just modify the tpl config option of the ComboBox, and use your own custom config. You can then create a new ComboBox and use that as the editor for the column definition.
Here's a sample of a custom ComboBox template:
var resultTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-combo-list-item">',
'<span class="number">{#}</span>',
'<h3 class="{itemColor"}>',
'{itemName}',
'</h3>',
'</div>',
'</tpl>'
);
You can then use that XTemlate when you instantiate your editor;
var combo = {
xtype: 'combo',
tpl: resultTpl
....
}