Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: [CLOSED] Benefits of using stores over manuall fill in code behind

  1. #1
    Premium Member
    Join Date
    Aug 2013
    Location
    Israel
    Posts
    96

    [CLOSED] Benefits of using stores over manuall fill in code behind

    Saying I have selectbox used frequently with a different data and I don't want to copy-paste over pages the same code, so I made a user control which contains panel, SelectBox definition and store definition (the code is not mine, I want to make the server control inherited from Ext.net.SelectBox in the future)

    Code:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RefLbx.ascx.cs" Inherits="RdC.Front.UserControls.Shared.RefLbx" %>
    
    <ext:FormPanel runat="server" ID="lbxRefFormPanel" Cls="lbxRefFormPanel" Border="false">
    	<Items>
    		<ext:SelectBox AutoDataBind="false" ID="lbxRef" Cls="lbxRef" runat="server"
    			ValueField="Id" DisplayField="Libelle" Width="300" ListWidth="300">
    			<Store>
    				<ext:Store runat="server" ID="storeRef">
    					<Reader>
    						<ext:JsonReader>
    							<Fields>
    								<ext:RecordField Name="Id" />
    								<ext:RecordField Name="Libelle" />
    							</Fields>
    						</ext:JsonReader>
    					</Reader>
    				</ext:Store>
    			</Store>
    		</ext:SelectBox>
    	</Items>
    </ext:FormPanel>
    and in the code behind it's just a proxy functions for binding the datasource etc
    Code:
    public Object DataSource { set { this.storeRef.DataSource = value; } }
    ....
            public override void DataBind()
            {
                this.storeRef.DataBind();
            }
    in external code I will set the control.DataSource to needed List<> and will call control.DataBind()
    i.e I use such a control to create select box with the list of countries.

    The generated javascript is very simple:
    Code:
    this.BodyContent_MainContent_MonProfil_MaSociete_PaysLbxRef_storeRef=new Ext.ux.data.PagingStore({proxyId:"BodyContent_MainContent_MonProfil_MaSociete_PaysLbxRef_storeRef",autoLoad:true,reader:new Ext.data.JsonReader({fields:[{name:"Id"},{name:"Libelle"}]}),directEventConfig:{viewStateMode:"enabled"},proxy:new Ext.data.PagingMemoryProxy([{"Id":1,"Libelle":"Afghanistan"},{"Id":2,"Libelle":"AfriqueduSud"},{"Id":3,"Libelle":"Albanie"},{"Id":4,"Libelle":"Algérie"},
    ...
    {id:"BodyContent_MainContent_MonProfil_MaSociete_PaysLbxRef_lbxRef",xtype:"selectbox",cls:"lbxRef",fieldLabel:"Pays",width:100,indicatorIconCls:"icon-bulletred",indicatorTip:"Ce champ est obligatoire.",remoteValidationOptions:{viewStateMode:"enabled"},allowBlank:false,emptyText:"Sélectionnez",displayField:"Libelle",hiddenName:"BodyContent_MainContent_MonProfil_MaSociete_PaysLbxRef_lbxRef_Value",listWidth:100,triggerAction:"all",valueField:"Id",store:BodyContent_MainContent_MonProfil_MaSociete_PaysLbxRef_storeRef,
    I thought - why not just fill the SelectBox with data in the codebehind?
    So I did the following:
    Code:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RefLbx.ascx.cs" Inherits="RdC.Front.UserControls.Shared.RefLbx" %>
    
    <ext:FormPanel runat="server" ID="lbxRefFormPanel" Cls="lbxRefFormPanel" Border="false">
    	<Items>
    		<ext:SelectBox AutoDataBind="false" ID="lbxRef" Cls="lbxRef" runat="server"
    			 Width="300" ListWidth="300">
    		</ext:SelectBox>
    	</Items>
    </ext:FormPanel>
    and the codebehind:
    Code:
    public Object DataSource { get; set; }
    ...
    public override void DataBind()
            {
    			if (DataSource != null)
    			{
    				Type l_sourceType = DataSource.GetType();
    				if (l_sourceType.IsGenericType && l_sourceType.GetGenericTypeDefinition() == typeof(List<>))
    				{
    					IList l_list = DataSource as IList;
    					if (l_list != null)
    					{
    						foreach (object l_object in l_list)
    						{
    							Type l_type = l_object.GetType();
    							PropertyInfo l_idProp = l_type.GetProperty("Id");
    							PropertyInfo l_labelleProp = l_type.GetProperty("Libelle");
    							object l_idValue = l_idProp.GetValue(l_object, null);
    							object l_labelleValue = l_labelleProp.GetValue(l_object, null);
    
    							Ext.Net.ListItem l_lbx = new Ext.Net.ListItem();
    							l_lbx.Value = l_idValue.ToString();
    							l_lbx.Text = l_labelleValue.ToString();
    
    							this.lbxRef.Items.Add(l_lbx);
    						}
    					}
    				}
    			}
    
            }
    the generated javascript code is even simplier than in previous example:
    Code:
    {id:"BodyContent_MainContent_MonProfil_MaSociete_PaysLbxRef_lbxRef",xtype:"selectbox",cls:"lbxRef",fieldLabel:"Pays",width:100,indicatorIconCls:"icon-bulletred",indicatorTip:"Ce champ est obligatoire.",remoteValidationOptions:{viewStateMode:"enabled"},allowBlank:false,emptyText:"Sélectionnez",displayField:"text",hiddenName:"BodyContent_MainContent_MonProfil_MaSociete_PaysLbxRef_lbxRef_Value",listWidth:100,mode:"local",queryDelay:10,triggerAction:"all",valueField:"value",store:new Ext.data.SimpleStore({fields:["text","value"],data :[["Afghanistan","1"],["AfriqueduSud","2"],["Albanie","3"],["Algérie","4"],["Allemagne","5"],["Andorre","6"],["Angola","7"],["Antigua-et-Barbuda","8"],["Arabiesaoudite","9"],["Argentine","10"],["Arménie","11"],["Australie","12"],["Autriche","13"],["Azerbaïdjan","14"],["Ba
    I understand that defining external store is great and flexible solution, but the question is - if it is a simple array of data, which implementation will be faster and which is a preferrable way? What are cons in the second solution?

    The data can be from different tables, but everytime it is a structure {id, label}, so the main question is - is there a way to define simpleStore without having to fill it manually in DataBind method?
    Last edited by Baidaly; Oct 29, 2013 at 10:43 PM. Reason: [CLOSED]

  2. #2
    Ext.NET - Support Team
    Join Date
    Mar 2011
    Location
    Toronto
    Posts
    2,490
    Hello!

    You can avoid binding data in the code-behind using HttpProxy like in this sample: http://examples1.ext.net/#/GridPanel...rting/Handler/

    You can add to the handler additional parameter to say from what table read the required data and return the data to the client. Also, I'd add some config option to your custom control that will say URL for the Store to avoid hard-coding.
    Daulet Urazalinov

  3. #3
    Premium Member
    Join Date
    Aug 2013
    Location
    Israel
    Posts
    96
    Hi

    Well, I want to do data binding in code behind because datasource is not just a select * from table and lists are in the cache anyway. Also I don't want to do a separate ajax call to the server just to load data which is not mutated over time (or very slowly) - it's good when reloading the grid or doing autocomplete but not in my case.
    In my case - it just a some persistent data and all I want to do is to define SimpleStore and data fields so I won't have to fill the SelectBox manually in code-behind (the routine uc.DataSource = list; uc.DataBind(); can be changed to just uc.LoadData(list) in such a case).

    Also it's interesting to me if SimpleStore is better than the reader/proxy stuff.

  4. #4
    Ext.NET - Support Team
    Join Date
    Mar 2011
    Location
    Toronto
    Posts
    2,490
    Quote Originally Posted by Hlodvig View Post
    I understand that defining external store is great and flexible solution, but the question is - if it is a simple array of data, which implementation will be faster and which is a preferrable way? What are cons in the second solution?

    The data can be from different tables, but everytime it is a structure {id, label}, so the main question is - is there a way to define simpleStore without having to fill it manually in DataBind method?
    Just to clarify, SimpleStore is a synonym (old name) of the ArrayStore: http://docs.sencha.com/extjs/3.4.0/#...ata.ArrayStore . ExtJS has many versions of basic Store and each of them work with some type of data. Therefore, as you use arrays as the source for your Stores, then yes ArrayStore is a preferable way to do it.

    I don't think that there is a better way to bind the data to your ArrayStore. However, you can try to set Data property directly

    Code:
    <CustomConfig>
        <ext:ConfigItem Name="data" Value="[['3m Co',71.72,0.02,0.03,'9/1 12:00am']]" Mode="Raw" />
    </CustomConfig>
    Also it's interesting to me if SimpleStore is better than the reader/proxy stuff.
    Can you clarify, what do you mean? ArrayStore has readers and proxies as well but they designed for arrays.
    Daulet Urazalinov

  5. #5
    Premium Member
    Join Date
    Aug 2013
    Location
    Israel
    Posts
    96
    Quote Originally Posted by Baidaly View Post
    Just to clarify, SimpleStore is a synonym (old name) of the ArrayStore: http://docs.sencha.com/extjs/3.4.0/#...ata.ArrayStore . ExtJS has many versions of basic Store and each of them work with some type of data. Therefore, as you use arrays as the source for your Stores, then yes ArrayStore is a preferable way to do it.

    I don't think that there is a better way to bind the data to your ArrayStore. However, you can try to set Data property directly

    Code:
    <CustomConfig>
        <ext:ConfigItem Name="data" Value="[['3m Co',71.72,0.02,0.03,'9/1 12:00am']]" Mode="Raw" />
    </CustomConfig>
    Well, I have List<T> of some objects, taken from database. I can convert it to the array, however, but I wanted to do binding the data without manual conversion - just define store, set it to some List<T>, define model, etc. Just want to push data directly into the ComboBox without having to iterate the list and add ListItem objects in the loop. It just that I don't like reflection, but it seems that Ext.net is doing the reflection internally anyway, no? However, the main goal is to minimise usage of javascript because it has very poor performance in the FF :-(

    Quote Originally Posted by Baidaly View Post
    Can you clarify, what do you mean? ArrayStore has readers and proxies as well but they designed for arrays.
    I mean that additional objects are created for simple persistent data. For what? I want to set just an array of data to the ComboBox in code-behind without additional javascript objects Ext.ux.data.PagingStore, Ext.data.JsonReader, Ext.data.PagingMemoryProxy... I don't think that such additional objects will improve performance which is poor in FF. Or do you mean that SimpleStore (ArrayStore) create all such objects internally?
    Last edited by Hlodvig; Oct 28, 2013 at 9:48 PM.

  6. #6
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    25,472
    There are several positions I would like to comment.

    1. Ext.ux.data.PagingStore/Ext.data.PagingMemoryProxy VS Ext.data.SimpleStore.

    • Yes, a PagingStore is used by default for <ext:Store>.
    • I don't think a PagingStore is required in your case, but I don't see a built-in possibility to switch an <ext:Store> to SimpleStore. A SimpleStore is only used with a SelectBox's Items. Maybe, you would like to subclass an <ext:Store> rendering a SimpleStore with that.
    • Yes, a SimpleStore is a bit more lightweight than a PagingStore. A SimpleStore doesn't use any kind of proxies. A PagingStore uses a PagingMemoryProxy and have some additional functionality which is not supposed to be used in your case. Generally speaking, you are good that you want to simplify the thing as much as possible. I always try to do the same Though, if you worry about the performance, I would say the difference between a SimpleStore and a PagingStore/PagingMemoryProxy is totally insignificant.
    • Any kind of Stores uses some Reader. A SimpleStore has a predefined ArrayReader. A common <ext:Store> has a Reader which is configured by a developer.
    • As a conclusion, I would say there is no difference in the performance while using a SelectBox's Items and a SelectBox's Store. So, I see the only reason to opt one or another - the convenience of using one or another on server side.


    2. Reflection.
    This question:
    it seems that Ext.net is doing the reflection internally anyway, no?
    Yes, reflection is used during data binding. Unfortunately, in some cases it is not possible to avoid it. Though, we also try to avoid reflection as much as possible due to its performance costs. Generally speaking, very similar to your "conversion to Items" is being done during Store.DataBind().

    3. FireFox performance.
    This statement:
    However, the main goal is to minimise usage of javascript because it has very poor performance in the FF
    That is an interesting statement. Do you mean that FireFox has a slow JavaScript engine? Yes, it is not the best. For example, it loses to Chrome. But beats IE.

    Could you, please, provide any more details regarding that?

    A quick summary.
    You are on the right way to simplify the things as much as possible, but, I am afraid, in this concrete case it won't give you any improvement in the performance. So, if you have any problems with the performance, it is 100% not because of the SimpleStore VS PagingStore issue.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  7. #7
    Premium Member
    Join Date
    Aug 2013
    Location
    Israel
    Posts
    96
    Thank you for your answer, it is very detailed and interesting.

    Quote Originally Posted by Daniil View Post
    There are several positions I would like to comment.

    1. Ext.ux.data.PagingStore/Ext.data.PagingMemoryProxy VS Ext.data.SimpleStore.

    • Yes, a PagingStore is used by default for <ext:Store>.
    • I don't think a PagingStore is required in your case, but I don't see a built-in possibility to switch an <ext:Store> to SimpleStore. A SimpleStore is only used with a SelectBox's Items. Maybe, you would like to subclass an <ext:Store> rendering a SimpleStore with that.
    • Yes, a SimpleStore is a bit more lightweight than a PagingStore. A SimpleStore doesn't use any kind of proxies. A PagingStore uses a PagingMemoryProxy and have some additional functionality which is not supposed to be used in your case. Generally speaking, you are good that you want to simplify the thing as much as possible. I always try to do the same Though, if you worry about the performance, I would say the difference between a SimpleStore and a PagingStore/PagingMemoryProxy is totally insignificant.
    • Any kind of Stores uses some Reader. A SimpleStore has a predefined ArrayReader. A common <ext:Store> has a Reader which is configured by a developer.
    • As a conclusion, I would say there is no difference in the performance while using a SelectBox's Items and a SelectBox's Store. So, I see the only reason to opt one or another - the convenience of using one or another on server side.
    It's good that there is no significant difference, but it's not very convenient to see some strange objects used for simple array of data. Anyway, I already plan to subclass SelectBox and since I'm migrating to 2.3 (at last it is released), I'll try new options with setting Data of Store property directly or something else.

    Quote Originally Posted by Daniil View Post
    2. Reflection.

    Yes, reflection is used during data binding. Unfortunately, in some cases it is not possible to avoid it. Though, we also try to avoid reflection as much as possible due to its performance costs. Generally speaking, very similar to your "conversion to Items" is being done during Store.DataBind().
    Well, I think that I can avoid it my overriden DataBind function.

    Quote Originally Posted by Daniil View Post
    3. FireFox performance.

    That is an interesting statement. Do you mean that FireFox has a slow JavaScript engine? Yes, it is not the best. For example, it loses to Chrome. But beats IE.

    Could you, please, provide any more details regarding that?
    Well, I don't remember in which version of FF it was started, but I remember that at some point of time js in FF had started to perform poorly...
    It is a long story. Anyway when I worked on some project 6 years ago in which I tested different js engines for the conformance to standard, I also tested their perfomance - and SpiderMonkey was good comparing to others (well JScript was better in some areas while SpiderMonkey was better in another).
    But now our complex application sometime hangs up badly in FF, but never in Chrome and IE - strange but fact. And I don't know why. The only thought is that it is because of complex javascript code generated, may be some functions are not optimized in FF.
    I read that ExtJs have bad perfomance in FF because of several reasons (and Firebug is definitely not the cause of it because our clients just don't have it installed). Anyway I don't have time to do profiling. Anyway I'll check it again after upgrading to v2.3. Also I already did some tweaks and the question SimpleStore vs PagingStore/PagingMemoryProxy arose during those tweaks - I just can't stop when I do optimization job :-)

    Quote Originally Posted by Daniil View Post
    A quick summary.
    You are on the right way to simplify the things as much as possible, but, I am afraid, in this concrete case it won't give you any improvement in the performance. So, if you have any problems with the performance, it is 100% not because of the SimpleStore VS PagingStore issue.
    Yes, just like I thought, but anyway I just can't stop :-) and if something can be made simplier - it should be :-)

    Anyway it would be good to have possibility to configure Store to be rendered as SimpleStore. May be it is possible in v2.3 - I'll check the possibility to set Store.Data property directly, but this thread can be closed - it was very informative.

  8. #8
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    25,472
    Quote Originally Posted by Hlodvig View Post
    Quote Originally Posted by Daniil View Post
    2. Reflection.

    Yes, reflection is used during data binding. Unfortunately, in some cases it is not possible to avoid it. Though, we also try to avoid reflection as much as possible due to its performance costs. Generally speaking, very similar to your "conversion to Items" is being done during Store.DataBind().
    Well, I think that I can avoid it my overriden DataBind function.
    Well, the simplest would be replacing
    Code:
    foreach (object l_object in l_list)
    with
    Code:
    foreach (SomeEntity l_object in l_list)
    and access the properties by:
    Code:
    l_object.PropName
    instead of reflection:)

    Another option is using generics.

    Quote Originally Posted by Hlodvig View Post
    Well, I don't remember in which version of FF it was started, but I remember that at some point of time js in FF had started to perform poorly...
    It is a long story. ... Anyway I'll check it again after upgrading to v2.3.
    An interesting fact about FireFox. Good to know, thanks. It is also interesting how v2.3 will behave with your application.

    Quote Originally Posted by Hlodvig View Post
    I just can't stop when I do optimization job :-)

    Yes, just like I thought, but anyway I just can't stop :-) and if something can be made simplier - it should be :-)
    Absolutely, I follow this policy as well:)

    Quote Originally Posted by Hlodvig View Post
    Anyway it would be good to have possibility to configure Store to be rendered as SimpleStore. May be it is possible in v2.3 - I'll check the possibility to set Store.Data property directly, but this thread can be closed - it was very informative.
    Yes, it is better in v2.x.

    The following example:

    Example
    Code:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.SelectBox1.GetStore();
                store.Data = new object[] 
                { 
                    new object[] { "1", "Item 1" },
                    new object[] { "2", "Item 2" },
                    new object[] { "3", "Item 3" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:SelectBox 
                ID="SelectBox1" 
                runat="server" 
                DisplayField="text" 
                ValueField="value">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="value" />
                                    <ext:ModelField Name="text" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Reader>
                            <ext:ArrayReader />
                        </Reader>
                    </ext:Store>
                </Store>
            </ext:SelectBox>
        </form>
    </body>
    </html>
    renders the following SelectBox:
    Code:
    Ext.create("Ext.ux.SelectBox", {
        id: "SelectBox1",
        renderTo: "App.SelectBox1_Container",
        valueField: "value",
        store: {
            model: Ext.define(Ext.id(), {
                extend: "Ext.data.Model",
                fields: [{
                    name: "value"
                }, {
                    name: "text"
                }]
            }),
            storeId: "ctl04",
            autoLoad: true,
            data: [
                ["1", "Item 1"],
                ["2", "Item 2"],
                ["3", "Item 3"]
            ],
            proxy: {
                type: 'memory',
                reader: {
                    type: "array"
                }
            }
        }
    });
    Though, I should note again that a Store's Data is serialized by Json.NET. I think it is done using reflection. If you like to avoid it, you could still prefer to put the data into Items without reflection.

    As for migrating to the v2.x.

    Are you going to support IE < 9 after migration?
    Last edited by Daniil; Oct 30, 2013 at 6:47 AM.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  9. #9
    Premium Member
    Join Date
    Aug 2013
    Location
    Israel
    Posts
    96
    Quote Originally Posted by Daniil View Post
    Well, the simplest would be replacing
    Code:
    foreach (object l_object in l_list)
    with
    Code:
    foreach (SomeEntity l_object in l_list)
    and access the properties by:
    Code:
    l_object.PropName
    instead of reflection:)

    Another option is using generics.
    Yeah. and since all data types have the same columns {id, label}, it will be simple

    Quote Originally Posted by Daniil View Post
    An interesting fact about FireFox. Good to know, thanks. It is also interesting how v2.3 will behave with your application.
    There are only two options which differs: javascript engines and renderer. So it could be ExtJS (which is developed by Sencha, not you) or browser fails to render complex layout. And I tend to think that it is a ExtJS.

    Quote Originally Posted by Daniil View Post
    The following example:

    {skipped}

    Though, I should note again that a Store's Data is serialized by Json.NET. I think it is done using reflection. If you like to avoid it, you could still prefer to put the data into Items without reflection.
    Well, since I want to implement my own server control which is inherited from the select box and everything will be done in code-behind - the simpliest solution will be filling items manually - I just don't need to define model in that case.
    But I'll think about it :-)

    Quote Originally Posted by Daniil View Post
    As for migrating to the v2.x.

    Are you going to support IE < 9 after migration?
    Who's using them nowadays? :-) Well, no.

  10. #10
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    25,472
    Quote Originally Posted by Hlodvig View Post
    There are only two options which differs: javascript engines and renderer. So it could be ExtJS (which is developed by Sencha, not you) or browser fails to render complex layout. And I tend to think that it is a ExtJS.
    Is it intuitive?:) If the same application works fine in IE and Chrome, I would not exclude FireFox from possible reasons... But, certainly, you know your "long story" better than I do:)

    Quote Originally Posted by Hlodvig View Post
    Who's using them nowadays? :-) Well, no.
    Well, it is used more than we all could imagine:)
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

Similar Threads

  1. Replies: 0
    Last Post: May 29, 2013, 7:12 AM
  2. Replies: 0
    Last Post: May 30, 2012, 8:44 PM
  3. Combobox with two stores
    By SMS in forum 1.x Help
    Replies: 3
    Last Post: Jul 12, 2011, 11:45 AM
  4. Ext.net.Debug + Stores
    By peter.campbell in forum 1.x Help
    Replies: 2
    Last Post: Mar 29, 2011, 10:54 AM
  5. Grid and Stores
    By walle in forum 1.x Help
    Replies: 4
    Last Post: Dec 01, 2010, 10:57 AM

Posting Permissions