PDA

View Full Version : [FIXED-39][3.0rc2] TwinTriggerField, ComboBox with CycleButton on toolbar



caoko
1 Jul 2009, 5:52 AM
windows vista, IE8 (quirks and strict)

code:



Ext.onReady(function(){
var viewPort = new Ext.Viewport({
layout: 'border',
items: [new Ext.grid.GridPanel({
height: 400,
region: 'south',
tbar: new Ext.Toolbar({
items: [new Ext.form.TwinTriggerField(), '-', new Ext.form.ComboBox(), new Ext.form.TextField(),
new Ext.CycleButton({
showText: true,
prependText: 'View as ',
items: [{
text: 'text only',
iconCls: 'view-text',
checked: true
}, {
text: 'HTML',
iconCls: 'view-html'
}],
changeHandler: function(btn, item) {
Ext.Msg.alert('Change View', item.text);
}})
]
}),
store: new Ext.data.SimpleStore({
fields: ['Name'],
data: [['One'], ['Two'], ['Three']]
}),
columns: [{
header: 'Name',
width: 120,
dataIndex: 'Name'
}]
}),{
bodyStyle: 'padding:10px;',
region: 'center',
xtype: 'form',
items: [
new Ext.form.TwinTriggerField(),
new Ext.form.ComboBox()
]
}]
});
});

evant
1 Jul 2009, 6:04 AM
In the SVN version it looks ok in strict mode, but there are a couple of things out of place in quirks. Thanks for the report.

evant
1 Jul 2009, 6:12 AM
Fixed in SVN.

caoko
1 Jul 2009, 5:39 PM
fixed this by extjs 3.0 rc3.

but, try use only Ext.form.TwinTriggerField, Ext.form.ComboBox on toolbar without menu button like Ext.CycleButton.

mjlecomte
1 Jul 2009, 6:13 PM
Could you be very specific please? Post a new screenshot for what you see in RC3. Specify what browser mode and document mode.

I see a vertical position problem, but only if I use IE8 browser mode with IE7 Standards Mode. I don't know that such a scenario represents a realistic use case.

caoko
1 Jul 2009, 6:56 PM
code:


<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

var case1 = new Ext.grid.GridPanel({
title: 'case1',
tbar: [new Ext.form.TwinTriggerField(), '-', new Ext.form.ComboBox()],
store: new Ext.data.SimpleStore({
fields: ['Name'],
data: [ ['One'], ['Two'], ['Three'] ]
}),
columns: [ { header: 'Name', width: 120, dataIndex: 'Name' } ],
flex: 1
});

var case2 = new Ext.grid.GridPanel({
title: 'case2',
tbar: [new Ext.form.TwinTriggerField(), '-', new Ext.form.ComboBox(),
new Ext.CycleButton({
showText: true,
prependText: 'CycleButton ',
items: [{
text:'Text1',
checked:true
},{
text:'Text2'
}]
})
],
store: new Ext.data.SimpleStore({
fields: ['Name'],
data: [ ['One'], ['Two'], ['Three'] ]
}),
columns: [ { header: 'Name', width: 120, dataIndex: 'Name' } ],
flex: 1
});

var viewPort = new Ext.Viewport({
layout: { type:'vbox', align:'stretch' },
items: [case1, case2]
})
viewPort.doLayout();
});
</script>
</head>
<body>
</body>
</html>

--> not use doctype and not use meta tag
(ex: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> )

ie8 developer tool --> browser mode:IE8 , document mode: quirks

extjs 3.0 rc3

ie6 fine.
ie7 fine.
ie8 case1 ?

mjlecomte
1 Jul 2009, 7:18 PM
Confirmed (as of RC3). Changing status of thread to OPEN.

jayrobinson
22 Feb 2010, 6:06 PM
Use the following code for test page (using a HTML 4.01 Strict Doctype):



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="ext-3.1+/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.1+/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1+/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

var case1 = new Ext.grid.GridPanel({
title: 'case1',
tbar: [new Ext.form.TwinTriggerField(), '-', new Ext.form.ComboBox()],
store: new Ext.data.SimpleStore({
fields: ['Name'],
data: [ ['One'], ['Two'], ['Three'] ]
}),
columns: [ { header: 'Name', width: 120, dataIndex: 'Name' } ],
flex: 1
});

var case2 = new Ext.grid.GridPanel({
title: 'case2',
tbar: [new Ext.form.TwinTriggerField(), '-', new Ext.form.ComboBox(),
new Ext.CycleButton({
showText: true,
prependText: 'CycleButton ',
items: [{
text:'Text1',
checked:true
},{
text:'Text2'
}]
})
],
store: new Ext.data.SimpleStore({
fields: ['Name'],
data: [ ['One'], ['Two'], ['Three'] ]
}),
columns: [ { header: 'Name', width: 120, dataIndex: 'Name' } ],
flex: 1
});

var viewPort = new Ext.Viewport({
layout: { type:'vbox', align:'stretch' },
items: [case1, case2]
})
viewPort.doLayout();
});
</script>
</head>
<body>
</body>
</html>


Added the declaration "right:0" for the x-form-trigger for IE8 in Strict mode. Other than that, I did not see issues with IE6, IE7 and IE8 (Strict). Screenshots below.

Committed to 3.1.x and 3.2.x.