For usability reasons it is usually a good idea to add a delete button to each row of a data grid. If the user clicks on such a button, the whole row that contained the button will be deleted.
The following example shows what I mean:
The data grid of ExtJS does not contain such a feature by default, but it could be implemented by adding a special column to the column model. Using this extension, it could be easily done like this:
var itemDeleter = new Extensive.grid.ItemDeleter();
var grid = new Ext.grid.GridPanel({
store: people,
cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
header: 'First name',
width: 100,
dataIndex: 'firstName'
}, {
header: 'Last name',
width: 150,
dataIndex: 'lastName'
}, itemDeleter]),
selModel: itemDeleter,
autoHeight: true
});Note that the itemDeleter instance must be added to the ColumnModel and set as selModel to work properly.
Topics: · button, data grid, delete, ExtJS, row
If you’re interested in learning ExtJS and by accident know some German, I can recommend you read an article I wrote together with my colleague Stefan Botzenhart. The article is called ‘Kombiniert: Ruby on Rails und Ext JS‘ and is published in the famous German IT magazine iX in their actual special edition called Web on Rails.
In the article we explain the implementation of meinkabinett, a web application where people can vote celebrities for the European government. The implementation uses a rich front-end written in ExtJS and is driven by a Ruby on Rails back-end.
Topics: · european, ExtJS, german, government, learning, meinkabinett, Rails, vote
Now that with Ext Core a light-weight version (just 25kB) of ExtJS has been released, I thought it’s time to build a nice example with it.
The result is something very useful that you can see in actually a lot of web sites: Display a info text inside of a input text field if it is empty and does not have the focus.
Here’s how it looks like:
E-Mail:
To add this behaviour to a input field you just have to call this single line:
Extensive.behaviours.setInfoText(inputElement, 'Your email like max@mustermann.de');
As always you can find the code for this component in a library called ‘extensive‘. Feel free to support the project by participating.
Topics: · core, ext, ExtJS, field, focus, html, info, input, lost, text
I just had the requirement to mark required fields in a ExtJS form. I started with the code from Jason (Thanks!) and extended it a bit.
Now you may customize how the field marker would look like by assigning a CSS class to a requiredFieldCls property. I also added a descriptive tooltip for the marker – just take a look to the example below:
Here’s the code that produces the example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'under';
Extensive.components.RequiredFieldInfo.prototype.requiredFieldText = 'These are really important things';
var panel = new Ext.FormPanel({
frame: true,
labelWidth: 130,
width: 350,
items: [{
xtype: 'textfield',
fieldLabel: 'This you might tell me',
anchor: '100%'
}, {
xtype: 'textfield',
fieldLabel: 'This I have to know',
allowBlank: false,
anchor: '100%',
blankText: 'As said, I have to know this!'
}, {
xtype: 'reqFieldInfo'
}]
});
var element = Ext.query('script[src$=required-field.js]')[0];
var renderElement = element.parentNode;
panel.render(renderElement);
});Dont’ forget to also include these necessary modifications to Ext.layout.FormLayout:
Ext.ns('Extensive.components');
Ext.apply(Ext.layout.FormLayout.prototype, {
originalRenderItem: Ext.layout.FormLayout.prototype.renderItem,
renderItem: function(c, position, target){
if (c && !c.rendered && c.isFormField && c.fieldLabel && !c.allowBlank) {
c.fieldLabel = c.fieldLabel + " <span " +
((c.requiredFieldCls !== undefined) ? 'class="' + c.requiredFieldCls + '"' : 'style="color:red;"') +
" ext:qtip=\"" +
((c.blankText !== undefined) ? c.blankText : "This field is required") +
"\">*</span>";
}
this.originalRenderItem.apply(this, arguments);
}
});
Extensive.components.RequiredFieldInfo = Ext.extend(Ext.form.Label, {
constructor: function(config){
Extensive.components.RequiredFieldInfo.superclass.constructor.call(this, Ext.apply({
html: "<span " +
((this.requiredFieldCls !== undefined) ? 'class="' + this.requiredFieldCls + '"' : 'style="color:red;"') +
'>*</span> ' +
((this.requiredFieldText !== undefined) ? this.requiredFieldText : 'Required field')
}, config));
}
});
Ext.reg('reqFieldInfo', Extensive.components.RequiredFieldInfo);From know on you can find this code and all my other ExTJS components bundled in a library called ‘extensive’ – hosted at Google Code. Feel free to support the project by participating.
Topics: · ext, ExtJS, field, form, required
Wouldn’t it be nice to use a combo box of flag images to select the country code of phone numbers?
If you use a country selection component that’s quite easy. Just wrap it in a re-usable component together with a textfield for the local number and the result looks like this:
And here’s the example’s source:
Ext.onReady(function(){
var panel = new Ext.FormPanel({
style: 'padding: 10px;',
frame: true,
labelWidth: 50,
width: 400,
items: [{
fieldLabel: 'Mobile',
xtype: 'phonefield',
anchor: '100%',
emptyText: '(e.g.: 423-423-423)',
defaultCountryCode: '49',
maskRe: /[0-9 -]/
}]
});
var element = Ext.query('script[src$=phonefield.js]')[0];
var renderElement = element.parentNode;
panel.render(renderElement);
});Update: You can find this code and all my other ExtJS components bundled in a library called ‘extensive’. Enjoy the code and feel free to support the project by participating.
Topics: · code, country, ext, ExtJS, field, number, phone, selector
