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('<tpl for="."><div class="x-combo-list-item" ext:qtitle="标题" ext:qtip="{NewsTitle}">{NewsTitle}</div></tpl>');添加这句为提示
        var tpl = new Ext.XTemplate('<tpl for="."><div style=" padding:5px;" id="{NewsID}" class="x-combo-list-item">' +
                                    '<img src="/Content/NewsImages/nid_10_up_first20120328032821.jpg" width="30" style="float:left; margin-right:4px;" height="30"/>' +
                                    '<p>标题：{NewsTitle}</p><p>类型：{NewsType}</p></div></tpl>');
        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<OrderProjection> orders = new List<OrderProjection>()
            {
                 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);
        }