ComboBox with SqlDataSource

[gargamel4670]

Hello all,

I am new to using Coolite, but am familiar with the Microsoft ASP & AJAX control implementations. I had a page completely working with ASP.Net controls but when I added the grid control from Coolite, the styles clashed horribly. Although this is an internal website, I still pride myself on fit and finish as well as performance. I have now decided to move over to the Coolite Toolkit for
everything, as I want to be able to get all of the controls styled
similarly.

I am having trouble getting a ComboBox to display the results from a SqlDataSource that is connected to an Oracle server. The datastore retrieves the data, but the rows are all empty.

Here's the relevent markup:

<ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
</ext:ScriptManager>

<asp:SqlDataSource id="MTSODataSource" SelectCommand="SELECT ident, label FROM west.ne_mtx ORDER BY label ASC" ConnectionString="<%$ ConnectionStrings:serenity %>" ProviderName="<%$ ConnectionStrings:serenity.ProviderName %>" Runat="server" />

<ext:Store ID="MTSOStore" DataSourceID="MTSODataSource" runat="server">
    <Reader>
        <ext:JsonReader ReaderID="ident">
            <Fields>
                <ext:RecordField Name="ident" Type="Int" />
                <ext:RecordField Name="label" Type="String" />
            </Fields>
        </ext:JsonReader>
    </Reader>
    <Listeners>
        <LoadException Handler="Ext.Msg.alert('MTSO list - Load failed', e.message || response.statusText);" />  
    </Listeners>    
</ext:Store>

<ext:ComboBox ID="MTSOList" CausesValidation="false" FieldLabel="MTSO:" Width="200" StoreID="MTSOStore" TriggerAction="All" Mode="Local" EmptyText="Select MTSO" DisplayField="label" ValueField="ident" ForceSelection="true" runat="server" Select&#111;nfocus="True">
</ext:ComboBox>

The SqlDatasource is connected to an Oracle database. The browser renders the control just fine, but the dropdown appears to have 15 short rows, only about 5 pixels high each. Using the DOM inspector in Firebug, I can see 15 results rows, each with ident and label = "" (See attached for the output from Firebug). On the <ext:RecordField> element, I have tried omitting the type as well as setting it to string, and float and int depending on the filed type in Oracle.

I searched through the forums, but there are very few comments about Oracle. Is this something specific to Oracle? Have I done something stupid in the code?

Thanks kindly for you help.

Gargamel

[Vladimir]

Hi,

Can you post Coolite init script block?
View source of page in browser and copy script block which started with*Ext.onReady

[gargamel4670]

Vladsch,

Here it is:

<script type="text/javascript">
//<![CDATA[
	Ext.onReady(function(){Ext.QuickTips.init();this.MTSOStore_Data=[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];this.MTSOStore=new Coolite.Ext.Store({id:"MTSOStore",ajaxEventConfig:{formProxyArg:"default"},reader:new Ext.data.JsonReader({id:"ident",fields:[{type:"int",name:"ident"},{type:"string",name:"label"}]}),autoLoad:true,listeners:{loadexception:{fn:function(store,options,response,e){Ext.Msg.alert('MTSO list - Load failed', e.message || response.statusText);}}}});MTSOStore.proxy=new Ext.data.PagingMemoryProxy(MTSOStore_Data, false);this.MTSOList=new Ext.form.ComboBox({id:"MTSOList",renderTo:"MTSOList_Container",width:200,fieldLabel:"MTSO:",emptyText:"Select MTSO",store:MTSOStore,valueField:"ident",triggerAction:"all",selectOnFocus:true,queryDelay:10,mode:"local",hiddenName:"MTSOList_Value",forceSelection:true,displayField:"label"});});Coolite.Ext.ScriptManagerUniqueID="ScriptManager1";Ext.BLANK_IMAGE_URL="/WebResource.axd?d=cOD15HTtJTThn79i7vRBJ4psFlvLE4xFloCKuRjRNotWfCA64N3aFn0wj2rYHT_wnV3s8z1YFBdgshj6g8Ex6rsnOolAj22EGoZru6MueeAgK7wb_vjCj58WgcaPRj-y0&amp;amp;t=633655206860000000";
//]]>
</script>

Just for the record I wrote this two ways, the second time as a web service and I could see the web service execute but still nothing.

Thanks!

[Vladimir]

Hi,

I see that Store can't find properties.


Can you try to things:
1. Try this SqlDataSource with standart ASP.NET GridView. Is it working?
2. Try to set for Store property IgnoreExtraFields="false" and post Coolite script block

