Sep 12, 2017, 1:38 PM
[CLOSED] Create Dynamic Store in Javascript on Expand of ComboBox
Hi,
I have a page where it fill up with more than 5 combo boxes and each have its own master data,
Inorder to improve the performance of the page first time loading, would like to load the store dynamically on expand of the ComboBox in javascript by using its expand listenr, so we no need to create static store and bind to combobox.
here is my sample code that how to achive binding data dynamically to store on expand only.
User may not select all the control values and click on search.
I have a page where it fill up with more than 5 combo boxes and each have its own master data,
Inorder to improve the performance of the page first time loading, would like to load the store dynamically on expand of the ComboBox in javascript by using its expand listenr, so we no need to create static store and bind to combobox.
here is my sample code that how to achive binding data dynamically to store on expand only.
<form id="form1" runat="server">
<ext:ResourceManager ID="GeneralDashboardResourceManager" runat="server"></ext:ResourceManager>
<div>
<ext:Viewport runat="server" Margins="0 0 10 0">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Center" Pack="Center" />
</LayoutConfig>
<Items>
<ext:TabPanel
runat="server"
Width="400"
Height="295"
Margins="0 0 20 0" DeferredRender="false">
<Defaults>
<ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
<ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
</Defaults>
<Items>
<ext:Panel
runat="server"
Title="Active Tab"
AutoDataBind="true" Html="testing data for rendering controls">
<Items>
<ext:ComboBox
ID="SelectBox1"
runat="server"
EmptyText="Select a state...">
<Listeners>
<Expand Single="true" Handler="loadControl()"></Expand>
</Listeners>
</ext:ComboBox>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</div>
</form>
<script type="javascript">
function loadControl() {
// this might come from one of the Direct Method
var statesData= [
{ label: 'Great', value: 5 },
{ label: 'Above Average', value: 4 },
{ label: 'Average', value: 3 },
{ label: 'Below Average', value: 2 },
{ label: 'Poor', value: 1 },
];
var storeVal = Ext.create('Ext.data.Store', {
fields: [{ name: 'label' }, { name: 'value', type: 'int' }],
data: statesData
});
App.SelectBox1.store=storeVal ;
}
</script>
Please advise me How to get this scenario achived. this would be much helpfull in rendering Store time from Server to Client for the unnesecary stores on load,User may not select all the control values and click on search.
Last edited by fabricio.murta; Dec 01, 2017 at 5:57 PM.
Reason: no feedback from the user in 7+ days