EXTJS 学习笔记

1. viewmodel:false

2. var dicstore = Ext.create('Vstar.store.CORE_DictionaryDataTree'，{
　　proxy:{
　　      api: {
　　　　　　read: getAjaxUrl("PRD_CATALOG_DIC_GeTPager", { "DiCCode": "物资目录"}),
　　　　　  }
　　   }
    });

3. me.store = Ext.create('Vstar.store.PRD_STOCK',{
          autoLoad: false
     });

4. if( this.hasRight("借出")){
           his.viewmode = true;
     }

5. listeners: {
         specialKey : "onSpecialKey"
    }

6.  {
　　  xtype: 'gridPickerField',
　　  fieldLabel: '资产型号',
　　  name: 'PRD_CATALOG_CODE',
　　  ajaxUrl: getAjaxUrl("PRD_CATALOG_GetPager"),
　　  displayField: "PRD_CATALOG_NAME", // 将相关的数据域名称绑定到ComboBox中，
　　  valueField: "PRD_CATALOG_CODE", // 将相关的数据值绑定到ComboBox中
　　   isValueDisplay: true, //原样显示value值
　　   allowBlank: true,
　　   listeners: {
　　   specialKey: "onSpecialKey"
           }
      }

7. allowFullQuery: false

8.  {
　　   xtype: 'girdPickerField',
　　   fieldLabel: '管理部门',
　　   name: 'ADMIN_DPTID',
　　   ajaxUrl: getAjaxUrl("CORE_Department_GetPager",{ parms: {DPTTYPE: "资产责任部门"} }),
　　   displayField: "Name",
　　   valueField: "ID",
 　　  isValueDisplay: false, //显示显示值
　　   allowFullQuery: false,
   　　listeners: {
　　          specialKey: "onSpecialKey"
           }
      }

9.   {
　　    xtype: 'combo',
　　    fieldLabel: '用途分类',
　　    name: 'PRD_CATALOG_TYPE',
 　　   store: [ ['办公','办公'] , ['生产','生产'], ['未指定','未指定'] ],
　　    listeners: {
　　          specialKey: "onSpecialKey"
           }
       }

10.  菜单按钮带下拉框

    {
　　　  reference: 'btn_diaobo',
　　    xtype: 'button',
　　    text: '资产入库',
　　    hidden: this.viewmode,
   　　 ui: 'facebook',
　　    iconCls: 'x-fa fa-external-link',
           menu: [
               {iconCls: 'x-fa fa-plus', text: '独立入库', handler: "addNew", visibleRight: '制码' },
　　　　        {iconCls: 'x-fa fa-plus', text: '采购入库单', handler: "addNewBatch", visibleRight: '制码' },
　　　　        {iconCls: 'x-fa fa-file-excel-o', text: 'Excel导入', handler: "addNewBatchh", visibleRight: '制码'}
　　       ]
    }

     

11. 菜单按钮带下拉框

 {
　　　 reference: 'btn_diaobo',
　　   xtype: 'button',
 　　  text: '资产调拨',
　　   hidden: this.viewmode,
　　   ui: 'facebook',
　　   iconCls: 'x-fa fa-external-link',
　　   menu: [
　　　　   { iconCls: 'x-fa fa-file-excel-o', text: '借用调拨', handler: "doDiaoBo" },
　　　　   { iconCls: 'x-fa fa-file-excel-o', text: '内部调拨', handler: "doDiaoBo" },
　　          '-',
　　　　   { iconCls: 'x-fa fa-file-excel-o', text: '原外部调拨(无审批)', handler: "doDiaobo" },
　　          { iconCls: 'x-fa fa-file-excel-o', text: '外部调拨-申请', handler: "doDiaoBo"},
　　           '-',
　　          { iconCls: 'x-fa fa-file-excel-o', text: '归还调拨', handler: "doDiaoBo" }
　　      ]
       }

               

12.  树形列信息，带筛选条件

 {
　　　  reference: 'dicTree',
　　　  xtype: 'treepanel',
　　    region: 'west',
　　    width: 300,
　　    split: true,
　　    store: dicstore,
　　    rootVisible: false,        // false 隐藏根节点
 　　　 columns: [
　　　　　　 {
　　　　　　　　xtype: 'treecolumn',
　　　　　　　　flex:1,
　　　　　　　　sortable: false,     // false 禁止排序
　　　　　　　　text: '名称',
　　　　　　　　region: 'west',
　　　　　　　　dataIndex: 'text'
　　　　　　 }
  　　  ]
   }

      

13. 选择框

selModel: {
　　  type: 'checkboxmodel',
　　  model: 'SIMPLE'
}

        model :  ‘SINGLE’/’SIMPLE’/’MULTI’       默认是SINGLE

         single: 允许一次只能选择一个；

         simple：允许一次一个接着一个的选择多个。

              

