Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

ExtJs一些记录

发布于:  

今天把原来做ExtJs时做的一些记录整理一下, 这里没有怎么搭建环境的一些内容, 多是一些自己当时遇到的问题吧。

创建一个项目

sencha generate app -ext StoreManage ./StoreManage 

-ext 后边是项目名 ./后是目录名

sencha app watch 

启动并监视项目, 项目改变会自动编译


Ext.Element(几乎对DOM的一切进行了彻底封装) Ext.DomHelper(是一个强大的操控UI界面的工具类) Ext.DomQuery(用来进行DOM节点查询) 开发时遇到设置允许chrome跨域的设置 stackoverflow上 回答 不过我当时并没有这么做,因为觉得意义不大。(看自己情况吧)

日期操作

var v7 = new Date(); //获取当前日期  
Ext.Msg.alert("date", Ext.util.Format.date(v7, "Y-m-d H:i:s")); 

在格式化日期时,Y 表示年,m表示月,d表示日,H 表示24小时制的小时,h表示12 小时制的小时,i表示分钟,s表示秒。

combobox

{
  xtype: 'combobox',
  reference: 'productCategoryVal',
  emptyText: '请选择',
  fieldLabel: '商品分类',
  width: 200,
  displayField: 'name',
  valueField: 'code',
  store: {
    type: 'category-list'
  },
  minChars: 0,
  queryMode: 'remote',
  typeAhead: true,
  listConfig: {//  hover提示 data-qtip="{name}"
    itemTpl: '<div>{[_.repeat("&nbsp;&nbsp;", values.grade)]}{name}</div>'
  },
  listeners: {
    select: function(ele, rec, idx) {
      console.log('select ', ele.value);
      //ele.lastSelectEvent = ele.value;
    },
    render: function(com) {
      var formValues = com.lookupController('product').lookupReference('productEditForm').getForm().getValues();
      console.log('-- formValues ---', formValues);
      var data = [];
      data.push(new Ext.data.Record({
        name: formValues.categoryName,
        code: parseInt(formValues.categoryCode)
      }));

      com.getStore().add(data);
      com.setValue(formValues.categoryCode);

    }
  }
}

listConfig titemTpl 配置下拉条目如何显示 {[ jscode ]} 这个部分可以写js代码 render 函数 用来定义默认值 setValue() 函数会改变数据结构 应该通过getStore().add() 添加一个record对象 再setvalue 就能正常获取值了。

XTemplate 用法

参考博客 for 支持parent 上段代码

var tml = new Ext.XTemplate(
  '<tpl for=".">',
    '<tpl if="this.isDefault(id)">',
    '<div class="spec-img-box active"><label><input type="checkbox" checked value="{id}"><img title="{imgKey}" src="http://7xp2j6.com2.z0.glb.qiniucdn.com/{imgKey}" class="product-preview-img"></label><img class="default-cover-icon" src="/resources/images/duigou.png"/><br><button class="setDefBtn">设为封面</button></div>',
    '<tpl else>',
    '<div class="spec-img-box"><label>',
      '<tpl if="this.isSpecImg(id)"><input type="checkbox" checked value="{id}">',
      '<tpl else>',
      '<input type="checkbox" value="{id}">',
      '</tpl>',
      '<img title="{imgKey}" src="http://7xp2j6.com2.z0.glb.qiniucdn.com/{imgKey}" class="product-preview-img"></label><img class="default-cover-icon" src="/resources/images/duigou.png"/><br><button class="setDefBtn">设为封面</button>',
    '</div>',
    '</tpl>',
  '</tpl>',{
    isDefault: function(id) {
      var specImg = _.find(specImages, {imgId:id});
      return specImg && specImg.isDefault
    },
    isSpecImg: function(id) {
      return !!_.find(specImages, {imgId:id})
    }
  }
);

为模板填充数据

tml.overwrite(imgbox, productImages);

通过事件代理来处理模板渲染出来的页面操作

var imgbox = Ext.get('productSpecImgContainer');
imgbox.on('click', function(event) {
  var div = event.target.parentNode;
  var imgIdStr = Ext.query('input', true, div)[0].value;
  console.log('设为封面--:' , imgIdStr);

  setDefaultCover(parseInt(imgIdStr), function() {
    var divs = Ext.Element.query('.spec-img-box');
    Ext.each(divs, function(box) {
      box.classList.remove('active')
    });
    div.classList.add('active');
  })
}, null, {delegate: 'button.setDefBtn'});

grid

双击编辑

配置可编辑 添加plugins 插件 配置保存取消两个按钮 以及事件监听 clicksToEdit 配置点击几下进入编辑状态 一下为部分代码,用以示意

{
  xtype: 'grid',
  reference: 'productSpecGrid',
  width: 900,
  minHeight: 300,
  store: {
    type: 'productSpec'
  },
  tbar: [
    {
      text: '新增规格',
      iconCls: 'fa fa-plus',
      handler: 'addNewSpec'
    }
  ],
  plugins: [
    {
      ptype: 'rowediting',
      clicksToEdit: 2,

      //clicksToMoveEditor: 1,
      saveBtnText: '保存',
      cancelBtnText: "取消",
      listeners: {
        edit: 'productSpecEditFun',
        cancelEdit: 'cancelProductSpecEdit'
      }
    }
  ],
  columns: [
  ...
  ...

取消按钮实现效果如下:

cancelProductSpecEdit: function(rowEditing, context) {
  var store = this.lookupReference('productSpecGrid').getStore();
  if (context.record.phantom && !context.record.data.name) {
    store.remove(context.record);
  }
}

grid 通过rowIndex 获取record checkcolumn 改变事件

先获取grid 然后getStore() 然后getAt(rowIndex) 就可以了

{
  xtype: 'checkcolumn',
  width: 100,
  text: '是否上架',
  dataIndex: 'isOnSale',
  listeners: {
    checkchange: function(com, rowIndex, checked) {
      var obj = com.up('grid').getStore().getAt(rowIndex).data;
      console.log(obj.id, '---checked', checked);
      // todo 发请求
    }
  },
  editor: false
},

为grid添加搜索框

tbar: [
  {
    width: 400,
    fieldLabel: '搜索订单',
    labelWidth: 65,
    reference: 'searchWord',
    xtype: 'textfield'
  },
  {
    text: '搜索',
    handler: 'searchOrder'
  }
],

window 弹出框

通过window实例可以传值,如

var imgWin = Ext.create({ xtype: 'product-img'});
imgWin.productId = productId;
imgWin.show()

获取值:

var view = this.getView(),
  productId = view.productId;

查询

通过ietmId 或 Id 查询组件对象

Ext.ComponentQuery.query('product-spec-img')[0].specId;

总结

当时项目做的东西不是很多,项目不算大,所以遇到的问题不算多,问题也不是很高深, 但是一些基本的需求差不多都能覆盖到,就算你遇到什么问题,也可以查文档来解决的。 当时一个感触就是很多问题官方文档或论坛上都能找到。

厚颜一下 ~^_^~

赏赐