ExtJs2.0 Learning Series (6)--ext.formpanel of the third type (ComboBox article)

Preface: To Tell the truth, this ExtJS series of articles in the blog park in the heat is not high, may be to learn this thing is not many people, but I think there is such a series of articles for Chinese friends very helpful! Please support us!

ExtJs2.0 Learning Series (5)--ext.formpanel in the second, we discussed the fieldset and form validation, and today we go deep into the use of ComboBox components in the form elements. Will involve

To. NET simple server data interaction, but not in-depth discussion, later will be detailed analysis of server interaction related, but may have to wait a long time, hehe!

5. Server data as a ComboBox data source instance

First get the JSON data from the server:

//cs后台代码，简单起见，示例而已，要主要字符串格式(新手注意，下面的代码放在类里面，不是放在方法里)
public string ServerData="['湖北','江西','安徽']";

ASPX front desk JS Introduction code
Ext.onready (function () {
       var combo=new Ext.form.ComboBox ({
            store:<%=serverdata%>,//gets the string value of the Serverdata, not the "", otherwise it is not the object data, but the string, This is a very clever key point: The server's string into the JS object data, is not super convenient.
            Emptytext: ' Please select a province ... ',
            ApplyTo: ' Combo '
        });
    });

//aspx前台html代码
<input type="text" id="combo" size="20"/>

We get to the server's simplest attribute data by way of <%=ServerData%>. The problem is, JS and HTML How to call the C # backstage

Variables and methods? (The invocation of the variable is just described above)

6.js and HTML How to call the C # backend variables and methods

On this topic, I do not say much, on the internet a lot of explanations, here only a brief description

1.js invoke C # background variables, refer to above, note that if you want to get string type, in JS, use quotes var str= "<%=ServerData%>" (return "[' Hubei ', ' Jiangxi ', ' Anhui ']")

2.js calling the C # background method:

<!--backstage there is a way:
public string Serverdata ()
    {
        return "FDFDFDFDSF";
    }
Front Code:-->
<input id= "Text2" type= "text" value= "<%=serverdata ()%>"/>

3.js calling method with parameters in C # background

<!--public string Serverdata (String pram)
    {
        Return pram+ ", I am the parameter pass in";
    }
The main is to deal with the problem of JS quotation marks, more attempts will be correct-->
<script>alert (' <%=serverdata ("The Humble World")%> ');</script>

OK, now we have JS to obtain background data method means, not afraid, but this is only a small step.

7.ComboBox Data Source Store format detailed

In the previous example, we have been assigning a one-dimensional array to the ComboBox data source store, in fact the store supports multidimensional and Store.data.Store types.

Here are some examples of the data in code
1. One-dimensional array: ["Jiangxi", "Hubei"], values are assigned to ComboBox value and text
2. Two multidimensional array: [["One", "Bbar", "],[", "Two", "Tbar", "222"]], the first and second dimension are assigned to value and text, and the other dimensions are ignored
3.store type: Including Groupingstore, Jsonstore, Simplestore.
    Let's take three steps:
     First step: Provide data:
         var data=[[' Hubei ', ' Hubei '],[' Jiangxi ', ' Jiangxi '],[' Anhui ', ' Anhui '];
    Step two: Import into the store:
         var store = new Ext.data.SimpleStore ({
             Fields: [' Chinese ', ' 中文版 '],
             Data:data
        });
     Step three: Pay the store to ComboBox's Store
    var combo = new Ext.form.ComboBox ({
        Store:store,
        Displayfield: ' 中文版 ',//store fields you want to display fields, multiple field required parameters, default when mode is remote Displayfield for undefine, when the select list is Displayfield as " Text
        Mode: ' local ',///Because data has been fetched locally, ' locals ', default ' remote ', enum
        Emptytext: ' Please choose a province ... ',
        ApplyTo: ' Combo '
    });

Here we have introduced two new parameters Displayfield and mode, remember, no longer specifically described later.