14.  列 编辑

 {
      xtype: 'widgetcolumn',
　　　 width: 75,
　　   widget: {
　　　　    xtype: 'container',
　　　　　  item: [
　　　　　　　{
　　　　　　　　xtype: 'button',
　　　　　　　　iconCls: 'x-fa fa-folder-open-o',
　　　　　　　　ui: 'sort-green',
　　　　　　　　height: 20,
　　　　　　　　margin: '0 0 0 0',
　　　　　　　　padding: '0 5 0 5',
　　　　　　　　text: '编辑',
　　　　　　　　handler: 'onEdit'
　　　　　　    }
　　　　　 ]
　　　 },
　　　 onWidgetAttach: function(column,widget,record){
　　　　   widget.wdigetId = record.get("PRD_ID");
　　　　　　widget.down('button').record = record ;
　　　}
 }

15.  标记

 {
　　　　dataIndex: 'IS_NEEDCONFIRM',
　　　　DicCode: '标记',
　　　　width: 70,
　　　　renderer: function(value, cellmeta, record){
　　　　var str = "";
　　　　  if (value > 0){
　　　　　　str = '<span style="font-size:14px; color: red" class="x-fa fa-asterisk">待确认</span>';
　　　　  }
　　　　  else if (record.data.BORROW_USERID == varUserID){
　　　　　　str = '<span style="font-size:14px; color: red" class = "x-fa fa-asterisk">借入</span>';
　　　　  }
　　　　  else if (isNotEmpty(record.data.BORROW_USRID) && (record.data.BORROW_USERID !=varUserID)){
　　　　　　str = '<span style="font-size:14px; color: red" class = "x-fa fa-asterisk">借出</span>';
　　　　  }
　　　　　return str;
　　　 }
 }

            

16. 二维码链接

{
   text: '二维码',xtype: 'templatecolumn',dataIndex: 'PRD_QRCODE',minWidth: 120,sortable: true,
   tpl: "<a href=javascript:Ext.create('vapp.view.Report.WIN_PRD_View',{PRD_ID: '{PRD_ID}'}).show()>{PRD_QRCODE}</a>",
   flex: 2
}

   

17. 根据角色信息判断，列信息是否隐藏

 var isadmin = false;
 if(isInRole("admin")) isadmin = true;
 if(isInRole("办公类资产管理员")) isadmin = true;
 if(isInRole("生产类资产管理员")) isadmin = true;

 {text:'价格',dataIndex:'PRICE',sortable:true,flex:1,minWidth:120,hidden:!isadmin}

 18. 将一个页面分两部分显示,(上部分是一个ListView，下面也是一个ListView)

{
     split: true,
     reference: 'detailgrid',
     BILL_IN_ID: this.ID,
     xtype: 'BILL_IN_DETAILLISTVIEW',
     mutiSelect: true,
     reference: 'xmlist',
     width: '100%',
     flex: 1
}

 19.新增行编辑/鼠标拖拽上下排序

 {
     // 行编辑
     plugins: [
          Ext.create('Ext.grid.plugin.CellEditing',{
                pluginId: 'CellEditing',
                clicksToEdit: 1
          })
    ],
    // 鼠标拖拽上下可排序
    viewConfig: {            // viewConfig   将应用于表格的UI视图的配置对象。任何对于Ext.view.Table所使用到的配置选项都在这里被指定。     
         plugins: {          // plugins 一个对象或对象数组，组件将提供自定义功能。
              ptype: "gridviewdragdrop",           //  这个插件为gridView提供了拖放的功能。
              dragText: "可用鼠标拖拽上下进行排序"     // 拖动时要显示的文本
          },
         listeners: {
             drop: "onGridDrop"
         }
    },
     /*行拖拽松开后触发*/ 
     onGridDrop： function(note,data,model){
           var _grid = this.lookupReference('maingrid');
           var store = _grid.store;
           for(i=0;i<store.totalCount;i++){
                store.getAt(i).set("SORTORDER",i+1);
            }
     },

    columns: [
        {text: '规格'， dataIndex: 'guige', editor: {xtype: "textfield"}, width: 120, flex: 1}
    ]

 }

 20.日期时间显示

{
    text:'时间'，dataIndex:'SUBMIT_TIME',width:120,
        renderer: function(val){
            if(val !=null) return new Date(val).format("YY-MM-DD hh:mm");
        }
}

 21. extjs gridpanel 在列很多的情况下，我把滚动条拖到右边单击行时如何能不让滚动条自动跑到左边

 new Ext.grid.GridPanel({
      viewConfig : {
          focusRow : Ext.emptyFn     // focusRow 聚焦特定行并将其显示在视图中。将触发rowfocus事件。 emptyfn 一个可复用的空函数。
      }
 });