Extjs-拾贝

130-Web语言 同时被 2 个专栏收录
213 篇文章 0 订阅
3 篇文章 0 订阅

Extjs Ajax错误-Resource interpreted as Script but transferred with MIME type text/html

用ST(Sencha Touch2.1.1)时,Ext.data.JsonP.request({...}) 请求数据的时候,报出了下图的警告,但是数据还是返回了, 我返回的数据形式是: Ext.callback1({name: 'camnpr', site: 'www.camnpr.com'})
我用script做ajax跨域,请求返回的是个文本字符串,chrome提示:
Resource interpreted as Script but transferred with MIME type text/html.
(请求的是script文件,返回的却是个文本格式)
貌视chrome浏览器比较认这个格式~,去掉<!DOCTYPE html>就行了。

Ajax 调用

1.//异步ajax调用 
2./**
3. * 异步调用ajax,成功后返回值,作为回调函数的参数 调用失败会提示
4. * 
5. * @param {}
6. *            urlStr
7. * @param {}
8. *            paramsObj
9. * @param {}
10. *            callbackFunc
11. */ 
12.function ajaxCall(urlStr, paramsObj, callbackFunc) { 
13.    Ext.Ajax.request({ 
14.                url : urlStr, 
15.                params : paramsObj, 
16.                method : 'POST', 
17.                success : function(response) { 
18.                    if (callbackFunc) { 
19.                        var result = Ext.util.JSON 
20.                                .decode(response.responseText); 
21.                        var cbfn = callbackFunc.createCallback(result); 
22.                        cbfn(); 
23.                    } 
24.                }, 
25.                failure : function() { 
26.                    Ext.Msg.alert("提示", "方法调用失败"); 
27.                } 
28.            }); 
29.} 
30.//同步ajax调用 
31./**
32. * 同步ajax调用 返回json Object
33. * 
34. * @param {}
35. *            urlStr
36. * @param {}
37. *            paramsStr 为字符串键值对形式“key=value&key2=value2”
38. * @return {} 返回json Object
39. */ 
40.function ajaxSyncCall(urlStr, paramsStr) { 
41.    var obj; 
42.    var value; 
43.    if (window.ActiveXObject) { 
44.        obj = new ActiveXObject('Microsoft.XMLHTTP'); 
45.    } else if (window.XMLHttpRequest) { 
46.        obj = new XMLHttpRequest(); 
47.    } 
48.    obj.open('POST', urlStr, false); 
49.    obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
50.    obj.send(paramsStr); 
51.    var result = Ext.util.JSON.decode(obj.responseText); 
52.    return result; 
53.}  


6.Ext Ajax 异步调用
    Ext.Ajax.request({ 
                url : urlStr, 
                params : paramsObj, 
               method : 'POST', 
                success : function(response) { 
                    if (callbackFunc) { 
                        var result = Ext.util.JSON 
                                .decode(response.responseText); 
                        var cbfn = callbackFunc.createCallback(result); 
                        cbfn(); 
                    } 
                }, 
                failure : function() { 
                    Ext.Msg.alert("提示", "方法调用失败"); 
                } 
           }); 
}  

Toolbar Button

在创建Toolbar.Button对象时,设置id:'123'。用Ext.get('123')得到Toobar.Button对象.想要隐藏就使用setDispalyed(boolean)方法最好。用hide和show方法都有问题。

tree

4. tree 刷新
treeLoader.load(root)

3. Ext tree col 不能使用class

2. Ext.get().dom.readOnly

1. tree 的ttbar的位置在column的下面

解决方案是把tree放在另外一个panel中

tree自动展开
tree.getRootNode().expand(true,true); 

expanded: true,


button

添加Panel的button
                tools:[{
                  id:'close',
                  on:{
                     click: function(){
                       this.hide();
                     }
                   }
                }]

Store

ajax store获取数据前传递参数给后端

