PDA

View Full Version : highlight method does not work correctly on a TextField



karnak
20 Jun 2011, 5:58 AM
Greetings!

There seems to be an issue when calling the 'highlight' method for the inputEl of a textfield. If the textfield is valid, then only the portion of the text field which normally shows the "invalid red squiggly' at the botton of the textfield highlights. IF the textfield is already invalid, then "highlight" works as expected. I am including an example to reproduce this behavior.

Steps to Reproduce:
1. Run the example (the Customer Info tab should be selected)
2. Click on the "Highlight" form button in lower right corner of form on the Customer Info tab and notice that only the bottom portion of the "contactfirstname" textfield gets highlighted.
3. Now make the "contactfirstname" textfield invalid by clicking in it and tabbing out.
4. Click the "Highlight" button again and you will see that the entire inputEl portion highlights as expected.

Code:


Ext.BLANK_IMAGE_URL = '../images/s.gif';

Ext.onReady(function () {

Ext.define('MyTestWindow', {
extend: 'Ext.window.Window',

initComponent: function () {

Ext.define('quoteInfo', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'CreateDate', type: 'date' },
{ name: 'ContactName', type: 'string' },
{ name: 'CompanyName', type: 'string' },
{ name: 'City', type: 'string' },
{ name: 'Region', type: 'string' },
{ name: 'PostalCode', type: 'string' }
]
});

this.addEvents(
'additems'
);

Ext.apply(this, {
title: 'Test Window',
width: 546,
height: 381,
modal: true,
closeable: true,
closeAction: 'destroy',
layout: 'fit',
html: 'content goes here',
buttons: [
{
scope: this,
id: 'btnSave',
text: 'Save'
},
{
scope: this,
id: 'btnCancel',
text: 'Cancel'
}
]
});


this.callParent(arguments);

}

});



// Define the Order Model and it's associations
Ext.define('Order', {
extend: 'Ext.data.Model',
fields: [{
name: 'Id',
type: 'int'
}, {
name: 'Name',
type: 'string'
}, {
name: 'Description',
type: 'string'
}],
hasMany: [{
model: 'OrderItem',
name: 'orderitems'
}, {
model: 'OrderRecipient',
name: 'orderrecipients'
}]
});

// Define the Order Item Model
Ext.define('OrderItem', {
extend: 'Ext.data.Model',
fields: [{
name: 'Id',
type: 'int'
}, {
name: 'Name',
type: 'string'
}, {
name: 'Description',
type: 'string'
}],
belongsTo: 'Order'
});

// Define the Order Recipient Model
Ext.define('OrderRecipient', {
extend: 'Ext.data.Model',
fields: [{
name: 'Id',
type: 'int'
}, {
name: 'Name',
type: 'string'
}, {
name: 'Description',
type: 'string'
}],
belongsTo: 'Order'
});

var myData = {
orders: [
{
Id: 1,
Name: 'Order 1',
Description: 'Order 1 Desc',
orderrecipients:
[
{
Id: 1,
Name: 'Order 1 Recip 1',
Description: 'Order 1 Recip 1 Desc'
}
]
},
{
Id: 2,
Name: 'Order 2',
Description: 'Order 2 Desc',
orderitems:
[
{
Id: 1,
Name: 'Order 2 Item 1',
Description: 'Order 2 Item 1 Desc'
},
{
Id: 2,
Name: 'Order 2 Item 2',
Description: 'Order 2 Item 2 Desc'
},
{
Id: 3,
Name: 'Order 2 Item 3',
Description: 'Order 2 Item 3 Desc'
},
{
Id: 4,
Name: 'Order 2 Item 4',
Description: 'Order 2 Item 4 Desc'
},
{
Id: 5,
Name: 'Order 2 Item 5',
Description: 'Order 2 Item 5 Desc'
},
{
Id: 6,
Name: 'Order 2 Item 6',
Description: 'Order 2 Item 6 Desc'
},
{
Id: 7,
Name: 'Order 2 Item 7',
Description: 'Order 2 Item 7 Desc'
},
{
Id: 8,
Name: 'Order 2 Item 8',
Description: 'Order 2 Item 8 Desc'
},
{
Id: 9,
Name: 'Order 2 Item 9',
Description: 'Order 2 Item 9 Desc'
},
{
Id: 10,
Name: 'Order 2 Item 10',
Description: 'Order 2 Item 10 Desc'
},
{
Id: 11,
Name: 'Order 2 Item 11',
Description: 'Order 2 Item 11 Desc'
},
{
Id: 12,
Name: 'Order 2 Item 12',
Description: 'Order 2 Item 12 Desc'
},
{
Id: 13,
Name: 'Order 2 Item 13',
Description: 'Order 2 Item 13 Desc'
},
{
Id: 14,
Name: 'Order 2 Item 14',
Description: 'Order 2 Item 14 Desc'
},
{
Id: 15,
Name: 'Order 2 Item 15',
Description: 'Order 2 Item 15 Desc'
},
{
Id: 16,
Name: 'Order 2 Item 16',
Description: 'Order 2 Item 16 Desc'
},
{
Id: 17,
Name: 'Order 2 Item 17',
Description: 'Order 2 Item 17 Desc'
},
{
Id: 18,
Name: 'Order 2 Item 18',
Description: 'Order 2 Item 18 Desc'
},
{
Id: 19,
Name: 'Order 2 Item 19',
Description: 'Order 2 Item 19 Desc'
}


],
orderrecipients: [
{
Id: 1,
Name: 'Order 2 Recip 1',
Description: 'Order 2 Recip 1 Desc'
}
]
}
]
};