[gargamel4670]

I added a DropDownList control:

<asp:DropDownList ID="mtso" runat="server" DataSourceID="MTSODataSource" DataTextField="label" DataValueField="ident" AppendDataBoundItems="true">
    <asp:ListItem value="-1" text="All"></asp:ListItem>
</asp:DropDownList>

This worked for the ASP control. I also added the IgnoreExtraFields="false" to the store.

<script type="text/javascript">
//<![CDATA[
	Ext.onReady(function(){Ext.QuickTips.init();this.MTSOStore_Data=[{"IDENT":31,"LABEL":"ATO2"},{"IDENT":32,"LABEL":"BEND"},{"IDENT":33,"LABEL":"COLU"},{"IDENT":34,"LABEL":"EURE"},{"IDENT":35,"LABEL":"JOPL"},{"IDENT":36,"LABEL":"LONG"},{"IDENT":37,"LABEL":"MANS"},{"IDENT":38,"LABEL":"MEDF"},{"IDENT":39,"LABEL":"OKLA"},{"IDENT":40,"LABEL":"OMAH"},{"IDENT":41,"LABEL":"OWAS"},{"IDENT":42,"LABEL":"SALI"},{"IDENT":43,"LABEL":"STLO"},{"IDENT":44,"LABEL":"TULS"},{"IDENT":45,"LABEL":"WIC2"},{"IDENT":46,"LABEL":"YAKI"}];this.MTSOStore=new Coolite.Ext.Store({id:"MTSOStore",ajaxEventConfig:{formProxyArg:"default"},reader:new Ext.data.JsonReader({fields:[{type:"int",name:"ident"},{type:"string",name:"label"}],id:"ident"}),autoLoad:true,listeners:{loadexception:{fn:function(store,options,response,e){Ext.Msg.alert('MTSO list - Load failed', e.message || response.statusText);}}}});MTSOStore.proxy=new Ext.data.PagingMemoryProxy(MTSOStore_Data, false);this.MTSOList=new Ext.form.ComboBox({id:"MTSOList",renderTo:"MTSOList_Container",width:200,fieldLabel:"MTSO:",emptyText:"Select MTSO",store:MTSOStore,valueField:"ident",triggerAction:"all",selectOnFocus:true,queryDelay:10,mode:"local",hiddenName:"MTSOList_Value",forceSelection:true,displayField:"label"});MTSOStore.load();});Coolite.Ext.ScriptManagerUniqueID="ScriptManager1";Ext.BLANK_IMAGE_URL="/WebResource.axd?d=cOD15HTtJTThn79i7vRBJ4psFlvLE4xFloCKuRjRNotWfCA64N3aFn0wj2rYHT_wnV3s8z1YFBdgshj6g8Ex6rsnOolAj22EGoZru6MueeAgK7wb_vjCj58WgcaPRj-y0&amp;amp;t=633655206860000000";
//]]>
</script>

I don't know where you are, but if you are in North America, do you ever sleep?

Thanks!

[Vladimir]

Hi,

As you can see the SqlDataSource return upper case properties (may be it is Oracle returns such names)


IDENT
LABEL*


The Store parser is case sensitive. So you need to set*


<ext:JsonReader ReaderID="IDENT">
*********** <Fields>
*************** <ext:RecordField Name="IDENT" Type="Int" />
*************** <ext:RecordField Name="LABEL" Type="String" />
*********** </Fields>
******* </ext:JsonReader>


Also you can return IgnoreExtraFields="true" (or remove it, true is default value)

[gargamel4670]

Vladsch,

Sill not getting anything in the ComboBox (see attached combobox.bmp).

Here is the latest code:

<ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
    <Listeners>
        <DocumentReady Handler="#{MTSOStore}.load();" />
    </Listeners> 
</ext:ScriptManager>

<asp:SqlDataSource id="MTSODataSource" SelectCommand="SELECT ident, label FROM west.ne_mtx ORDER BY label ASC" ConnectionString="<%$ ConnectionStrings:serenity %>" ProviderName="<%$ ConnectionStrings:serenity.ProviderName %>" Runat="server" />

<ext:Store ID="MTSOStore" DataSourceID="MTSODataSource" runat="server" IgnoreExtraFields="false">
    <Reader>
        <ext:JsonReader ReaderID="ident">
            <Fields>
                <ext:RecordField Name="IDENT" Type="Int" />
                <ext:RecordField Name="LABEL" Type="String" />
            </Fields>
        </ext:JsonReader>
    </Reader>
    <Listeners>
        <LoadException Handler="Ext.Msg.alert('MTSO list - Load failed', e.message || response.statusText);" />  
    </Listeners>    
