`
weitd
  • 浏览: 144247 次
  • 性别: Icon_minigender_1
  • 来自: 新都
社区版块
存档分类
最新评论

Ext.grid.GridPanel小结

阅读更多
var grid = new Ext.grid.GridPanel({
    store   //数据源
    cm      //Ext.grid.columnModel
    columns //功能和Ext.grid.columnModel一样。与cm有一个就行
    autoWidth:true
    width
    title
    border:false
    columnLines: true,
    renderTo                //显示div标签的id
    animCollapse:false      //True 表示为面板闭合过程附有动画效果 (默认为true,在类 Ext.Fx 可用的情况下).
    collapsible: true,      //true 表示面板可以闭合
    columnLines:true,      //true 表示有格边框
    loadMask:true           //获取数据里时有等待界面
    stripeRows: true,       //双色表格
    plugins:true,
    bbar:new Ext.PagingToolbar({
        pageSize:10,
        store:store,        //数据源
        displayInfo:true,   //为true时下面的才显示
        displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条',
        emptyMsg:'没有记录'
    }),
    tbar:[{
        text:'查询',
        icon:'/trade/images/delete.gif',
        cls:'x-btn-text-icon',
        handler:function(){win.show();}
    }
})


//**********************************************
//PagingToolbar分页
//传到服务器数据 start开始查询位置, limit要查询多少条
//排序
//服务器 sort,dir
//**********************************************
var com = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {header: "客户ID", width: 50, sortable: true, dataIndex: 'memid'},
    {header: "客户姓名", width: 75, sortable: true, dataIndex: 'memName'},
    {header:'姓别', width:50, dataIndex:'sex', align:'center', sortable:true, renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}}
    {header: '跟踪号',width:150,dataIndex:'code'},
    {header: '日期', width:150, dataIndex: 'kd_time'}
]);

/***********************************************
grid tbar
样式
cls:'x-btn-text-icon'  添加
**************************************************/
EditorGridPanel
    chickToEdit:1       //点击次数
    ColumnModel 中要加editor editor:new Ext.form.TextField({
    })
//获取修改后的数据
var storeEdit = grid.getStore();            //
    var modified = storeEdit.modified.slice(0); //
    Ext.each(modified,function(m){
    alert(m.data.id);                           //数据就在m.data中 id 为字段名
})
////////////////////////////////////////////////////////////////////////////////////////
//获取grid数据
var selModel = grid.getSelectionModel();    获取选择模式
var record;
if(!selModel.hasSelection()){
    Ext.Msg.alert('警告','请选择要修改的行!');
    return;
}
selModel.getSelections().length;    //选择的行数

record = selModel.getSelected();    //获取选择行的数据
获取数据
单行
id = record.get('id');
或者
id = record.data.id;
多行
record[i].get('ddd')
删除数据
var obj = grid.getSelectionModel().getSelected();
store.remove(obj);
grid.getView().refresh();

//////////////////////////////////////////
查询
store.baseParams['memid'] = fb.form.findField('memid').getValue();
store.baseParams['start'] = 0;
store.load();

/////////////////////////////////
添加一行列
Ext自己带的一个插件
需要文件 RowExpander.js
var expand = new Ext.ux.grid.RowExpander({
    tpl : new Ext.Template(
        '<p>{address}</p>'
    )
});
在grid的columns中加 expand,
并在grid属性中加 plugins: expand
分享到:
评论

相关推荐

    Ext Grid表格的自动宽度及高度的实现

    ### 小结 Ext Grid的自动宽度及高度的实现,不仅提升了用户体验,还大大简化了前端开发者的布局管理任务。通过结合CSS和JavaScript,我们可以轻松创建响应式表格,无论是在桌面端还是移动端,都能保持一致的视觉...

    Ext+JS高级程序设计.rar

    目录 前 言 第一部分 Ext Core 第1章 Ext Core重要概念 2 1.1 Ext.Element 2 1.1.1 获取HTMLElement节点的Ext.Element实例 2 1.1.2 CSS样式操作 3 1.1.3 DOM查询与遍历 4 1.1.4 DOM操作 6 ...14.14 本章小结 483

    Ext中文文档

    - **资源与小结**:列出了一系列辅助学习的资源,并对准备阶段进行了总结,强调了资源的重要性。 #### 第三章:ExtOOP基础 - **javascript类的定义与Extjs命名空间**:深入探讨了在ExtJS中如何定义类和命名空间,...

    轻松搞定Extjs_原创

    ### Extjs教程知识点总结 #### 第一章:序 - **主要内容**:简要介绍Extjs框架,并概述后续章节的学习内容。 #### 第二章:准备与资源 - **下载**:指导如何从官方...- **小结**:回顾综合项目的整体架构和技术要点。

    Extjs学习带注释

    - **小结**:回顾并总结 Extjs 的基础知识,为后续的学习打下坚实的基础。 #### 四、消息框 - **基本概念**:了解消息框的作用和种类,包括提示框、输入框、确认框等。 - **实现方式**:学习如何在 Extjs 中实现...

Global site tag (gtag.js) - Google Analytics