Extjs 下拉ComboBox分页，图片，多行显示

清明放假，写了个ComboBox分页，图片，多行显示，等其它信息，用tpl实现，简单，方便以后自己查找

如图：

代码：

var PagingComboBox = Ext.extend(Ext.form.ComboBox, {
    triggerAction: 'all',
    typeAhead: true,
    minListWidth: 200,
    root:'root',
    editable: false,
    pageSize: 5,
    url: '',
    fields:[],
    initComponent: function () {
       // var tpl = new Ext.XTemplate('

{NewsTitle}

');添加这句为提示
        var tpl = new Ext.XTemplate('

' +
                                    '' +
                                    '

标题：{NewsTitle}

类型：{NewsType}

');
        this.addEvents('afterchange');
        this.store = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: this.url,
                method: 'GET'
            }),
            reader: new Ext.data.JsonReader({ root: this.root }, this.fields)
        });
        Ext.apply(this, {
            store: this.store,
            mode: 'remote',
            fieldLabel: '新闻信息',
            labelWidth: 100,
            tpl: tpl,
            onSelect: this.onSelectItem //当选择时获得数据
        });
        PagingComboBox.superclass.initComponent.call(this);
    },
    onSelectItem: function (text, value) {

      //text.data包含了： ['NewsID', 'NewsTitle', 'NewsType']对应的值
        this.setValue(text.data.NewsTitle, value);
    },
    setValue: function (text, value) {//选择后进行赋值
        this.lastSelectionText = text;
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = value;
    }
});

 

应用：

 Ext.onReady(function () {
    var fields = ['NewsID', 'NewsTitle', 'NewsType'];
    var news = new PagingComboBox({
        root: 'news',
        fields:fields,
        url: '/NewsManage/GetNewsList',
        renderTo: Ext.getBody()
    });
});

 

后台代码：

 public ActionResult GetNewsList()
        {
            int startIndex = Convert.ToInt32(Request["start"]);
            int pageSize = Convert.ToInt32(Request["limit"]);
            IList orders = new List()
            {
                 new OrderProjection(){ orderField = "NewsID", orderby = false}
            };
            var list = newsObject.GetList(orders, startIndex, pageSize);
            int count = newsObject.ModelCount();
            return Json(new { news = list, total = count }, JsonRequestBehavior.AllowGet);
        }