Extjs 4.0.7 中经验总结(--持续更新)

1、treepanel 的动态加载

   var treeStore1 = Ext.create('Ext.data.TreeStore', {
        autoLoad : true,
        proxy: {
            type: 'ajax',
            url: 'ashx/GetErptreeJson.ashx'    //指名该连接即可,系统会自动加上'ashx/GetErptreeJson.ashx?node='01' 参数,只要在该网页中处理即可。
        },
        root: {
            nodeType: 'async',
            text: 'Erp管理菜单',
            id: '00',                          //指名首次node参数为‘00’,既ashx/GetErptreeJson.ashx?node='00'
            expanded: true
        }
    });

json 格式:

[{id:'01-02-01',text:'testform1',qtip:'js/xxx.js',qtitle:'xxx.js',url:'xxx.htm',leaf:true},{id:'01-02-01',text:'testform1',qtip:'js/xxx.js',qtitle:'xxx.js',url:'xxx.htm',leaf:true}]


2、viewreport 中 center Tab页中GridPanel 宽度没有自动适应解决

    var grid = Ext.create('Ext.grid.Panel', {
        store: 'DataStore',   //'DataStore',JsonStore
        selModel: sm,         //---checkbox 模式
        collapsible: false,
        iconCls: 'icon-grid',
        frame: true,           //显示Grid整个框架
        height: 700,
        region:'center',   //指定该参数即可

        。。。。


3、GridPanel 显示json数据格式

    Ext.define('MyData', {
        extend: 'Ext.data.Model',
        fields: [{ name: 'FormID',type: 'string'}        //指明 int类型 ,在排序时将按数字大小排序
        , 'FormName'
        , { name: 'FormCode', type: 'string' }
        , { name: 'WebPath', type: 'string' }
        ]
    });

    var mystore = Ext.create('Ext.data.Store', {
        storeId: 'DataStore',
        pageSize: 50,
        autoLoad: true,
        model: 'MyData',
        sorters: ['FormID'],  //['FormID', 'FormName'],
       
        sortInfo: { field: 'FormID', direction: "DESC" },
        proxy: {
            type: 'ajax',
            url: 'ashx/system/Comm_Grant_FormJson.ashx',    //'../ashx/TestJobData.ashx','TestJsonData.json', 'JobData.json'  //'GetExtjsData.aspx?parm=List',     
            reader: {
                type: 'json',
                root: 'data',        //重点要指明实际数据的对象
                id: "FormID",
                totalProperty: 'totalCount'
            }
        }
    });


json文件格式:

{totalCount:30,success:true,error:"",singleInfo:"",data:[{"FormID":"01","FormName":"【物料管理】","FormCode":"","WebPath":""},{"FormID":"01-01","FormName":"〖基本资料〗","FormCode":"","WebPath":""}]}

4、Grid列锁定

 columns: [{
            text     : 'Company',
            locked   : true,
            width    : 200,
            sortable : false,
            dataIndex: 'company'
        }


5、字符串转日期对象函数

日期格式’2012-01-03 12:00:00‘  或 ’2012-01-03 8:00:00‘

Extjs转日期时需要的其中一种格式为’2012-01-03T12:00:00‘  或 ’2012-01-03T8:00:00‘,该字串可直接转为日期对象.所以有了以下函数,

由于日期格式中小时位置,SQL返回是有一位或两位,转日期

  function StrToDate(_datestr){
              var _newdate = _datestr;
            if (_newdate.length==18){
                    _newdate = _newdate.replace(' ','T0');                
            }
            else{
                       _newdate = _newdate.replace(' ','T');
            }
            var _dt = new Date(_newdate);
            return _dt
  }

  应用赋值如下:
          Docnum_Upd_Form.getForm().findField('UseDate').setValue(StrToDate(_rec.get('UseDate')));


6、数字格式在gridpanel中的简单设置

                renderer:Ext.util.Format.numberRenderer('0,000.00'),

                保留几位小数和是否用千分位都可以在此设置,但字段类型要int或float类型。


7、改变日期格式、格式化日期

    如果json 传过来的日期格式‘2013-05-03 12:01:01’的字符串时,想在接收的时候变为日期型

     可以通过定义数据模型时,确定好格式就变成date型

    { name: 'PODate', type: 'date' ,dateFormat:'Y-m-d H:i:s'}  

   有些格式是这样的:dateFormat:'Y-m-d\\TH:i:s'

                gridpanel 外面用 Ext.util.Format.date(new Date(), 'Y-m-d')

                                  内部用 renderer: Ext.util.Format.DateRender('Y-m-d'),


8、控件是Extjs控件,点击后将背景色更换为其他图片
new Ext.Button ({
   scale:'Large',
    fieldLabel :'状态',
    iconAlign : 'left',
    id :'themeStatus',
    tag : 'Y',
    handler :function(button){
    if(button.tag =='G'){
       button.tag = 'Y';
      Ext.getDom(button.getId()).innerHTML ='图片';
     }elseif(button.tag=='R'){
          button.tag= 'G';
         Ext.getDom(button.getId()).innerHTML='图片'
      }elseif(button.tag=='Y'){
           button.tag= 'R';
          Ext.getDom(button.getId()).innerHTML ='图片';
     }
    }
})

如果用button的icon来设置,icon只是设置了标识,会非常非常小,所以,如果要设置背景色的话就要用button的html属性来设置。


9、Extjs 的 TextField 后面加上红星标记

var nameField=new Ext.form.TextField({
fieldLabel: 'Name',
allowBlank:false
});
nameField.on('render',addRedStar);
function addRedStar(obj)
{
var font=document.createElement("font");
font.setAttribute("color","red");
var redStar=document.createTextNode('*');
font.appendChild(redStar);   
obj.el.dom.parentNode.appendChild(font);
}


10、两种方式给formpanel赋值

    1。formpanel数据源和grid相同,使用 Form.getForm().loadRecord(row);则数据便可自动加载在formpanel中对应的控件。

    2。formpanel数据源是单独的,则store传入到formpanel页面后,还需要手动将formpanel中的每个控件用value赋值。


11、TextField 不显示框体,只显示下划线样式

     fieldDefaults: {
        defaultType: "textfield",
        labelAlign: 'right',
        labelStyle:'color:blue;',
        fieldStyle:'background:none; border-right: 0px solid;border-top: 0px solid;border-left: 0px solid;border-bottom: #000000 1px solid;',
        labelWidth: 70
     },


     另外,当下划线和文本框样式如何相互转换:(提示是否编辑状态用)

            SetFormValue:function(){
                     me.getForm().loadRecord(me._TmpRec);
                     //设置显示项
                    if ( me._TmpRec.get('ItemType')=='S' ) {
                            me.getForm().findField('PartDesc').setReadOnly(false);
                            me.getForm().findField('PartDesc').setFieldStyle('background:white;border-right: #94a9bc 1px solid;border-top: #94a9bc 1px solid;border-left: #94a9bc 1px solid;border-bottom: #94a9bc 1px solid');
                    }
                    else{
                            me.getForm().findField('PartDesc').setReadOnly(true);
                            me.getForm().findField('PartDesc').setFieldStyle('background:none; border-right: 0px solid;border-top: 0px solid;border-left: 0px solid;border-bottom: #94a9bc 1px solid');
                    }                                             
           }

12、GridPanel 中判断是否有记录选择

       1、如果单选请注释掉     //selModel: Ext.create('Ext.selection.CheckboxModel')   //---checkbox 模式

       2、判断方式:

         if ( me.getSelectionModel().hasSelection() ){    //判断是否有选中
                         var _RecVender = me.getSelectionModel().getSelection()[0];    //获得当前记录
                         if (PO_Head_Upd_Frm.isHidden()){  //是否当前窗口打开
                                PO_Head_Add_Frm.items.items[0].getForm().findField('SaleTel').setValue(_RecVender.get('VTel'));
                         }

                         else{
                                PO_Head_Upd_Frm.items.items[0].getForm().findField('SaleTel').setValue(_RecVender.get('VTel'));
                         }
         else{
                        Ext.Msg.alert('提示','请选择一个项目!');
         }


13、根据窗口大小改变 控件的窗体大小

Ext.onReady(function () {
    Ext.QuickTips.init();
    Ext.BLANK_IMAGE_URL = '/images/s.gif';
    //Ext.Msg.alert('提示信息', '测试!');
   //var CurrencyStore1 = new Ext.create('CurrencyStore');
    MainFrm.render(Ext.getBody());
    //设置初始值
    Ext.getCmp('SPC_MainFrm').setWidth(window.innerWidth);
    Ext.getCmp('SPC_MainFrm').setHeight(window.innerHeight);                            
    Ext.getCmp('SPC_Grid').setWidth(window.innerWidth-50);
    Ext.getCmp('SPC_Grid').setHeight(window.innerHeight-100);
    //添加侦听事件
    Ext.EventManager.onWindowResize(function(){
        //console.log('-------');
        MainFrm.setHeight(window.innerHeight);
        MainFrm.setWidth(window.innerWidth);
        Ext.getCmp('SPC_Grid').setWidth(window.innerWidth-50);
        Ext.getCmp('SPC_Grid').setHeight(window.innerHeight-100);                            
    })

    setTimeout(function () { Ext.get('loading').remove(); Ext.get('loading-mask').fadeOut({ remove: true }); }, 2000);
})

14、如何该ComboBox设置起始值

前提:

1、autoLoad:true,一定要设置autoLoad的值为true,否则显示的是value 而不是text
2、一定要添加监听事件:comboBox一定要设置id;用setValue方法为其设置选中值的value,对应的就是store中选项!

Ext.define('ST_YMListStore', {
    extend: 'Ext.data.Store',
    model: 'ST_YMListData',
    autoLoad:true,
    proxy:{
            type:'ajax',
            url:'/ashx/erp/stock/St_MainStock_YMList.ashx',
            reader:{
                type:'json',
                root:'data',
                id:'YM',
                totalProperty:'totalCount'
            }
    },
    listeners :{
        load:function(){
            Ext.getCmp('FindYM').setValue(this.getAt(0).get('YM'));
        }
    },
    successProperty: 'success' // 后台传输的标识。必须  
});


15、补齐位数函数

String.leftPad(val,5,"0"); 


16、替换函数

         var RedLineRenderer = function(val, p, r){
              var re = new RegExp('---', 'g');    //正则表达式 g代表全局替换
              var tmpstr = val.replace(re, '---');   //让字符串中的---显示成红色
             return tmpstr;
         }


20、学习控件网页

    http://try.sencha.com/extjs/4.1.0/

你可能感兴趣的:(Extjs)