EditorGridPanel的一些属性,配置项,方法的实例.自适应窗体大小

/*****************************editorGridPanel实例****************************************************/

 

js代码:

grid = new Ext.grid.EditorGridPanel({
     autoScroll:true,
        store: store,
        sm : new Ext.grid.RowSelectionModel(),
  cm: cm,
        renderTo: 'editor-grid',
        width: '100%',
        height: 600,
        autoWidth:true,
        autoExpandColumn: 'code', // column with this id will be expanded
        title: '客户对账清单',
        frame: true,//是否有边框  默认是没有的
        viewConfig:{
   autoFill:true,
   sortAscText:'升序',
   sortDescText:'降序',
   columnsText:'显示列'
  },
        clicksToEdit: 1,
        tbar:[{
              text: '请输入订单号:'
           },{
              xtype: 'textfield',
              id: 'filter',
              selectOnFocus: true,
              width: 100,
              validationDelay:100,
              validator:function(){
               store.load({
                params:{
                       sorderId:this.getValue()//取得搜索表单文本域的值,发送到服务端
                    }
               });
              },scope:this
           }
        ]
    });

 

 

要加载的columnModel:

 

    var cm = new Ext.grid.ColumnModel({
        defaults: {
            sortable: true // columns are not sortable by default          
        },
        columns: [
            {
                id: 'code',
                header: '物料编号',
                dataIndex: 'code',
                width: 100
            }, {
                header: '物料简称',
                dataIndex: 'shortName',
                width: 100
             }, {
                header: '客户简称',
                dataIndex: 'ComSName',
                width: 100
             }, {
                header: '型号',
                dataIndex: 'style',
                width: 100
             }, {
                header: '单位',
                dataIndex: 'unitName',
                width: 40
             },{
                header: '用料数量',
                dataIndex: 'useCount',
                width: 100
             },{
                header: '入库数量',
                dataIndex: 'GCount',
                width: 100
             },{
                header: '客户库存',
                dataIndex: 'GPrice',
                width: 100
             },{
                header: 'sorderId',
                dataIndex: 'sorderId',
                width: 100
                hidden:true,
                                          //只是在页面上隐藏,但是在页面上可以调整成显示的。
                hideable:false
                                       //这两句让该列彻底隐藏
             }
        ]
    });

 

 

 要加载的store:

 

     var zlUrl=getRootPath()+'XXXServlet?change=stasksDetail';
     var store = new Ext.data.Store({
      proxy: new Ext.data.HttpProxy({
             url: zlUrl
        }),
        reader: new Ext.data.JsonReader({
         totalProperty: 'results',
            root: 'rows',
            fields: [
                {name: 'code', mapping: 'code'},
                {name: 'shortName'},
                {name:'ComSName'},
                {name: 'style'},
                {name: 'unitName'},
                {name:'useCount'},
                {name: 'GCount'},
                {name: 'GPrice'},
                {name:'sorderId'}
            ]
        })
    });

 

 

参数的传递发法:

 

params:{
        sorderId:this.getValue()//取得搜索表单文本域的值,发送到服务端
  }    

 

window.onresize = function(){ //自适应窗体
  grid.setWidth(0);
        grid.setHeight(0);
        grid.setWidth(Ext.get("content").getWidth());
        grid.setHeight(Ext.get("content").getHeight());
    };

 

/*****************************editorGridPanel实例  结束****************************************************/

 

属性信息:

 

1. 界面修改(css style):

Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的行的颜色、菜单等,几乎都不同。Extjs对这些样式的设置都是由css完成的。如:

选中行的颜色就可用如下设置完成:

.x-grid3-row-selected{background:#c6e2ff!important;}

其他的都类似,只要找到对应的class, 然后设置要修改的部分即可。

2. 属性的作用(About Ext.grid. GroupingView, EditorGridPanel):

Extjs的grid功能强大,如排序、隐藏列或移动列等,这些都有一些属性与其对应,可以选择要还是不要。其中一些的属性和其作用如下:

*. EditorGridPanel:

border: false, //grid的边界

autoHeight: true, //grid的高度是否要用指定的高度

enableColumnMove: false, //grid的列是否可以移动

enableHdMenu: false, //在列的header是否要有下拉菜单

trackMouseOver: true, //当鼠标移过行时,行是否要highlight

stripeRows: true, //让grid相邻两行背景色不同

editable:false,//让grid的某一列不能修改

Config {
                clicksToEdit : Number   //点几次开始编辑,默认为2
         }

方法
        EditorGridPanel()
        构造,应为 EditorGridPanel(Object config)
        startEditing( Number rowIndex, Number colIndex ) : void
        stopEditing() : void   //开始停止编辑

事件
        afteredit : ( Object e )
        beforeedit : ( Object e )
        validateedit : ( Object e )


       

*. GroupingView:

在要显示的数据中,根据它们的某个数据点进行分组,分组显示。这个数据点由*.GroupingStore中的groupField决定。*.GroupingView设置这个分组显示的grid的一些关于组的显示属性。如:

forceFit:true, //是否根据grid的宽度调整列的宽度,防止水平scrollbar的出现

enableGroupingMenu: false, //控制header的下拉菜单中是否有group的选项(Group By This Field, Show in Groups(checkbox))

showGroupName: true,

//用来分组的数据点这一列的header是否要随group name一起显示

hideGroupedColumn: true, //用来分组的数据点这一列是否要显示

startCollapsed: false, //一开始进到grid这页,它的group是合起还是展开

scrollOffset: -1, //为垂直的scrollbar留下的space(默认是19px)

 

 

 

 

 

 

 

  • 1
    点赞
  • 1
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值