</ext:Store>

<ext:ComboBox ID="MTSOList" CausesValidation="false" FieldLabel="MTSO:" Width="200" StoreID="MTSOStore" TriggerAction="All" Mode="Local" EmptyText="Select MTSO" DisplayField="label" ValueField="ident" ForceSelection="true" runat="server" Select&#111;nfocus="True">
</ext:ComboBox>

<asp:DropDownList ID="mtso" runat="server" DataSourceID="MTSODataSource" DataTextField="label" DataValueField="ident" AppendDataBoundItems="true">
    <asp:ListItem value="-1" text="All"></asp:ListItem>
</asp:DropDownList>

and here is the script:

<script type="text/javascript">
//<![CDATA[
	Ext.onReady(function(){Ext.QuickTips.init();this.MTSOStore_Data=[{"IDENT":31,"LABEL":"ATO2"},{"IDENT":32,"LABEL":"BEND"},{"IDENT":33,"LABEL":"COLU"},{"IDENT":34,"LABEL":"EURE"},{"IDENT":35,"LABEL":"JOPL"},{"IDENT":36,"LABEL":"LONG"},{"IDENT":37,"LABEL":"MANS"},{"IDENT":38,"LABEL":"MEDF"},{"IDENT":39,"LABEL":"OKLA"},{"IDENT":40,"LABEL":"OMAH"},{"IDENT":41,"LABEL":"OWAS"},{"IDENT":42,"LABEL":"SALI"},{"IDENT":43,"LABEL":"STLO"},{"IDENT":44,"LABEL":"TULS"},{"IDENT":45,"LABEL":"WIC2"},{"IDENT":46,"LABEL":"YAKI"}];this.MTSOStore=new Coolite.Ext.Store({id:"MTSOStore",ajaxEventConfig:{formProxyArg:"default"},reader:new Ext.data.JsonReader({fields:[{type:"int",name:"IDENT"},{type:"string",name:"LABEL"}],id:"ident"}),autoLoad:true,listeners:{loadexception:{fn:function(store,options,response,e){Ext.Msg.alert('MTSO list - Load failed', e.message || response.statusText);}}}});MTSOStore.proxy=new Ext.data.PagingMemoryProxy(MTSOStore_Data, false);this.MTSOList=new Ext.form.ComboBox({id:"MTSOList",renderTo:"MTSOList_Container",width:200,fieldLabel:"MTSO:",emptyText:"Select MTSO",store:MTSOStore,valueField:"ident",triggerAction:"all",selectOnFocus:true,queryDelay:10,mode:"local",hiddenName:"MTSOList_Value",forceSelection:true,displayField:"label"});MTSOStore.load();});Coolite.Ext.ScriptManagerUniqueID="ScriptManager1";Ext.BLANK_IMAGE_URL="/WebResource.axd?d=cOD15HTtJTThn79i7vRBJ4psFlvLE4xFloCKuRjRNotWfCA64N3aFn0wj2rYHT_wnV3s8z1YFBdgshj6g8Ex6rsnOolAj22EGoZru6MueeAgK7wb_vjCj58WgcaPRj-y0&amp;amp;t=633655206860000000";
//]]>
</script>

As you can see the ComboBox is still empty with each line having only about 5 pixels in height.

Thanks!

[Vladimir]

Hi,

Update with upper case name*
1. ReaderID property of Reader
2. DisplayField and ValueField of ComboBox
*

[gargamel4670]

Vladsch,

Thank you very much. So the Coolite/ExtJS controls are case sensitive. Good to know. Now for hopefully an easy question. Is there a way to get a value in the ComboBox that indicates no selection?

Here is how I did it with the APS.Net control:

<asp:DropDownList ID="mtso" runat="server" DataSourceID="MTSODataSource" DataTextField="label" DataValueField="ident" AppendDataBoundItems="true">
    <asp:ListItem value="-1" text="All"></asp:ListItem>
</asp:DropDownList>

Again, thanks for your help.

[geoffrey.mcgill]

Hi gargamel4670,

At the moment there is no way to add extra ListItems inline. This is a weakness of the ComboBox/Store and we're investigating a solution.

Currently, the extra items must be added to the Store, which is obviously problematic for some scenarios.


gargamel <-- :)