I want to create a text box for a single label in split manner using ExtJS. Actually my requirement is a label for a telephone number, which needs a text box splitted into 3 boxes separated by "-" (hyphen). It should be as follows.
Telephone Number: 770-268-3320
consider each bracket as a text box. Hope you understood what my requirement is... Thanks in advance
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
//title: 'Simple Form',
bodyPadding: 5,
width: 400,
// 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: 'PhoneNumber',
name: 'phoneNumber',
allowBlank: false
},{
fieldLabel: 'CustomerName',
name: 'custCLLI',
allowBlank: false
}],
// Reset and Submit buttons
renderTo: Ext.getBody()
});
});
Or you can check here: http://jsfiddle.net/jA8Qy/5/
See this.
Hope this addresses your requirement.
Related
I'm looking at an older project that is using ExtJS. Admittedly, I'm not too familiar with this framework so I learn as I go and as I am asked to fix things. My issue is that there is a grid and each column uses allowBlank: false. This causes a tooltip box to display with some info about what field(s) need to be populated. This all works great, but I am trying to change that text in that tooltip i.e. "Error", "Benefit Category Name: This field is required", and I can't seem to make this work. How can I target and change that text? I'll include a screenshot of the grid and tooptip that I am talking about for reference. I am also using ExtJS version 6.
Here is a sample of one of the grid columns:
columns: [
{
dataIndex: 'benefit_category_name',
text: 'Benefit Category Name',
flex: 1,
editor: {
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: [
'benefit_category_id',
'benefit_category_name',
],
data: [],
}),
queryMode: 'local',
valueField: 'benefit_category_name',
displayField: 'benefit_category_name',
emptyText: 'Select one',
listeners: {
select: 'handleComboChange',
},
itemId: 'benefit_category_id',
allowBlank: false,
listeners: {
renderer: function(value, metaData) {
metaData.tdAttr = Ext.String.format('data-qtip="{0}"', value);
return value;
}
}
}
},
{
...
}
]
I tried to use the metaData property I read about in some other posts, but I can't seem to change the tooptip text (Error, Benefit Category Name: This field is required).
Here is a screenshot of the tooltip mentioned. I know this is an older framework, but any tips I could get would be useful. Thanks for your time.
Thats a simple validation example with custom message.
Ext.create({
xtype: 'textfield',
allowBlank:false, // will show required message - remove key to display vtypeText only
validateBlank: true,
vtype: 'alpha', // check for available types or create / extend one
vtypeText: 'Please change to what you want ...',
renderTo: Ext.getBody()
})
Details:
https://docs.sencha.com/extjs/6.5.3/classic/Ext.form.field.VTypes.html
https://fiddle.sencha.com/fiddle/3770
I have a file select field component and a label that I want it to appear next to each other (label to the right). They are both populated inside a function. Is not the label of the field, just a text I want it to warn about file size on the upload field. This is the code:
this.fileUploadField = Ext.widget('filefield',
{
fieldLabel: 'Select a file:',
name:'file',
width: 200,
buttonText: 'Button' });
items.push(
this.fileUploadField,
{
xtype: 'label',
style: 'color:red',
text: 'I'm the label that wants to appear on the right of the file upload field',
name:'fileSizeLimit'
}
);
I would put them into some container and than set layout as hbox.
You can use for example
fieldcontainer
container
fieldset
You can use anything where you can set the layout. You can use the flex config to position your fields correctly.
So the code could look something like this:
xtype: 'fieldset',
title: 'My Fields',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'filefield',
flex: 3,
fieldLabel: 'Select file:'
}, {
xtype: 'label',
style: 'color:red',
flex: 2,
name: 'fileSizeLimit',
text: 'I\'m the label that wants to appear on the right of the file upload field'
}]
Check out this fiddle:
https://fiddle.sencha.com/#fiddle/1ju5
I have a tag field and I want my users to be able to add new values to it. I can achieve this by setting forceSelection: false. The user can type their new entry into the tag field. When they are done typing the current entry, they can press comma and it will be added.
The problem is that the comma key is not terribly intuitive and more importantly the user cannot add an entry that itself contains a comma. Is there anyway I can reassign this functionality to the enter key instead?
jsFiddle here: link
Just use createNewOnEnter:
Ext.create('Ext.container.Viewport', {
layout: 'fit',
padding: 100,
items: [{
items: [{
width: 400,
xtype: 'tagfield',
store: ['existing item', 'another existing item'],
queryMode: 'local',
forceSelection: false,
autocomplete: 'off',
createNewOnEnter: true
}]
}]
});
Using ExtJS 4.2.1 I'm trying to add a 'composite' control to my Form Panel that consists of a textfield and a button next to it (which will invoke a lookup dialog).
I've implemented this as follows:
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
defaults:{
anchor:'100%',
border: 0
},
items: [{
xtype: 'textfield',
fieldLabel: 'foo'
}, {
xtype: 'panel',
layout:'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'bar'
}, {
text: '...',
xtype: 'button'
}]
}]
});
});
The problem I have is in terms of Layout. I want the 'bar' textfield to shrink/grow to fill the available width of the form, but it's currently maxing out at a fixed width, even when the 'foo' textfield extends correctly across the width of the form
Please advise the correct layout settings?
jsFiddle
Just add flex:1 to your bar text box config. As its being managed by a hbox layout this is required to tell the item to fill up as much space (width) as possible
I want send a text field data to a servlet page. I dont know the process. I give the code for textbox and a button below.
Ext.onReady(function(){
var movie_form = new Ext.FormPanel({
renderTo: document.body,
frame: true,
title: 'Personal Information Form',
width: 250,
items: [{
xtype: 'textfield',
fieldLabel: 'Firstname',
name: 'firstname',
allowBlank: false
},{
xtype:'button',
text:'save'
}]
});
});
This is the code ofr a textbox and a button. when i click the button the data of the field will go to a servlet page. But I cant do that. Please any one help me. the name of the servlet page is url_servlet
in your service method (get or post )
you can get your data field values by the attribute "name".
String firstname = reg.getParameter("firstname");
For handling the data in the backend check #The Suresh Atta's answer.
I found some errata in your code:
1) Construct an Ext component with the Ext.create function.
2) Use Ext.getBody() to get the document body.
3) Put your fields in the items config and buttons in the buttons config (Not always the best practice).
Ext.create('Ext.form.Panel', {
frame: true,
title: 'Personal Information Form',
width: 250,
url: 'url_servlet',// The form will submit an AJAX request to this URL when submitted
items: [{
xtype: 'textfield',
fieldLabel: 'Firstname',
name: 'firstname',
allowBlank: false
}],
buttons: [{
text: 'Save',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Console.log('Success', action.result.msg);
},
failure: function(form, action) {
Console.log('Failed', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
I hope this helps you a bit ;)