valueStoreArr[i].on('beforeload', function(s, o) { 
      var inputvalueArry = Ext.query("form input");
      if(inputvalueArry!=null&&inputvalueArry.length>0)
      {
         for(i=0;i<inputvalueArry.length;i++)
         {
            var sname = inputvalueArry[i].name;
            var svalue = inputvalueArry[i].value;
            var stype = inputvalueArry[i].type;
            if(stype!=null&&(stype.toLowerCase()=="text"||stype.toLowerCase()=="hidden"))
            {
              if(sname!=null&&sname!="sdrcAttributeName")
              {
                s.proxy.extraParams[sname] = svalue; 
              }
            }
         }
      }

Ext 3.0
2. store的创建
 var store = new Ext.data.Store({
   autoLoad:true, //页面load完成就把这个值取出来
   proxy:new Ext.data.HttpProxy({
     url: ''
   }),
   render:new Ext.data.JsonReader({
     fields:['','']
   }),
 });


3. baseParams的传入
给store 加上
           listeners: {
            beforeload: function(){              
                for(j=0;j<dynamicdropSelArry.length;j++)
                {
                  var sname = dynamicdropSelArry[j].name;
                  var svalue = dynamicdropSelArry[j].value;
                  var stype = dynamicdropSelArry[j].type;
                  if(sname!=null&&sname!="sdrcAttributeName"&&sname!=dynselId)
                  {
                     this.baseParams[sname] = svalue; 
                  }
          
               }
             }
           }
4.  customSelComboArr[j].clearValue();
    customSelComboArr[j].store.load();


6. Ext.Ajax.timeout=900000; (超时为十五分钟,单位为毫秒,默认是30秒) 
timeout: 600000,

 Combobox

5. jsp替换 combox效果


6.Ext.override(Ext.form.ComboBox, {//重写 EXT的ComboBox组件
        beforequery : function(e) {//重写beforequery方法 ,ComboBox本身没有这个方法 ,只是留了个监听 在执行查询时执行该方法 ,如果返回FALSE就不执行查询
                var combo = e.combo;
                if (!e.forceAll) {
                        var value = e.query;
                        combo.store.filterBy(function(record, id) {
                                                var text = record.get(combo.displayField);
                                                return (text.indexOf(value) != -1);
                                        });//对combo的store进行过滤 
                        combo.expand();
                        return false;
                }
        },
        onKeyUp : function(e) {//控制键盘KEYUP事件,,看里面很多固定 的id((this.id == "enterprise_name"),this.id == "factory_name"....),估计这个类已经 跟业务绑定比较多了
                if (this.editable !== false && !e.isSpecialKey()) {
                        if (!this.isExpanded()) {
                                this.onTriggerClick();
                                this.selectText(this.getRawValue().length,
                                                this.getRawValue().length);
                        }
                        this.store.removeAll();
                        if (this.id == "enterprise_name") {
                                this.store.reload({//重新加载这个combo的store
                                                        params : {//加载时传入的参数
                                                                enterprise_name : this.getRawValue()
                                                        }
                                                })
                        } else if (this.id == "factory_name") {
                                if (Ext.get("enterprise.jdcc_ent_id").dom.value != "") {
                                        this.store.reload({
                                                params : {
                                                        jdcc_ent_id : Ext.get("enterprise.jdcc_ent_id").dom.value,
                                                        factory_name : this.getRawValue()
                                                }
                                        })
                                }
                        } else if (this.id == "product_name") {
                                if (Ext.get("factory.jdcc_ent_fac_id").dom.value != "") {
                                        this.store.reload({
                                                                params : {
                                                                        jdcc_ent_fac_id : Ext
                                                                                        .get("factory.jdcc_ent_fac_id").dom.value,
                                                                        product_name : this.getRawValue()
                                                                }
                                                        })
                                }
                        }


                        
                        //感觉这里会出现问题,因为store是异步加载的,上面执行查询,这里又直接 调用 那肯定不是找到RELOAD后的STORE数据了
                        var index = this.store.find(this.displayField, this.getRawValue());
                        
                        //设置值
                        if (index !== -1) {
                                
                                this.select(this.store.getCount() - 1);
                                this.select(index, true);
                        } else {
                                this.select(0, true);
                                this.setValue(this.getRawValue());
                        }
                }
        }
});




Ext.QuickTips.init(); //写例子中,去掉这么没发现什么变化呀.那么它到底起的什么作用呢
这是用于Ext消息提示的,起到初始化作用,否则无法提示


Ext.form.Field.prototype.msgTarget = 'under'; //如果我把under改成side的时候,它就只显示提示图片了,文件却不显示了 
这是表单提示方式under是在表单域下面提示,side是在表单域右边显示图片(鼠标放在图片上有文字提示),qtip是在表单中弹出提示。


var required = new Ext.form.TextField({ 
//如果我不加下面这句的话,上面那个设成under,side就什么都不会显示了,查它的api,没有找到allowBlank呀 
allowBlank:false 
}); 
提示的前提是有规则的,否则只要定义了提示,所有表单都提示了,allowBlank就是一个规则,表示不允许为空,当为空的时候就提示,api有这个配置选项,你查询TextField就能看到


还有一点就是 
Ext.form.Field.prototype.msgTarget 
在文档里怎么没有找到Field下面的prototype呀
prototype在JavaScript里面表示属性的意思,是JS的关键字,所以你应该查询Field的msgTarget


grid.getSelectionModel().getSelected().data.doubleAtt; 
grid.getSelectionModel().getSelected().data.id
这个要多级查询API
getSelectionModel是获得SelectionModel(你可以查询RowSelectionModel)
SelectionModel有一个方法是getSelected(),返回的是Record
接着查询Record,会看到有一个Data属性,返回的是Object,也就是说是一个对象,那么对于data.doubleAtt和data.id就很好理解了,data.doubleAtt返回属性为doubleAtt的值,data.id返回属性为id的值

tree grid


tree grid 添加一行
                                    var rootNode = store.getRootNode();
                                        //rootNode.appendChild({"mtDlvSerialId":"G1_003","mtDlvrName":"<a href='#'>Check Item New</a>","mtDlvrCmpStatus":"<span style='FONT-FAMILY:Webdings;padding:0;color:green'>n</span>","mtDlvrPlanner": "ivy.liao,binbon.chen,lj.chao","mtStep100User": "ivy.liao","mtStep200User":"ivy.liao","mtStep300User": "ivy.liao","mtStep400User": "ivy.liao","sdTaskStartDate": "2013/09/13","mtActualDueDate": "","mtGateStatus": "","mtMilDlvrCompDate": "","leaf": true});                                                
                                        //treeGrid.reconfigure(store,cols);
                                        //hideGridCols(treeGrid);                        
                            var newRecord = Ext.create('MatrixDlv',
                                    {"sdDlvrName":text});
                                        //rootNode.appendChild({"sdDlvrName":"Deliverable Name"});
                            rootNode.appendChild(newRecord);
                                        var rowEditor = treeGrid.getPlugin('rowplugin');
                                        rowEditor.startEdit(newRecord,0);

tree 加上这个的话, 会把浏览器默认的弹出菜单禁用掉


                 listeners: {
                   itemclick: function(view,rec,item,index,eventObj){
                       //treeItemClick(view,rec,item,index,eventObj);
                   }
                 ,itemcontextmenu: function(view, rec, node, index, e) {
                      //showTreeContextMenu(view, rec, node, index, e);
                      //e.stopEvent();
                      //treeContextMenu.showAt(e.getXY());
                     return false;
                 }
                }
                });


