你好,欢迎来到电脑编程技巧与维护杂志社! 杂志社简介广告服务读者反馈编程社区  
合订本订阅
 
 
您的位置:技术专栏 / Web开发
Javascript 之 Ext.grid.ColumnModel 综合运用,加按钮,单选框
 

先来张图片,做出来的样子如下:

 

源码

[javascript] 
function appgroup_message_list(mainpanel){ 
 
    var checkbox = new Ext.grid.CheckboxSelectionModel();//单选框 
    var cm = new Ext.grid.ColumnModel([ 
        checkbox, 
        {header: _("Name"), width: 80, sortable: true, dataIndex: 'appgroup'}, 
        {header: _("Description"), width: 80, sortable: true, dataIndex: 'description'}, 
        {header: _("Status"), width: 80, sortable: true, dataIndex: 'status'}, 
        {header:_("Manage"),dataIndex:"manage_button",width:80,renderer: function(){return " <button type='button' onclick=''>Manage</button>"}},//这里用的是renderer,放入了一个button 
        {header:_("Delete"),dataIndex:"delete_button",width:80,renderer: function(){return " <button type='button' onclick=''>Delete</button>"}}, 
    ]); 
     
    var app_group_store = new Ext.data.JsonStore({//发url请求去后台得到列表数据 
        url: '/apply/get_application_group_list', 
        root: 'rows', 
        fields: ['appgroup'], 
        successProperty:'success', 
        listeners:{ 
            loadexception:function(obj,opts,res,e){ 
                var store_response=Ext.util.JSON.decode(res.responseText); 
                Ext.MessageBox.alert(_("Error"),store_response.msg); 
            } 
        } 
    }); 
    app_group_store.load(); 
    var grid = new Ext.grid.GridPanel({ 
        cm:cm, 
        selModel:checkbox, 
        store: app_group_store, 
        stripeRows: true, 
        frame:false, 
        autoExpandColumn:1, 
        autoHeight:true, 
        autoExpandMax:300, 
        autoExpandMin:150, 
        maxHeight:100, 
        enableHdMenu:true 
    }); 
    grid.addListener('cellclick',cellclick); //添加触发的函数    
    function cellclick(grid, rowIndex, columnIndex, e) {    
        var record = grid.getStore().getAt(rowIndex);//这里得到的是一个对象,即你点击的某一行的一整行数据 
        //alert(record.data.appgroup);//取出其中元素appgroup的值 
        var fieldName = grid.getColumnModel().getDataIndex(columnIndex);   
        if (fieldName == 'manage_button'){//通过加判断条件限制当点击某个列表内容的时候触发,不然只要你点列表的随便一个地方就触发了。 
            //show_user_manager(record);         
        } 
        else if (fieldName == 'delete_button'){ 
            delete_app_group(record.data.appgroup,mainpanel); 
             
        } 
    }  
    return grid; 

  推荐精品文章

·2024年12月目录 
·2024年11月目录 
·2024年10月目录 
·2024年9月目录 
·2024年8月目录 
·2024年7月目录 
·2024年6月目录 
·2024年5月目录 
·2024年4月目录 
·2024年3月目录 
·2024年2月目录 
·2024年1月目录
·2023年12月目录
·2023年11月目录

  联系方式
TEL:010-82561037
Fax: 010-82561614
QQ: 100164630
Mail:gaojian@comprg.com.cn

  友情链接
 
Copyright 2001-2010, www.comprg.com.cn, All Rights Reserved
京ICP备14022230号-1,电话/传真:010-82561037 82561614 ,Mail:gaojian@comprg.com.cn
地址:北京市海淀区远大路20号宝蓝大厦E座704,邮编:100089