this.orderStore = Ext.create('Ext.data.Store', {
autoLoad: false,
model: 'Order',
data: myData,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'orders'
}
}
});

this.orderItemsStore = Ext.create('Ext.data.Store', {
model: 'OrderItem',
proxy: {
type: 'ajax',
url: 'getdata.aspx?operation=loadQuote',
reader: {
type: 'json',
root: 'orderitems'
}
},
autoLoad: false
});

this.orderRecipientsStore = Ext.create('Ext.data.Store', {
model: 'OrderRecipient',
proxy: {
type: 'ajax',
url: 'getdata.aspx?operation=loadQuote',
reader: {
type: 'json',
root: 'orderrecipients'
}
},
autoLoad: false
});

var vp = Ext.create('Ext.container.Viewport', {
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'center',
xtype: 'tabpanel',
plain: true,
activeTab: 0,
items: [{
layout: 'fit',
title: 'Q 1',
padding: '15 15 15 15',
items: [{
xtype: 'tabpanel',
tabBar: { border: false },
flex: 2,
border: false,
plain: true,
items: [{
xtype: 'form',
layout: 'fit',
title: 'Customer Info',
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'Name',
layout: 'hbox',
combineErrors: false,
defaultType: 'textfield',
defaults: {
hideLabel: 'false'
},
items: [
{
id: 'contactfirstname',
name: 'ContactFirstName',
maxLength: 100,
enforceMaxLength: true,
fieldLabel: 'First Name',
flex: 1,
emptyText: 'First',
allowBlank: false
},
{
name: 'ContactLastName',
maxLength: 100,
enforceMaxLength: true,
fieldLabel: 'Last Name',
flex: 2,
margins: '0 0 0 6',
emptyText: 'Last',
allowBlank: false,
blankText: 'required'
}
]
}
],
buttons: [
{
text: 'Highlight',
handler: function () {
Ext.getCmp('contactfirstname').inputEl.highlight();
}
}
]
}, {
title: 'Hardware',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
padding: '15 15 15 15',
id: 'ordersGrid',
title: 'Orders',
border: true,
flex: 2,
store: this.orderStore,
listeners: {

select: {
scope: this,
fn: function (selModel, rec, index) {


this.orderItemsStore.loadData(rec.orderitems().data.items, false);
this.orderRecipientsStore.loadData(rec.orderrecipients().data.items, false);

}
}

},
columns: [{
xtype: 'gridcolumn',
header: 'Id',
dataIndex: 'Id',
width: 100
}, {
xtype: 'gridcolumn',
header: 'Name',
dataIndex: 'Name',
width: 100
}, {
xtype: 'gridcolumn',
header: 'Description',
dataIndex: 'Description',
width: 100
}],
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Add',
handler: function () {
//var newWin = Ext.create('NRI.Estimate.addNewQuoteItemWindow', { quoteItemType: 1 });
var newWin = Ext.create('MyTestWindow', { quoteItemType: 1 });

newWin.show();
}


}, {

text: 'Remove'

}]
}]
}, {
xtype: 'tabpanel',
id: 'detailTabPanel',
border: true,
padding: '15 15 15 15',
plain: true,
flex: 1,
items: [{
title: 'Items',
xtype: 'panel',
border: false,
layout: 'fit',
items: [{
xtype: 'grid',
id: 'orderItemsGrid',
border: false,
store: this.orderItemsStore,
columns: [{
xtype: 'gridcolumn',
header: 'Id',
dataIndex: 'Id',
width: 100
}, {
xtype: 'gridcolumn',
header: 'Name',
dataIndex: 'Name',
width: 100
}, {
xtype: 'gridcolumn',
header: 'Description',
dataIndex: 'Description',
width: 100
}],
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{

text: 'Add'

}, {

text: 'Remove'

}]
}]
}]
}, {
title: 'Recips',
xtype: 'panel',
border: false,
layout: 'fit',
items: [{
xtype: 'grid',
id: 'orderRecipsGrid',
store: this.orderRecipientsStore,
border: false,
columns: [{
xtype: 'gridcolumn',
header: 'Id',
dataIndex: 'Id',
width: 100
}, {
xtype: 'gridcolumn',
header: 'Name',
dataIndex: 'Name',
width: 100
}, {
xtype: 'gridcolumn',
header: 'Description',
dataIndex: 'Description',
width: 100
}],
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{

text: 'Add'


}, {

text: 'Remove'

}]
}]
}]
}]
}]
}, {

xtype: 'panel',
layout: 'fit',
title: 'Estimate',
html: 'Estimate info goes here'
}]
}]
}]
}, {
region: 'west',
title: 'Nav Bar',
collapsible: false,
split: false,
width: 150
}]
});

});

karnak
12 Jul 2011, 9:08 AM
bump...

Has anyone from Sencha had time to take a look at this? It is still happening in 4.0.4. The frame() method works fine with the inputEl of the TextField, but not the highlight method...

Thanks!