The best version yet. Great!
Printable View
The best version yet. Great!
Pure ownage.
I am trying to use the SuperBoxSelect in a wizard using a card layout. Since going to 3.0rc2 (worked fine in rc1.1), whenever I click away from the box the contents clear. I put the box into various other test scenerios such as a toolbar and the same thing occurs. It seems fine in your example renderd to a div in the page. As one post suggested it may be that the code is using the private doForce() method which has been changed to beforeBlur() in rc2. Any chance you could check on this?
Beautiful work! Should really be on the ExtJs main site as an example. And should be part of the UX download package!
Do you have an example page that I could take a look at please? Someone else reported an issue with blur that I haven't been able to re-produce. I'd appreciate being able to debug the issue.
Thanks Animal, high praise indeed from you - I've always been impressed with your own work. There are still a few issues and there's some refactoring to do but I'd be happy for the code be used as a demo. I'll try to get a move on with the updates!
I've got another little component I'll release v. soon too!
I dropped this into a grid toolbar as one of my tests and it had the problem:
Then the grid into a layout and then viewportCode:{
xtype: 'superboxselect',
fieldLabel: 'Products',
width: 300,
hideOnSelect: false,
maxHeight: 200,
store: auxillaryListStore,
triggerAction: 'all',
valueField: 'AuxillaryId',
displayField: 'AuxillaryDescription',
hiddenName: 'AuxillaryId',
mode: 'local'
}
Code:var layout = new Ext.Panel({
title: 'Employee Salary by Month',
layout: 'border',
layoutConfig: {
columns: 1
},
width: 600,
height: 600,
items: [chart, grid]
});
new Ext.Viewport({
layout: 'fit',
items: [layout]
});
//layout.render(Ext.getBody());
You can use one of your own examples. I took from your example page and put a quick test page together. I appreciate you looking into this.
Code:<html>
<head><title>
Test Page
</title>
<link rel="stylesheet" type="text/css" href="ext-3.0-rc2/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0-rc2/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext-3.0-rc2/ext-all.js">
</script>
<link href="css/superboxselect.css" rel="stylesheet" type="text/css" />
<script src="jscripts/SuperBoxSelect.js" type="text/javascript">
</script>
<script type="text/javascript">
Ext.onReady(function() {
var countryData = [['AU', 'Australia', 'x-flag-au', 'font-style:italic'], ['AT', 'Austria', 'x-flag-at', ''], ['CA', 'Canada', 'x-flag-ca', ''], ['FR', 'France', 'x-flag-fr', ''], ['IT', 'Italy', 'x-flag-it', ''], ['JP', 'Japan', 'x-flag-jp', ''], ['NZ', 'New Zealand', 'x-flag-nz', ''], ['US', 'USA', 'x-flag-us', '']];
var countryStore = new Ext.data.SimpleStore({
fields: ['code', 'name', 'cls', 'style'],
data: countryData,
sortInfo: {
field: 'name',
direction: 'ASC'
}
});
new Ext.Viewport({
layout: 'border',
items: [
new Ext.TabPanel({
region: 'center',
id: 'MainTab',
activeTab: 0,
enableTabScroll: true,
animScroll: true,
layoutOnTabChange: true,
items: [
{
title: 'Home',
id: 'tab-home',
items: [{
allowBlank: false,
id: 'selector3',
xtype: 'superboxselect',
fieldLabel: 'Countries',
resizable: true,
name: 'countries',
store: countryStore,
mode: 'local',
displayField: 'name',
valueField: 'code',
stackItems: true
}]
}]
})
]
});
});
</script>
</head>
<body>
</body>
</html>
Bashev posted a workaround for a similar extenstion that solved the issue:
Code:Ext.override(Ext.ux.form.SuperBoxSelect, {
beforeBlur: Ext.emptyFn
})