精华内容
下载资源
问答
  • GridPanel

    2019-04-19 14:33:26
    Extjs的GridPanel创建一个GridPanel Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择、编辑等. 创建一个GridPanel 要使用GridPanel,首先要定义Store,而在创建...

    Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择、编辑等.

    创建一个GridPanel

    要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model:

    //1.定义Model
    Ext.define("MyApp.model.User", {
        extend: "Ext.data.Model",
        fields: [
            { name: 'name', type: 'string' },
            { name: 'age', type: 'int' },
            { name: 'phone', type: 'string' }
        ]
    });
    

    然后创建Store

    //2.创建store
    var store = Ext.create("Ext.data.Store", {
        model: "MyApp.model.User",//指向前面定义的model
        autoLoad: true,//自动加载
        pageSize: 5,
        proxy: {
            type: "ajax",
            url: "GridHandler.ashx",
            reader: {
                root: "rows"
            }
        }
    });
    

    最后才是GridPanel的代码:

    //3.创建grid
    var grid = Ext.create("Ext.grid.Panel", {
        xtype: "grid",
        store: store,
        width: 500,
        height: 200,
        margin: 30,
        columnLines: true,
        renderTo: Ext.getBody(),
        selModel: {
            injectCheckbox: 0,
            mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
            checkOnly: true     //只能通过checkbox选择
        },
        selType: "checkboxmodel",
        columns: [
            { text: '姓名', dataIndex: 'name' },
            {
                text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
                editor: {
                    xtype: "numberfield",
                    decimalPrecision: 0,
                    selectOnFocus: true
                }
            },
            { text: '电话', dataIndex: 'phone', editor: "textfield" }
        ],
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        listeners: {
            itemdblclick: function (me, record, item, index, e, eOpts) {
                //双击事件的操作
            }
        },
        bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
    });
    

    GridPanel的列

    Extjs GridPanel的列有多种类型,例如:文本列、数字列、日期列、选择框列、操作列等。我们可以通过xtype来指定不同的列类型。
    下面是列的常用配置项:

    • xtype:列类型
    • text:列头显示的文字
    • dataIndex:绑定的字段名,对应Model中的name属性值
    • width:宽度
    • flex:自动适应的宽度
    • sortable:是否可排序,默认为是
    • hideable:是否可隐藏,默认为是
    • locked:锁定列,将列锁定在grid的开头,当grid出现滚动条的时候该属性比较有用。默认为否
    • lockable:是否可锁定,默认为否
    • format:格式化字符串,常用于日期、数字的格式化。日期:‘Y-m-d’;日期时间:‘Y-m-d H:i:s’;数字:‘0,000.00’(带有千位分隔符、保留两位小数)、‘0.00’(保留两位小数),‘0’(不保留小数)
    • renderer:自定义绘制方法,可以是Ext.util.Format中定义好的方法名称,也可以是自定义否
      -function,该方法接收下面的参数:value、metadata、record、rowIndex、colIndex、store、view,并需要一个用来显示的返回值。
    • editor:编辑器,当使用编辑插件的时候才会起作用。

    GridPanel行选择模型(SelectionModel)

    控制Extjs GridPanel行选择模型的两个配置项是selType和selModel。默认情况下,selType为rowmodel,对应的Ext.selection.Model。这种选择模型不会在grid中添加复选框,它通过点击行进行选中,默认为多选“MULTI”。
    如果我们要使用复选框来选择行,我们需要使用下面的配置:

    selType: "checkboxmodel",
    

    然后,我们可以通过selModel来配置selType:

    selModel: {
        injectCheckbox: 0,
        mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
        checkOnly: true     //只能通过checkbox选择
    },
    

    GridPanel的行选择

    除了界面操作来选中行,我们还可以通过代码来选中行:

    //选择行,并保持其他行的选择状态
    grid.getSelectionModel().select(records, true);
    //选择所有
    grid.getSelectionModel().selectAll();
    //根据row index选择
    grid.getSelectionModel().selectRange(startRow, endRow, true)
    

    GridPanel获取选中行

    获取选中行,仍然需要通过SelectionModel来完成:

    var records = grid.getSelectionModel().getSelection();
    

    GridPanel显示行号

    默认情况下Extjs GridPanel是不显示行号的,我们需要手动添加行号的列,即在之前的columns中添加:

    { xtype: "rownumberer", text: "序号", width:40 },
    

    GridPanel异步加载数据

    Extjs GridPanel的异步加载数据是通过Store来实现的。
    异步加载通常采用ajax代理,例如我们代码中用到的:

    //2.创建store
    var store = Ext.create("Ext.data.Store", {
        model: "MyApp.model.User",
        autoLoad: true,
        pageSize: 5,
        proxy: {
            type: "ajax",
            url: "GridHandler.ashx",
            reader: {
                root: "rows"
            }
        }
    });
    

    服务器端返回的数据格式如下:

    {
        "rows": [
          {
              "name": "Tom",
              "age": 12,
              "phone": "1233455"
          },
          {
              "name": "Jerry",
              "age": 12,
              "phone": "1233455"
          },
          {
              "name": "Sinbo",
              "age": 12,
              "phone": "1233455"
          },
          {
              "name": "Jack",
              "age": 12,
              "phone": "1233455"
          },
          {
              "name": "Johnson ",
              "age": 12,
              "phone": "1233455"
          }
        ],
        "total": 5
    }
    

    GridPanel分页

    当GridPanel中数据量大的时候,我们就需要使用分页了。
    分页的实现由两部来完成,首先是在Store中添加pageSize配置项,用来确定每页显示多少行数据;然后需要为GridPanel添加PagingToolbar。

    1. 在分页参数加上之后,Extjs在执行ajax请求的时候会添加三个参数:

    • page:当前页
    • start:起始行的行号
    • limit:每页数据行数,默认为25;这个参数值就是我们设置的pageSize

    2. GridPanel添加PagingToolbar

    bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
    

    禁止显示列头部右侧菜单

    Extjs GridPanel的列,当我们点击列头的时候,会出现一个菜单,如果我们要禁用这个菜单,可以将每个column定义属性menuDisabled指定为true,代码如下:

    {header: 'Idno', dataIndex: 'idno', width:150,menuDisabled:true}
    

    原博客地址:https://www.cnblogs.com/youring2/p/3998761.html

    展开全文
  • gridPanel

    2013-05-29 01:24:01
    // var grid = o.findParentByType('gridpanel');//获得父类的panle var grid = o.ownerCt.ownerCt; var data = grid.getSelectionModel.getSelection(); if( data.length ==0){ Ext.Msg.alert('提示','至少...
    (function(){
    Ext.QuickTips.init();
    var grid = Ext.create('Ext.grid.Pale',{
    title:'parentName',
    frame:true,
    forceFit:true,
    width:890,
    height:400
    columns:[
    {text:'name',dataIndex:'name'},
    {text:'age',dataIndex:'age'},
    {text:'mail',dataIndex:'mail',
    field:[
    xtype:'textfield',
    allowBlank:false
    ]

    }
    ],
    tbar:[
    {xtype:'button' text:'添加',iconcls:'table_add'},
    {xtype:'button' text:'删除',iconcls:'table_remove'},
    handler:function(o){
    // var grid = o.findParentByType('gridpanel');//获得父类的panle
    var grid = o.ownerCt.ownerCt;
    var data = grid.getSelectionModel.getSelection();

    if( data.length ==0){

    Ext.Msg.alert('提示','至少选址一条数据');

    }else{

    var st = grid.getStore();//得到ID数据
    var ids=[];
    Ext.Array.each(data,function(records){
    ids.push(records.get('name'));

    })
    Ext.Ajax.request({
    url:'',
    params:{ids:ids.join(',')},
    method:'POST',
    timeout:2000,
    success: function(response,opts){

    Ext.Array.each(data,function(records){
    st.remove(records);

    })
    }

    })

    }
    }


    {xtype:'button' text:'修改',iconcls:'table_edit'},
    {xtype:'button' text:'查看',iconcls:'table_comm'}

    ],
    docketItems:[
    xtype:'pagingtoolbar',
    store:Ext.data.StoreManager.lookup('s_user'),
    dock:'buttom',
    displayInfo:true

    ],
    plugins:[//添加单元格可编辑插件
    Ext.create('Ext.grid.plugin.CellEditing',{
    clicksToedit:1
    });

    ],

    setType:'checkboxmodel',//定义chekbox复选框
    multiSelect:true,//允许多选
    renderTo:'divId',
    store:Ext.data.StoreManager.lookup('s_user')
    });

    });

    })();

    -----------------------------------------------------------------------------
    Ext.define('user',{
    extend:'Ext.data.Model',
    fields:[
    {name:'name',type:'string',sortable:true},
    {name:'age',int:'string',sortable:true},
    {name:'mail',type:'string',sortable:true}
    ]


    });

    Ext.create('Ext.data.Stroe',{
    model:'user',
    storeId:'s_user',
    proxy :{

    type:'ajax',
    url:'testurl'
    reader:{
    type:'json',
    root:'topis'//json 根节点 就是对象数组前节点名称
    },
    writer: {
    type:'json'

    }
    },
    autoLoad:true


    });
    展开全文
  • GridPanel打印

    2013-04-23 23:11:50
    在EXTJS开发过程中,经常会需要打印GridPanel的内容,这是打印控件
  • ExtAspNet GridPanel的一般用法
  • gridpanel常用操作

    2014-09-10 10:26:44
    Extnet GridPanel 增行 删行 弹出窗体 页面传值
  • gridpanel的使用

    2011-09-10 22:17:45
    gridpanel的使用,挺好的啊 gridpanel的使用,挺好的啊 gridpanel的使用,挺好的啊
  • 扩展GridPanel

    2008-07-01 13:38:03
    扩展的GridPanel,让其分页后保持选择状态
  • 在ext.net的gridpanel中选中多行记录 点击刷新按钮 也就是gridpanel.refresh() 然后清除选中状态 代码如下var view =GridPane.getView(); GridPane.getSelectionModel().clearSelections(); view.refresh();...

    在ext.net的gridpanel中选中多行记录 点击刷新按钮 也就是gridpanel.refresh() 然后清除选中状态 代码如

    var view =GridPane.getView();
    GridPane.getSelectionModel().clearSelections();
    view.refresh();

    gridpanel.refresh() ;

    但是无效 选中状态依然存在

    解决方案就是 刷新操作在后台进行 在回调函数里进行清除选中操作

    我也不知道为啥 哪位大神知道 麻烦告知下 非常感谢

    展开全文
  • GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候。 下面来看看效果: 使用行折叠/展开功能之后,在Ext.Net GridPanel的...

    GridPanel 折叠/展开行

    Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候。

    下面来看看效果:


    使用行折叠/展开功能之后,在Ext.Net GridPanel的行头会出现一个展开图标,点击图标以后能够将这一行展开:

    使用XTemplate实现行折叠/展开

    这是最简单的一种实现,在上一篇文章:【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法) 中的代码基础上我们在GridPanel的定义中加入下面的代码:

    <Plugins>
        <ext:RowExpander runat="server">
            <Template runat="server">
                <Html>
                    <b>姓名:</b><span>{Name}</span>
                    <br></br>
                    <b>年龄:</b><span>{Age}</span>
                </Html>
            </Template>
        </ext:RowExpander>
    </Plugins>

    这里面使用到了Template,这里面包含了我们展开后要显示的内容,数据就是当前行的数据。

     

    从服务器获取展开时显示的数据

    通常情况下我们不会一次将所有数据都获取到客户端,而是通过异步加载的方式按需获取要显示的数据
    在Ext.Net GridPanel中,如果要在展开的时候从服务器获取数据,我们需要完成如下代码。

    第一步:为了配合演示,先为我们的Model添加一个Time属性,我们通过异步的方式去服务器端获取当前时间:

    <ext:Model ID="UserInfoModel" runat="server" IDProperty="ID">
        <Fields>
            <ext:ModelField Name="ID" Type="Int"></ext:ModelField>
            <ext:ModelField Name="Name" Type="String"></ext:ModelField>
            <ext:ModelField Name="Gender" Type="String"></ext:ModelField>
            <ext:ModelField Name="Age" Type="Int"></ext:ModelField>
            <ext:ModelField Name="Time" Type="String"></ext:ModelField>
        </Fields>
    </ext:Model>

    第二步:修改我们的RowExpander定义,我们需要将Template定义在Bin下,并为RowExpander添加事件:

    <Bin>
        <ext:XTemplate runat="server" ID="tplDetail">
            <Html>
                <b>姓名:</b><span>{Name}</span>
                <br></br>
                <b>年龄:</b><span>{Age}</span>
                <br></br>
                <b>时间:</b><span>{Time}</span>
            </Html>
        </ext:XTemplate>
    </Bin>
    <Plugins>
        <ext:RowExpander runat="server">
            <Listeners>
                <Expand Handler="MyApp.onExpand(record.data, #{tplDetail}, #{ctDetail})"></Expand>
            </Listeners>
            <Component>
                <ext:Container runat="server" ID="ctDetail" />
            </Component>
        </ext:RowExpander>
    </Plugins>

    第三步:定义服务器端的DirectMethod方法:

    [DirectMethod]
    public static string GetDetail(string name)
    {
        return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
    }

    第四步:定义客户端的Expand方法:

    var MyApp = {
        onExpand: function (data, template, container) {
            if (data.Time) return;
    
            App.direct.GetDetail(data.Name, {
                    success: function (time) {
                        data.Time = time;
                        template.overwrite(container.getEl(), data);
                    },
                    eventMask : { showMask : true }
                }
            );
        }
    };

    通过上面这几个步骤,我们就完成了异步获取并显示的功能。效果如下:

    GridPanel Selection

    接下来是Ext.Net的GridPanel的另外一个功能:选择。

    我们在GridPanel最开始的用法中已经见识过如何使用选择功能,今天我们这片笔记将更加详细的介绍Ext.Net GridPanel的Selection功能。

    Ext.Net GridPanel Selection包括三种:

    • RowSelectionModel:行选择模型
    • CheckboxSelectionModel:带有复选框的行选择模型
    • CellSelectionModel:单元格选择模型

    默认情况下,GridPanel使用RowSelectionModel,能够进行单选,如果要GridPanel能够进行多选,需要在GridPanel中添加属性:

    <ext:GridPanel runat="server" ID="grid" 
        ColumnLines="true" Width="500" Height="200" 
        MultiSelect="true">

    下面我们来分别看一下这三种模型的用法

    RowSelectionModel

    效果如下:

    实现代码:

    <ext:GridPanel runat="server" ID="grid" 
        ColumnLines="true" Width="500" Height="200" 
        MultiSelect="true">

    在RowSelectionModel的配置中,属性Mode表示选择的类型,分别是Single(单选)、Multi(多选)和Simple(简单多选)

    单选和多选的区别很明显,我们来说一下Multi和Simple的区别:

    • multi:多选,但需要使用键盘Ctrl、Shift来配合完成。在实际使用的过程中你会发现,单纯的鼠标单击并不能实现多选,需要同时按下Ctrl键才能多选,如果要选择一个区域,则可以同时按下Shift键。
    • Simple:多选,不需要Ctrl或Shift键的配合。只使用鼠标即可实现多选。

     

    CheckboxSelectionModel

    效果如图:

    代码如下:

    <ext:CheckboxSelectionModel runat="server" 
        Mode="Multi" InjectCheckbox="1">
    </ext:CheckboxSelectionModel>

    Mode属性与RowSelectionModel中的Mode属性功能相同,不在赘言。

    InjectCheckbox属性用来决定Checkbox列显示在什么位置(第几列),默认为0,从第0列开始。

     

    CellSelectionModel

    效果如图:

    代码如下:

     

    <ext:CellSelectionModel runat="server"></ext:CellSelectionModel>

    我试了一下,好像是只能选中一个单元格。

    查了ExtJS API以后发现确实只能选择一个单元格,它同样也有一个Mode属性,但这个属性只有一个可用值:Single。

     

    客户端获取选择的值

    由于这系列比较偏重服务器端的处理,所以这个地方简单的说一下客户端获取值的方法,代码如下:

    var selectedRows = grid.getSelectionModel().getSelection();

    grid是我们的GridPanel,首选获取它的选择模型,得到模型之后,再从选择模型中得到选中的内容。

     

    服务器端获取选择的值

    对于服务器端来说,我们可以用同样的思路来获取选中的值。

    var selectionModel = grid.GetSelectionModel() as RowSelectionModel;
    
    if (selectionModel.SelectedRows.Count == 0)
    {
        X.MessageBox.Alert("提示", "没有选中行").Show();
        return;
    }
    
    string ids = string.Empty;
    foreach (var item in selectionModel.SelectedRows)
    {
        ids += "," + item.RecordID;
    }
    ids = ids.Trim(',');
    
    X.MessageBox.Alert("提示", ids).Show();

    注意:如果Store所关联的Model没有设置IDProperty,将导致无法获取RecordID

     

    上面的代码是针对RowSelectionModel和CheckboxSelectionModel来说的,如果是CellSelectionModel,我们还可以获取到单元格的值等内容:

    var cellModel = grid.GetSelectionModel() as CellSelectionModel;
    //获取记录ID
    var recordId = cellModel.SelectedCell.RecordID;
    //获取单元格值
    var cellValue = cellModel.SelectedCell.Value;
    //获取列名称
    var columnName = cellModel.SelectedCell.Name;
    //获取列号
    var columnIndex = cellModel.SelectedCell.ColIndex;
    //获取行号
    var rowIndex = cellModel.SelectedCell.RowIndex;

     

     可编辑的GridPanel

    Ext.Net GridPanel 有两种编辑模式:编辑单元格和编辑行。

    单元格编辑:

    行编辑:

    可以看出,单元格编辑的时候,只有单元格会进入编辑模式,而行编辑模式中则对编辑行的所有可编辑字段统一进行编辑。

    要对Ext.Net GridPanel进行编辑,需要进行两步配置:

    1. 配置列的编辑控件(TextField、NumberField、DateField等)
    2. 配置编辑插件(CellEditing、RowEditing)

    配置Grid列的编辑控件

    在我们的例子中,只对姓名和年龄进行编辑,姓名使用的是TextField控件,年龄使用NumberField控件,列的配置如下:

    <ColumnModel>
        <Columns>
            <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server"></ext:RowNumbererColumn>
            <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column>
            <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name">
                <Editor>
                    <ext:TextField runat="server"></ext:TextField>
                </Editor>
            </ext:Column>
            <ext:Column runat="server" ID="columnGender" Width="50" Text="性别" DataIndex="Gender"></ext:Column>
            <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年龄" DataIndex="Age" Format="">
                <Editor>
                    <ext:NumberField runat="server" MinValue="18" MaxValue="150"></ext:NumberField>
                </Editor>
            </ext:NumberColumn>
        </Columns>
    </ColumnModel>

    配置Grid编辑插件

    ExtJS中有两种Grid的编辑插件,我们将使用代码贴出来。

    单元格编辑:

    <Plugins>
        <ext:CellEditing runat="server" ClicksToEdit="1"></ext:CellEditing>
    </Plugins>

    行编辑:

    <Plugins>
        <ext:RowEditing runat="server" ClicksToEdit="1"></ext:RowEditing>
    </Plugins>

    通过上面两个配置,我们已经可以使用Ext.Net GridPanel的编辑功能了。

     

    来源:

    Ext.Net学习笔记16:Ext.Net GridPanel 折叠/展开行
    Ext.Net学习笔记17:Ext.Net GridPanel Selection
    Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel

    转载于:https://www.cnblogs.com/yc-755909659/p/3766004.html

    展开全文
  • GridPanel属性详解

    2011-10-21 13:24:58
    详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
  • GridPanelCalculateField Gridpanel计算场演示 与相关
  • Extjs2.02 Gridpanel

    2013-01-24 14:56:37
    Extjs2.02 Gridpanel加载本地数组资源的实例,思路相当清晰。对初学者很有用
  • ExtJS下GridPanel 根据条件改变字体颜色的实现代码。
  • gridpanel

    2010-08-04 16:29:46
    :? extjs gridpanel 怎么隐藏列头 显示数据。
  • Extjs GridPanel用法详解

    2016-11-28 18:48:07
    Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择、编辑等。在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel...
  • ExtJs之gridPanel

    2017-11-25 15:21:27
    需求Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行展示、选择、编辑等创建gridPanel的步骤1.定义数据模型Ext.define("MyApp.model.User", { extend: "Ext.data....
  • 介绍了gridpanel动态加载数据的实例代码,有需要的朋友可以参考一下
  • 10.GridPanel

    2019-10-08 04:06:16
    数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、...示例一:最简单的GridPanel。 Ext.onReady(function(){ var data = [ [1,"张三",20], [2,"李四",20], ...
  • ext2.0中GridPanel(7)

    千次阅读 2013-10-29 10:32:46
    GridPanel
  • Extjs gridpanel 出现横向滚动条问题的解决方法,在gridpanel中加入以下代码即可。
  • ExtJs GridPanel中实现增删改效果的代码,需要的朋友可以参考下。
  • 介绍了去掉gridPanel表头全选框的小例子,有需要的朋友可以参考一下
  • GridPanel样式

    2010-01-19 23:23:57
    GridPanel中表头居中,表格内容右对齐的样式修改,我找了很久都不知道在哪 :cry:
  • GridPanel和TreePnal功能类似,都是Ext JS中的表格便携利器,相比之下GridPanel还要更强大并且更复杂一些,下面我们就来整理一下JavaScript的Ext JS框架中的GridPanel组件使用指南
  • gridpanel+progressbar

    2011-03-15 20:01:35
    gridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+...
  • GridPanel分页

    2013-03-12 10:49:34
    GridPanel分页 EXT数据结构 Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel();//显示选择框 var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(),//显示行号 sm,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,176
精华内容 1,270
关键字:

gridpanel