filter

filter 的添加方法
        var filters = {
                ftype: 'filters',
                encode: false, // json encode the filter query
                local: false,   // defaults to false (remote filtering)
                filters: [{
                    //type: 'boolean',
                    dataIndex: 'mtSWItmId'
                }]
        };
        
        var gridPanel =  Ext.create('Ext.grid.Panel',{ 
                     id:'CriteriaSeaGrid',
                     height: 600,
                    store: gridStore,
                    features:[filters],

axex

 //use  this.axes[1].fields will fail, so use this way
                                        var leftAxexFields = [];
                                        var yDefArray = this.yDef;
                                        var AYFieldArray = this.AYField;        
                                        for(var i=0;i<yDefArray.length;i++)
                                        {
                                                leftAxexFields.push(yDefArray[i]);
                                        }
                                        for(var i=0;i<AYFieldArray.length;i++)
                                        {
                                                leftAxexFields.push(AYFieldArray[i]);                                
                                        }                
                                        this.axes[1].fields = leftAxexFields; 

chart 共用坐標


柱狀圖的多顏色

buffer: 200,   


                        iChart.series.items[0].listeners.itemmousedown=
                        {
                                buffer: 500,
可以控制點擊的時間間隔

listener 中的buffer 可以防止段时间内多次别点击 
                               buffer: 500,
                                fn:function(chartItem){

Legend 的 Display 可以通过设置 title 来修改
iChart.series.items[1].title ="11";

Sencha cmd

Sencha cmd


sencha -sdk sdk compile \
    exclude -namespace Ext.chart and \
    concat ext-all-nocharts-debug-w-comments.js and \
    -debug=true \
    concat -strip ext-all-nocharts-debug.js and \
    -debug=false \
    concat -yui ext-all-nocharts.js




实例:


D:>sencha -sdk extjs compile -deb
ug=false concat -yui extjs\test\cmd\ext-all.js


排除Ext.chart
D:>sencha -sdk extjs compile excl
ude -namespace Ext.chart and -debug=false concat -yui extjs\test\cmd\ext-all-noc
harts.js


include -namespace Ext.grid,Ext.chart


1. Each JavaScript source file should contain one Ext.define statement at global scope.
    2. The name of a source file matches the last segment of the name of the defined type such as the name of the source file containing Ext.define("MyApp.foo.bar.Thing", ... is "Thing.js".
    3. All source files are stored in a folder structure that is based on the namespace of the defined type. For example, given Ext.define("MyApp.foo.bar.Thing", ..., the source file is in a path ending with "/foo/bar".


文件名必须和 Class 命名相同。

SenchaCmd  是 SenchaSDKTools  的升级版


sencha compile -classpath=extjs/src,js page -yui -in index.html -out build/index.html
以上命令可以把需要的代码全部放入 all-classes.js 一个文件中。
<html>
<head>
    <title>Hello Ext</title>


        <!-- <x-compile> -->
          <!-- <x-bootstrap> -->
            <script src="ext/ext-dev.js" type="text/javascript"></script>
          <!-- </x-bootstrap> -->


            <script src="js/app.js" type="text/javascript"></script>
        <!-- </x-compile> -->
</head>
<body></body>
</html>


style

 "rtl" (right-to-left)


加入CSS 
createStyleSheet




动态加入CSS文件
swapStyleSheet


        if(Ext.get('userSelect')==null)
        {
                Ext.util.CSS.swapStyleSheet('userSelect','css/UserSelectWindow.css');
        }   

页面导入

看起来extjs 的 tab url load 会把 注释的部分的文件也load 进来
  <!-- <script type="text/javascript" src="../mediatek/com/include/BasicInclude.js"></script>
 <script type="text/javascript" src="../mediatek/com/include/JQueryInclude.js"></script>
 <script type="text/javascript" src="../mediatek/com/include/ExtjsInclude.js"></script>
 <script type="text/javascript" src="../mediatek/gte/js/DeliverableMartrix.js"></script>
 <link href="../mediatek/gte/css/martrix.css" rel="stylesheet" type="text/css"/> -->
js 会导入
css  不会导入

Extjs 中文站


http://extjs.org.cn/node/535

Ext.require

Ext.require 有缓存
Ext.Loader.loadScript({ url: scriptpath,scope:this}); 没有缓存
  
Ext.require 也可以直接导入js

people selector

people selector 兼容


以下方式在关闭一次之后看上去会有问题。


return {show:function(){},setWidth:function(){},isFloating:function(){return false},hide:function(){},isVisible:function(){},el:{removeCls:function(){}}};


应该使用以下方法:


    getPicker: function() {
        var me = this;
        return me.picker = me.createPicker();
    },
    createPicker: function() {   
            showUserSelWindow(this);
           //fix js error           
            return {show:function(){},setWidth:function(){},isFloating:function(){return false},hide:function(){},isVisible:function(){},el:{removeCls:function(){}}};
        }


以下是最终版


Ext.define('Ext.ux.TextfieldUser', {
    extend: 'Ext.form.field.Picker',
    alias: 'widget.textfielduser',
    xtype: 'textfielduser',
    triggerCls : 'user',
    //isExpanded : true,
    //expand: function(){
    //},
    getPicker: function() {         
            showUserSelWindow(this);
            return null;
    },
    createPicker: function() {   
        },
    expand: function() {
            var me = this,
        bodyEl, picker, collapseIf;
            try{
                if (me.rendered && !me.isExpanded && !me.isDestroyed) {
                    me.expanding = true;
                    bodyEl = me.bodyEl;
                    picker = me.getPicker();
                    collapseIf = me.collapseIf;
            
                    
                    picker.show();
                    me.isExpanded = true;
                    me.alignPicker();
                    bodyEl.addCls(me.openCls);
            
                    
                    me.mon(Ext.getDoc(), {
                        mousewheel: collapseIf,
                        mousedown: collapseIf,
                        scope: me
                    });
                    Ext.EventManager.onWindowResize(me.alignPicker, me);
                    me.fireEvent('expand', me);
                    me.onExpand();
                    delete me.expanding;
                }                      
            }catch(e)
            {
                    
            }         
    }
});

性能

1. 基本的类一次性加载, 大小在 1m 左右
2. 客制化的进行动态加载
3. 看上去在一定的时间内不会重复加载   
 Ext.require(['App.ux.MusicWin'],function(){
                var s = new App.ux.MusicWin();
                s.play();
 });
4. CSS 压缩

http://www.blogjava.net/paulwong/archive/2011/04/21/348750.html

Extjs 动态导入:
1. 
Ext.Loader.setConfig({enabled:true,paths:{'App.ux':'lib'}}); 
function play()
{
        Ext.require(['App.ux.MusicWin'],function(){
                var s = new App.ux.MusicWin();
                s.play();
        });
}






Ext.Loader.setConfig("disableCaching", false); 


日期

format:'\\\WyW', 
在日期 Date 使用这样的格式可以得到  W1345 这样的数字。
oW

混合


目前看起来, chart save 还不能指定文件名
除非放在url 中


Extjs 设置 typeAhead 则会有自动带出选择项的功能
Extjs 的 Commobox key 入字符自动带出选择项看上去要字符大于等于 4的时候才会自动弹出。


minChars         Number         


下拉表框字段选择当前用户需要输入的最小字符数量


queryMode="remote"默认为4


queryMode="local"默认为0


editable=false会使自动完成功能失效






Form layout :  位于 layout.container 下


anchor  -- default
vbox
hbox 

tab

嵌套tab , 某个tab 下又有一个form, form 中有date, combobox.
tab 切换会导致 date 和combobox 无法点击, 只在IE下会出现此问题

混合

combobox 的 queryCaching 设置是否每次都从服务器取数据


★★★
         Ext.define('User', {
             extend: 'Ext.data.Model',
             fields: [
                 {name: 'firstName', type: 'string'},
                 {name: 'lastName',  type: 'string'},
                 {name: 'age',       type: 'int'},
                 {name: 'eyeColor',  type: 'string'}
             ]
         });
         
         var comboStore = Ext.create('Ext.data.Store', {
             //model: 'User',
             fields: ['firstName', 'lastName'],
             data : [
                 {firstName: 'Ed',    lastName: 'Spencer'},
                 {firstName: 'Tommy', lastName: 'Maintz'},
                 {firstName: 'Aaron', lastName: 'Conran'},
                 {firstName: 'Jamie', lastName: 'Avins'}
             ]
         });


combox 使用 model: 'User', 这种定义的store 会产生indexOf  的错误, 必须使用 fields.
但是,如果使用ajax 的方式的话, 用model: 'User' 又是可以的








下拉框可以直接使用以下方式
store = ['',''];


Panel 的 frame 设置为true 会导致边框变粗


inputWidth 可以设置form field 输入框的长度


flex 定义grid 的相对宽度。






stateful 这个配置就是缓存。 下一次打开页面会保存。


有lock 的 grid 有两个view 
lockedView 和normalView
gridViewId = treeGrid.getView().lockedView.getId();




找不到tab 中的js ,以 include 方式导入的
tab panel 以load 的方式得到


var grid = Ext.create('Ext.grid.Panel',{
  plugins:[Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 2,
    pluginId:'cellplugin'
  })]
});


//later on:
var plugin=grid.getPlugin('cellplugin');




deferEmptyText : 直到store 第一次load之后才显示空值的信息




position:relative 在IE下 这个会导致ext js 的组件消失


<!--[if IE]>
<style>
 .form-div{max-width:100%;position:static !important;overflow:auto}
</style>
<![endif]-->


class="x-hide-display"
<div id="west" class="x-hide-display">


速度提升建议:
1.hide 栏位不要设置成可以editor
2.editor 栏位尽量显示


grid 如果已经有col(应该是有hide的col) 再执行reconfig 的话会出现hasEditor 的错误。
第一次定义的时候不能设置columns




对grid的col 进行hide方法,会导致速度很慢
看上去是会进行全局layout 


.x-grid-dirty-cell
可以设置栏位有被修改过


Value  Description
-----  -----------------------------
tl     The top left corner (default)
t      The center of the top edge
tr     The top right corner
l      The center of the left edge
c      In the center of the element
r      The center of the right edge
bl     The bottom left corner
b      The center of the bottom edge
br     The bottom right corner


得到header
grid.headerCt.getGridColumns



多选Checkbox

Ext.define('Ext.ux.MultiComboBox', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.multicombobox',
    xtype: 'multicombobox',
    initComponent: function(){
            this.multiSelect = true;
            this.listConfig = {
                      itemTpl : Ext.create('Ext.XTemplate',
                                  '<input type=checkbox>{value}'),
                        onItemSelect: function(record) {    
                                var node = this.getNode(record);
                      if (node) {
                         Ext.fly(node).addCls(this.selectedItemCls);
                         
                         var checkboxs = node.getElementsByTagName("input");
                         if(checkboxs!=null)
                         {
                                 var checkbox = checkboxs[0];
                                               checkbox.checked = true;
                         }
                      }
                        },
                        listeners:{
                                itemclick:function(view, record, item, index, e, eOpts ){
                                        var isSelected = view.isSelected(item);
                                        var checkboxs = item.getElementsByTagName("input");
                                        if(checkboxs!=null)
                                        {
                                                var checkbox = checkboxs[0];
                                                if(!isSelected)
                                                {
                                                        checkbox.checked = true;
                                                }else{
                                                        checkbox.checked = false;
                                                }
                                        }
                                }
                        }              
                  }           
            this.callParent();
    }
});


Ext.view.TableView


This is the base class for both Ext.grid.View and Ext.tree.View and is not to be used directly.


tab layout


tab layout, 自动扩充的方法
            region: 'center',
                        width: '100%',
                        height: '100%',                        
                        contentEl: 'maintabs',
                        listeners: {
                                resize: function(thisObj,iWidth, iHeight, oldWidth, oldHeight)
                                {          
                                        if (tabpanel!=null)
                                        {
                                                tabpanel.doLayout();        
                                                alert("11");
                                        }
                                }
                        }
initPage(thisObj,iWidth, iHeight, oldWidth, oldHeight);


        if (adjWidth > 0 &&Math.abs(adjWidth - jQuery('#featureList').width()) > 5)
        {
                        jQuery('#featureList').setGridWidth(adjWidth);
        }


var initPage=function(thisObj,iWidth, iHeight, oldWidth, oldHeight)
{                   
        var adjWidth = iWidth;
        adjWidth = adjWidth - 10; // Fudge factor to prevent horizontal scrollbars
        var docTree = Ext.getCmp("docTree");
        if(docTree!=null)
        {
                docTree.setWidth(adjWidth);
        }
};

Grid

Ext.Ajax 使用 Ext.decode 把 string 转成 js object


grid add column
          cols.push({
              text: 'Text',
              dataIndex: ''
          });           
          treeGrid.reconfigure(store,cols);






grid col 的 tooltip
              renderer :function(value, metadata,record) {
                      var disValue = value;
                      if(disValue!=null&&disValue.indexOf(",")>0)
                      {
                              disValue = disValue.replace(/,/g,"<br>");
                      }
                      metadata.tdAttr = 'data-qtip="' + disValue + '"';
             
                      
                      return "<a href=''>"+value+"</a>";
          }






grid 的 store 要给model 或是 field






grid 的col hearder 点击后变成可编辑的field
                      headerclick:function( ct, column, e, t, eOpts ){
                             // t.innerHTML = "<input style='height:15px' type=text value='2013/09/11'>";
                             //var spanId = t.id;   
                             if(column.isInEdit!=null&&column.isInEdit===true)
                             {
                                     
                             }else{
                                 var spanId = t.parentNode.id;
                                 //alert(spanId);
                                 
                                 var ddd = t.parentNode;
                                 t.parentNode.className = "";
                                 //alert(t.parentNode.className);
                                 //alert(t.parentNode.innerHTML);
                                 t.parentNode.innerHTML = "";
                                 
                                 var datefield = Ext.create('Ext.form.field.Date',{
                                               name: 'test',
                                               id: 'test',
                                               //format: 'm/d/Y',
                                               format:'Y/m/d',
                                               value:'2013/8/31',
                                               width:100,
                                               renderTo:spanId
                                 }); 
                                 column.isInEdit = true;
                             }
                             //alert(datefield.getEl());
                             //t.innerHTML = datefield;
                      }






要产生tooltip 先导入这句
 Ext.tip.QuickTipManager.init();




editRenderer: new Function("return this"),






Grid的 columns 的配置
如果配置align  为 left 和 right, 编辑是正常的
如果配置成center 的话, 编辑时会 变成 左对齐。
不知道这是否是Ext js 的bug
原因是:  107237 行只有 
if (column.align === 'right') {
                field.fieldStyle = 'text-align:right';
}
加上以下部分
            if (column.align === 'center') {
                field.fieldStyle = 'text-align:center';
            }
就能解决问题了。


extjs tree



http://extjs.org.cn/node/223
http://www.mysamplecode.com/2012/03/extjs-treegrid-column-checkboxes-menu_4119.html


store

store 中参数太多,就不能使用Get 方式了, 要使用POST 方式:


 actionMethods: {create: 'POST', read: 'POST'},
否则会报 :  htmlfile unknown name 等unkonwn 信息

loader


Ext loader    <!-- 不能使用 , 否则会 js 异常
    <SCRIPT LANGUAGE="JavaScript1.2">
      <!--
      function <%= buttonActionFn%>(buttonAction)
      {
      history.back();
      }
      // -->
      </SCRIPT>

混合

msg 的button可以重命名   


 Ext.get('mb10').on('click', function(){
        Ext.MessageBox.show({
            title: 'What, really?',
            msg: 'Are you sure?',
            buttons: Ext.MessageBox.YESNO,
            buttonText:{ 
                yes: "Definitely!", 
                no: "No chance!" 
            },
            fn: showResult
        });
    });




checkboxmodel 就可以使用check box 选择行




Tree前面的图标可以在json store 里面设置
iconCls




Tree的右键菜单。
必须调用e.stopEvent( ) , 否则同时会弹出浏览器的右键菜单效果
    tree.on('itemcontextmenu', function(thisTree, record, item, index, e, eOpts ){
        var menu1 = new Ext.menu.Menu({
            items: [
                    {
                    text: 'Open in new tab'
                }
            ]
        });
        
            //alert(node)
        //treePanelCurrentNode = node;
        //var x = e.getX();
        //var y = e.getY();
        //alert(x);
        //alert(y);
        menu1.showAt(e.getXY());
        e.stopEvent( )
   },this);
stopEvent( )
Stop the event (preventDefault and stopPropagation(停止传播))






Form 的 css设置 
            cls: 'mt-x-comp-body',
            bodyCls: 'mt-x-comp-body',
两个要同时设置
  


  var sprite100 = Ext.create('Ext.draw.Sprite', {
        type: 'text',
        x: 100,
        y: 100,
        id: 'circleText',
        font: '118px "monospace"',
        //style:{fontWeight: 'bold'},
        text: 'texttext'
    }); 
   
   Ext.create('Ext.draw.Component', {
        renderTo: Ext.getBody(),
        width: 200,
        height: 200,
        id: 'circleComp',
        items: [{
            type: 'circle',
            radius: 90,
            x: 100,
            y: 100,
            fill: 'blue'
            //,text: 'texttext'
        },sprite100]
    });


必须要这样否则, sprite100的text 替换不掉












Ext.baseCSSPrefix + 'menu-item-disabled'
x-menu-item-disabled










本地的store
            var selStore = Ext.create('Ext.data.Store',{                
                          model: 'User',
                      proxy: {
                                  type: 'memory',
                              reader: {
                              type: 'json',
                              //model: 'User',
                              root : 'persons',
                              totalProperty : 'totalCount',
                              idProperty : 'employee_id'
                          }
                      }
       });






store 的 proxy 的type 有
There are two main types of Proxy - Client and Server. The Client proxies save their data locally and include the following subclasses:


    LocalStorageProxy - saves its data to localStorage if the browser supports it
    SessionStorageProxy - saves its data to sessionStorage if the browsers supports it
    MemoryProxy - holds data in memory only, any data is lost when the page is refreshed


The Server proxies save their data by sending requests to some remote server. These proxies include:


    Ajax - sends requests to a server on the same domain
    JsonP - uses JSON-P to send requests to a server on a different domain
    Rest - uses RESTful HTTP methods (GET/PUT/POST/DELETE) to communicate with server
    Direct - uses Ext.direct.Manager to send requests








this.callParent([dd])
必须使用数组方式传入




 var today = Ext.util.Format(new Date(),this.format);
this.activeDate = Ext.Date.clearTime(date);




Ext.Date.format(dt, Ext.Date.patterns.ShortDate));  --. data 和 string 是否是同样的问题。
 


  String.format ==> Ext.String.format   
是否在Ext 3中扩充了这个方法




 Ext.menu.DateMenu.superclass.initComponent.call(this);  




   //this.picker.purgeListeners();   ==>
            //this.picker.purgeAllListeners();  
            this.picker.clearListeners();




使用W 的话,日期选择会是本周的第一天。


Ext.menu.DateMenu  == 》 Ext.menu.DatePicker




this.wrap.setWidth(this.el.getWidth() + allTriggerWidths); 这个该如何替换




 var tw = this.trigger.getWidth();   ==》
            var tw = this.getTriggerWidth();     




  //this.setValue = this.setValue.createSequence(this.updateHidden);
            this.setValue = Ext.Function.createSequence(this.updateHidden,this.setValue);


Ext.Function.createSequence   接下来执行的函数


Extend  ===> define




Ext.define('MyApp.CoolPanel', {
    extend: 'Ext.panel.Panel',
    alias: ['widget.coolpanel'],
    title: 'Yeah!'
});
reg     ==>   alias    




Extjs3 
Ext.version   ==>  Ext.getVersion().toString()






Ext.loader.setPath("","")


rootvisible 后无法显示


使用ajax 取tree 数据时, 如果节点设置成 leaf: false, 一定要加上 children配置,
否则当 children为空时, 会循环取。 配到expandAll 这种状况就挂了
                                                   docJsobj.put("leaf", false);
                                                    docJsobj.put("children", fileJsArray);


emptytext
deferEmptyText 
True to defer emptyText being applied until the store's first load


Extjs 传递中文参数--》 网络建议做法是前台,后台,文件都指定utf8编码, 需测试




不是分页的store ,getTotalCount 为  0, 使用getCount




Ext.Loader
Ext.Loader.setConfig({enabled: true}); 设置这个才能动态加载类
Whether or not to enable the dynamic dependency loading feature.




ViewPort 是container 的子类, 没有滚动条




Ext
view source
fly( dom, [named] ) : Ext.dom.Element.Fly2


Gets the singleton flyweight element, with the passed node as the active element.


getSelectionModel( ) 


selType: 'checkboxmodel',




Ext js 4 比Ext js 3要好, 就是不用在使用input -hidden 了 
        Ext.create('Ext.form.ComboBox', {
                inputId: 'mtAlignedMilstn2',
                name:'mtAlignedMilstn2',
            fieldLabel: 'Choose State',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            renderTo: cominputParent
           // renderTo: 'mtAlignedMilstn2'
        });
        
使用transform 不能设置 inputId






constrain:true, 限制window 不能拖出浏览器外


scripts : Boolean  loader 是否可以执行脚本


initComponent 和 Constructor 的区别


hbox 设置间距
                    layout: {
                        type: 'hbox',
                        defaultMargins: {top: 0, right: 5, bottom: 0, left: 0}
                    }




items: itemsjs, 这种方式需要指定xtype, Ext.action的xtype 不知道是什么?


Ext.useShims 用来遮挡,遮挡差别需研究
extjs3--> extjs4 的转变


comboInput.setVisibilityMode(2);  display


grid.getSelectionModel().clearSelections(); ==> deselectAll(


rowcontextmenu ==> cellcontextmenu( this, td, cellIndex, record, tr, rowIndex, e, eOpts )




Model 需要加上idProperty
                extend: 'Ext.data.Model',
                idProperty: 'employee_id',




store reader id --> idProperty 


getSelections( )==>getSelection( )


        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                dragText: 'Drag and drop to reorganize'
            }
        }, 
另外, 还要定义Ext.dd.DropTarget


grid rowdblclick ==> celldblclick


loadDepartment(r.get("site"));==>
site.on("select", function(cb, r, idx) {
              loadDepartment(r[0].get("site"));
          });


reader : new Ext.data.ArrayReader({}, ['dept'])
    proxy: {
        type: 'jsonp',
        url : httpServiceRoot + 'getDepts',
        reader: {
                type: 'array'
        }
        //callbackKey: 'theCallbackFunction'
    }




HTML sel :  applyTo -->  transform


   store.baseParams -->store.proxy.extraParams


1. Ext.reg ==> Ext.define
现在ExtJS使用Ext.define函数来创建组件类,该函数还能实现自动加载JS类(uses属性,需设置Ext.Loader为开启详见下文,看不懂看API),它会自动的完成以前的ns(namespace)功能。例如下面
Js代码  收藏代码


    Ext.ns("Foo.bar");  
      
    Foo.bar = Ext.extend(Ext.util.Observable,{  
            //your code here  
    });  
    Ext.reg("foobar",Foo.bar);  
所以现在创建一个组件应该是这样的:
Js代码  收藏代码


    Ext.define("Foo.bar",{  
            extend : "xxxxxx",  
            alias : "widget.foobar"  
            //your code here  
    });  




2.
现在ExtJS不再使用new关键字(当然你想用也没关系),而是推荐使用Ext.create函数来解决这个问题,例如以往我们创建一个组件的代码是
Js代码  收藏代码


    var win = new Ext.Window({  
            //some options  
    });  
而现在则是
Js代码  收藏代码


    var win = Ext.create("Ext.window.Window",{  
            //some options  
    });  




3. Ext.data.record==> Ext.data.Model


4.border 布局分为 东南西北

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值