Ext3.2转Ext4要点

1.创建类继承

Ext.define(‘NewPanel',{  //新类名

  extend:‘Ext.panel.Panel',  //继承类名

   initComponent : function(){  //从里面写上初始化的数据

  this.items= [];

  this.tbar= [];

   NewPanel.superclass.initComponent.call(this);

  }

});

2.创建对象

Ext.create('Ext.panel.Panel',{

  title:‘新对象',

  html:'新对象‘

});

3.创建TabPanel

Ext.create('Ext.tab.Panel',{

  title:‘TabPanel',

  items:[]  //items里面放每个tab页面

});

4.创建GridStroe

Ext.regModel('BugFlows',{

  fields:["flow_status","user_id","action_name",

  "accept_date","bmanager_opinion","flow_astep"]

 });

var store = Ext.create('Ext.data.Store',{

  model:'BugFlows',

  remoteSort : false,

  sorters:[{

  property:'flow_astep',

  direction:'DESC'

  }],

  proxy:{

  type:'ajax',

  url:"QueryBugFlowStatusAction.do",

  reader:{

  totalProperty : 'totalProperty',

  type:'json',

  root:'data'  

  }

  }

});

修改store的参数  this.flowTranceGrid.store.proxy.extraParams.id= id;

5.创建GridPanel

Ext.create('Ext.grid.Panel',{

  title:‘GridPanel',

  columns: [],  //表头

   selModel : Ext.create('Ext.selection.CheckboxModel',{}),

  plugins : [Ext.create(‘Ext.grid.plugin.CellEditing’,{  //在线编辑

  clicksToEdit : 2

  })

  },

  store: ,

});

1.自适应表头宽度,在columns中的自适应列上定义flex:1

2.在grid，editor中不要写fieldLabel，否则在线编辑显示不正确

6.Record

Ext.define('Record',{

    extend: 'Ext.data.Model',

    fields: [

        {name: 'id',  type: 'string'},

        {name: 'text', type: 'string'},

        {name: 'custom', type: 'string'}

    ]

});

Ext.create('Record',{id:’1’,text:’111’})

  Ext.selection.CheckboxModel

Grid选中单条数据this.grid.getSelectionModel().getLastSelected();

Grid选中多条数据this.grid.getSelectionModel(). getSelection();

7.分组Grid

var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {

  enableGroupingMenu :true,

  groupByText :"按此列分组",

  showGroupsText :"分组显示",

  enableGroupBy :true,

  enableGrouping :false,// 默认不分组

  deferEmptyText :false,

  emptyGroupText : '无',

  emptyText : '点击添加按钮，添加时间记录‘

})

Ext.create('Ext.grid.Panel',{

  title:‘GridPanel',

  columns: [],  //表头

   selModel : Ext.create('Ext.selection.CheckboxModel',{}),

  plugins : [Ext.create(‘Ext.grid.plugin.CellEditing’,{  //在线编辑

  clicksToEdit : 2

  })

  },

  features:[groupingFeature],

  store: ,

});

8.Form

创建FormPanel

Ext.create('Ext.form.Panel',{});

获取form中的field

formPanel.getForm().findfield(‘name/hiddenName’);

时间转换

Ext.util.Format.date(newDate(),’Y-m-d’);

Ext.util.Format.date(newDate(),’H:i’);

9.Panel的tbar的控制

1.获取tbar

  panel.getTopToolbar();//获取item数组

  panel.getDockedItems()[0];//获取tbar对象

  tbar. findByItemId(‘itemid’);//获取单一button

2.隐藏多个tbar

  panel.hideTbars([‘itemId1’,’itemId2’]);

3.显示多个tbar

  panel.showTbars([‘itemId1’,’itemId2’]);

4.可用多个tbar

  panel.enableTbars([‘itemId1’,’itemId2’]);

5.不可用多个tbar

  panel.disableTbars([‘itemId1’,’itemId2’]);

10.Function的延迟方法

1.延迟函数

   Ext.Function.createDelayed(fn,0,this);返回function

2.延迟函数

   Ext.Function.defer(fn,0,this);返回number

11.String类

String.format转为Ext.String.format