zoukankan      html  css  js  c++  java
  • ExtJS笔记整理

    ExtJs使用总结(非常详细)-extjs

    一、获取元素(Getting Elements)
    1.Ext.get
    var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存
    2. Ext.fly
    var el = Ext.fly('myElementId')//不需要缓存。
    注:享元模式(Flyweight Design Pattern)是一种节省内存的模式,该模式的大概原理是建立单个全体对象然后不断反复使用它。
    3.Ext.getDom
    var elDom = Ext.getDom('elId'); // 依据id来查dom节点
    var elDom1 = Ext.getDom(elDom); // 依据dom节点来查dom节点

    二、CSS元素
    4.addClass
    Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式
    5.radioClass
    Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素,并移除其所有侧边(siblings)节点上的同名样式。
    6.removeClass
    Ext.fly('elId').removeClass('myCls'); // 移除元素的样式
    7.toggleClass
    Ext.fly('elId').toggleClass('myCls'); // 加入样式
    Ext.fly('elId').toggleClass('myCls'); // 移除样式
    Ext.fly('elId').toggleClass('myCls'); // 再加入样式
    8.hasClass
    if (Ext.fly('elId').hasClass('myCls')) {//判断是否已加上这个样式
    // 是有样式的……
    }
    10.replaceClass
    Ext.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式
    11.getStyle
    var color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。
    var zIndx = Ext.fly('elId').getStyle('z-index');//返回该元素的统一化当前样式和计算样式。
    12.setStyle
    Ext.fly('elId').setStyle({
    display : 'block',
    overflow : 'hidden',
    cursor : 'pointer'
    });//设置元素的样式,也可以用一个对象参数包含多个样式。
    13.getColor
    Ext.fly('elId').getColor('color');//为指定的CSS属性返回CSS颜色
    14.setOpacity

    Ext.fly('elId').setOpacity(.45, true);//设置元素的透明度。
    15.clearOpacity
    Ext.fly('elId').clearOpacity();//清除这个元素的透明度设置


    三、Dom游历
    16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red');
    17.is 测试当前元素是否与传入的选择符相符一致。

    复制代码 代码如下:


    var el = Ext.get('elId');
    if (el.is('p.myCls')) {
    // 条件成立
    }


    18.findParent
    定位于此节点,以此节点为起点,向外围搜索外层的父节点,搜索条件必须符合并匹配传入的简易选择符。
    Ext.fly('elId').findParent('div'); // 返回dom节点
    Ext.fly('elId').findParent('div', 4); // 查找4个节点
    Ext.fly('elId').findParent('div', null, true); // 返回Ext.Element
    19.findParentNode
    定位于此节点的“父节点”,以此节点的“父节点”为起点,向外围搜索外层的“父父”节点,搜索条件必须符合并匹配传入的简易选择符。
    Ext.fly('elId').findParentNode('div');
    20.up
    沿着DOM,向外围搜索外层的“父父”节点,搜索条件必须符合并匹配传入的简易选择符。
    Ext.fly('elId').up('div');
    Ext.fly('elId').up('div', 5); // 限5层的内查找
    21.select
    传入一个CSS选择符的参数,然后依据该CSS选择符从当前元素下面,形成期待匹配子节点的集合,也就是“选择”的操作,最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document可是搜索。
    // 返回结果的CompositeElement
    Ext.fly('elId').select('div:nth-child(2)');
    // 返回数组
    Ext.fly('elId').select('div:nth-child(2)',
    true);
    // 整个document都会搜索
    Ext.select('div:nth-child(2)');
    22.query
    进行一次query的查询,返回DOM 节点组成的数组。可选地第二参数设置为查询的起点,如不指定则为 document。
    // 返回dom节点组成的数组
    Ext.query('div:nth-child(2)');
    23.child
    基于送入的选择符,不限定深度进行搜索,符合的话选取单个子节点。
    Ext.fly('elId').child('p.highlight'); // 返回的类型是Ext.Element
    Ext.fly('elId').child('p.highlight', true); // 返回dom节点
    24.down
    基于该选择符,"直接"选取单个子节点。
    Ext.fly('elId').down('span'); // 返回的类型是Ext.Element
    Ext.fly('elId').down('span', true); // 返回dom节点

    25.parent
    返回当前节点的那个父节点,可选地可送入一个期待的选择符。
    // 返回父节点,类型是Ext.Element
    Ext.fly('elId').parent();
    // 返回父节点,类型是html dom
    Ext.fly('elId').parent("", true);
    // 返回父级节点,但一定要是div的,找到就返回,类型是Ext.Element
    Ext.fly('elId').parent("div");
    26.next
    获取下一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
    // 返回下一个侧边节点,类型是Ext.Element
    Ext.fly('elId').next();
    // 返回下一个侧边节点,类型是html dom
    Ext.fly('elId').next("", true);
    // 返回下一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element
    Ext.fly('elId').next("div");
    27.prev
    获取上一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
    // 返回上一个侧边节点,类型是Ext.Element
    Ext.fly('elId').prev();
    // 返回上一个侧边节点,类型是html dom
    Ext.fly('elId').prev("", true);
    // 返回上一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element
    Ext.fly('elId').prev("div");
    28.first
    获取第一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
    // 返回第一个侧边节点,类型是Ext.Element
    Ext.fly('elId').first();
    // 返回第一个侧边节点,类型是html dom
    Ext.fly('elId').first("", true);
    // 返回第一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element
    Ext.fly('elId').first("div");
    29.last
    获取最后一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
    // 返回最后一个侧边节点,类型是Ext.Element
    Ext.fly('elId').last();
    // 返回最后一个侧边节点,类型是html dom
    Ext.fly('elId').last("", true);
    // 返回最后一个侧边节点,但一定要是div的,找到就返回,类型是Ext.Element
    Ext.fly('elId').last("div");

    四、DOM操控(DHTML常见的一项任务就是DOM元素的增、删、改、查)
    30.appendChild
    把送入的元素归为这个元素的子元素。
    var el = Ext.get('elId1');
    // 用id指定
    Ext.fly('elId').appendChild('elId2');
    // Ext.Element添加
    Ext.fly('elId').appendChild(el);
    // 选择符组合地添加
    Ext.fly('elId').appendChild(['elId2','elId3']);
    // 直接添加dom节点
    Ext.fly('elId').appendChild(el.dom);
    // 添加CompositeElement,一组的div
    Ext.fly('elId').appendChild(Ext.select('div'));
    31.appendTo
    把这个元素添加到送入的元素里面。
    var el = Ext.get('elId1');
    // 'elId'添加到'elId2'里面
    Ext.fly('elId').appendTo('elId2');
    Ext.fly('elId').appendTo(el); //
    添加到Ext.Element el
    32.insertBefore
    传入一个元素的参数,将其放置在当前元素之前的位置。
    var el = Ext.get('elId1');
    // dom节点在前面插入
    Ext.fly('elId').insertBefore('elId2');
    //Ext.Element el在前面插入
    Ext.fly('elId').insertBefore(el);
    33.insertAfter
    传入一个元素的参数,将其放置在当前元素之后的位置。
    var el = Ext.get('elId1');
    // dom节点在后面插入
    Ext.fly('elId').insertAfter('elId2');
    // Ext.Element el在后面插入
    Ext.fly('elId').insertAfter(el);
    34.insertFirst
    可以是插入一个元素,也可以是创建一个元素(要创建的话请使用“DomHelper配置项对象”作为参数传入),总之,这个元素作为当前元素的第一个子元素出现。
    var el = Ext.get('elId1');
    // 插入的dom节点作为第一个元素
    Ext.fly('elId').insertFirst('elId2');
    // 插入的Ext.Element作为第一个元素
    Ext.fly('elId').insertFirst(el);
    // 用DomHelper配置项创建新节点,新节点会作为第一个子元素被插入。
    Ext.fly('elId').insertFirst({
    tag: 'p',
    cls: 'myCls',
    html: 'Hi I am the new first child'
    });
    35.replace
    用于当前这个元素替换传入的元素。
    var el = Ext.get('elId1');
    // 'elId'去替换'elId2'
    Ext.fly('elId').replace('elId2');
    // 'elId'去替换'elId1'
    Ext.fly('elId').replace(el);
    36.replaceWith
    用传入的元素替换这个元素。参数可以是新元素或是要创建的DomHelper配置项对象。
    var el = Ext.get('elId1');
    Ext.fly('elId').replaceWith('elId2'); // 'elId2'替换掉'elId'.
    Ext.fly('elId').replaceWith(el); //
    'elId1'替换掉'elId'
    // 用DomHelper配置项创建新节点,并用该节点换掉‘elId'。
    Ext.fly('elId').replaceWith({
    tag: 'p',
    cls: 'myCls',
    html: 'Hi I have replaced elId'
    });


    五、DomHelper配置项
    37.createChild
    传入一个DomHelper配置项对象的参数,将其创建并加入到该元素。
    var el = Ext.get('elId');
    var dhConfig = {
    tag: 'p',
    cls: 'myCls',
    html: 'Hi I have replaced elId'
    };
    // 创建新的节点,放到'elId'里面
    el.createChild(dhConfig);
    // 创建新的节点,居el第一个子元素之前
    el.createChild(dhConfig, el.first());
    38.wrap
    创建一个新的元素,包裹在当前元素外面。
    Ext.fly('elId').wrap(); // div包着elId
    // 用新建的一个元素来包着elId
    Ext.fly('elId').wrap({
    tag: 'p',
    cls: 'myCls',
    html: 'Hi I have replaced elId'
    });

    六、Html片断
    38.insertHtml
    插入HTML片断到这个元素。至于要插入的html放在元素的哪里,你可指定beforeBegin, beforeEnd, afterBegin, afterEnd这几种。第二个参数是插入HTML片断,第三个参数是决定是否返回一个Ext.Element类型的DOM对象。
    Ext.fly('elId').insertHtml(
    'beforeBegin',
    '<p><a href="anotherpage.html'>点击我</a></p>'
    ); // 返回dom节点
    Ext.fly('elId').insertHtml(
    'beforeBegin',
    '<p><a href="anotherpage.html'>点击我</a></p>',
    true
    ); // 返回Ext.Element
    39.remove
    从DOM里面移除当前元素,并从缓存中删除。.
    Ext.fly('elId').remove(); //
    elId在缓存和dom里面都没有
    40.removeNode
    移除document的DOM节点。如果是body节点的话会被忽略。
    Ext.removeNode(node); // 从dom里面移除(HTMLElement)


    七、Ajax
    41.load
    直接访问Updater的Ext.Updater.update()方法(相同的参数)。参数与Ext.Updater.update()方法的一致。
    Ext.fly('elId').load({url: 'serverSide.php'})
    42.getUpdater
    获取这个元素的UpdateManager。
    var updr = Ext.fly('elId').getUpdater();
    updr.update({
    url: 'http://myserver.com/index.php',
    params: {
    param1: "foo",
    param2: "bar"
    }
    });

    八、事件控制Event Handling
    43.addListener/on
    为此元素加入一个事件处理函数。on()是其简写方式。简写方式作用等价,写代码时更省力。
    var el = Ext.get('elId');
    el.on('click', function(e,t) {
    // e是一个标准化的事件对象(Ext.EventObject)
    // t就是点击的目标元素,这是个Ext.Element.
    // 对象指针this也指向t
    });
    44.removeListener/un
    从这个元素上移除一个事件处理函数。un()是它的简写方式。
    var el = Ext.get('elId');
    el.un('click', this.handlerFn);
    // 或
    el.removeListener('click', this.handlerFn);
    45.Ext.EventObject
    EventObject呈现了统一各浏览器的这么一个事件模型,并尽量符合W3C的标准方法。
    // e它不是一个标准的事件对象,而是Ext.EventObject。
    function handleClick(e){
    e.preventDefault();
    var target = e.getTarget();
    ...
    }
    var myDiv = Ext.get('myDiv');
    myDiv.on("click", handleClick);
    // 或
    Ext.EventManager.on('myDiv', 'click', handleClick);
    Ext.EventManager.addListener('myDiv', 'click', handleClick);

    九、高级事件功能
    46.委托delegation
    要使用事件委托的方式代替,在容器身上登记一个事件处理器,按照依附的逻辑选择:
    Ext.fly('actions').on('click, function(e,t) {
    switch(t.id) {
    case ''btn-edit':
    // 处理特定元素的事件具体过程
    break;
    case 'btn-delete':
    // 处理特定元素的事件具体过程
    break;
    case 'btn-cancel':
    // 处理特定元素的事件具体过程
    break;
    }
    });

    47.委托化delegate
    你在登记事件的处理器的时候可以加入配置这个选项。一个简易选择符,用于过滤目标元素,或是往下一层查找目标的子孙。
    el.on('click', function(e,t) {
    // 执行事件具体过程
    }, this, {
    // 对子孙'clickable'有效
    delegate: '.clickable'
    });
    48.翻转hover
    这是一个Ext的翻转菜单的实例:
    // handles when the mouse enters the element
    function enter(e,t){
    t.toggleClass('red');
    }
    // handles when the mouse leaves the element
    function leave(e,t){
    t.toggleClass('red');
    }
    // subscribe to the hover
    el.hover(over, out);
    49.移除事件句柄removeAllListeners
    在该元素身上移除所有已加入的侦听器。
    el.removeAllListeners();
    50.是否一次性触发single
    你在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。
    el.on('click', function(e,t) {
    // 执行事件具体过程
    }, this, {
    single: true // 触发一次后不会再执行事件了
    });
    51.缓冲buffer
    你在登记事件的处理器的时候可以加入配置这个选项。若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发,则原处理器句柄将不会被启用,但是新处理器句柄会安排在其位置。
    el.on('click', function(e,t) {
    // 执行事件具体过程
    }, this, {
    buffer: 1000 // 重复响应事件以一秒为时间间隔
    });
    52.延时delay
    你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后处理函数延时执行的时间。
    el.on('click', function(e,t) {
    // 执行事件具体过程
    }, this, {
    // 延迟事件,响应事件后开始计时(这里一秒)
    delay: 1000
    });
    53.目标target
    你在登记事件的处理器的时候可以加入配置这个选项。如果你想另外指定另外一个目标元素,你可以在这个配置项上面设置。这可保证在事件上报阶段中遇到这个元素才会执行这个处理函数。

    复制代码 代码如下:


    el.on('click', function(e,t) {
    // 执行事件具体过程
    }, this, {
    // 遇到里头的第一个'div'才会触发事件
    target: el.up('div')
    });

    十、尺寸&大小
    54.getHeight
    返回元素的偏移(offset)高度。
    var ht = Ext.fly('elId').getHeight();
    55.getWidth
    返回元素的偏移(offset)宽度。
    var wd = Ext.fly('elId').getWidth();
    56.setHeight
    设置元素的高度。
    Ext.fly('elId').setHeight();
    57.setWidth
    设置元素的宽度。
    Ext.fly('elId').setWidth();
    58.getBorderWidth
    返回指定边(side(s))的padding宽度。
    var bdr_wd = Ext.fly('elId').getBorderWidth('lr');
    59.getPadding
    可以是t, l, r, b或是任何组合。例如,传入lr的参数会得到(l)eft padding +(r)ight padding。
    var padding = Ext.fly('elId').getPadding('lr');
    60.clip
    保存当前的溢出(overflow),然后进行裁剪元素的溢出部分 - 使用unclip()来移除。
    Ext.fly('elId').clip();
    61.unclip
    在调用clip()之前,返回原始的裁剪部分(溢出的)。
    Ext.fly('elId').unclip();
    62.isBorderBox
    测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。
    if (Ext.isBorderBox) {
    //
    }

    十一、定位

    63.getX
    返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
    var elX = Ext.fly('elId').getX()
    64.getY
    返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
    var elY = Ext.fly('elId').getY()
    65.getXY
    返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
    var elXY = Ext.fly('elId').getXY() // elXY是数组
    66.setX
    返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
    Ext.fly('elId').setX(10)
    67.setY
    返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
    Ext.fly('elId').setY(10)
    68.setXY
    返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
    Ext.fly('elId').setXY([20,10])
    69.getOffsetsTo
    返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
    var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl);
    70.getLeft
    获取左边的X坐标。
    var elLeft = Ext.fly('elId').getLeft();
    71.getRight
    获取元素右边的X坐标(元素X位置 + 元素宽度)。
    var elRight = Ext.fly('elId').getRight();
    72.getTop
    获取顶部Y坐标。
    var elTop = Ext.fly('elId').getTop();
    73.getBottom
    获取元素的底部Y坐标(元素Y位置 + 元素宽度)。
    var elBottom = Ext.fly('elId').getBottom();
    74.setLeft
    直接使用CSS样式(代替setX()),设定元素的left位置。
    Ext.fly('elId').setLeft(25)
    75.setRight
    设置元素CSS Right的样式。
    Ext.fly('elId').setRight(15)
    76.setTop
    直接使用CSS样式(代替setY()),设定元素的top位置。
    Ext.fly('elId').setTop(12)
    77.setBottom
    设置元素CSS Bottom的样式。
    Ext.fly('elId').setBottom(15)
    78.setLocation
    无论这个元素如何定位,设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标(display:none或未加入的elements会当作无效而返回false)。
    Ext.fly('elId').setLocation(15,32)
    79.moveTo
    无论这个元素如何定位,设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标(display:none或未加入的elements会当作无效而返回false)。
    Ext.fly('elId').moveTo(12,17)
    80.position
    初始化元素的位置。如果未传入期待的位置,而又还没定位的话,将会设置当前元素为相对(relative)定位。
    Ext.fly('elId').position("relative")
    81.clearPositioning
    当文档加载后清除位置并复位到默认。
    Ext.fly('elId').clearPositioning()
    Ext.fly('elId').clearPositioning("top")
    82.getPositioning
    返回一个包含CSS定位信息的对象。有用的技巧:连同setPostioning一起,可在更新执行之前,先做一个快照(snapshot),之后便可恢复该元素。
    var pos = Ext.fly('elId').getPositioning()
    83.setPositioning
    由getPositioning()返回的对象去进行定位。
    Ext.fly('elId').setPositioning({
    left: 'static',
    right: 'auto'
    })
    84.translatePoints
    送入一个页面坐标的参数,将其翻译到元素的CSS left/top值。
    // {left:translX, top: translY}
    var points = Ext.fly('elId').translatePoints(15,18);

  • 相关阅读:
    一段路
    memcache 键名的命名规则以及和memcached的区别
    浏览器解释网页时乱码
    windows下安装Apache
    巧用PHP数组函数
    程序返回值的数据结构
    Linux如何生成列表
    判断用户密码是否在警告期内(学习练习)
    判断用户的用户名和其基本组的组名是否一致
    sed笔记
  • 原文地址:https://www.cnblogs.com/freel/p/6689455.html
Copyright © 2011-2022 走看看