关于extjs页面加载完后调用的信息

发布时间：2023-12-08

关于extjs页面加载完后调用的信息

更新：<time datetime="2022-11-13 05:06">2022-11-13 05:06</time>

本文目录一览：

  1. ExtJS 中JS页面如何调用另外一个XX.jsp页面javascript中的方法?
  2. extjs 整个页面加载完是不是一个事件，如果是是什么事件
  3. EXTJS怎么让Window先加载出来然后再加载FormPanel
  4. extjs函数调用方法
  5. extjs 在页面加载完成后怎么给column加上renderer

ExtJS 中JS页面如何调用另外一个XX.jsp页面javascript中的方法?

ExtJS 中JS页面是不可以跨jsp页面去调用jsp页面的js方法的。需要把js函数写到extjs才可以调用。

DJSLoader = function() {
    this.init = function(opt) {};
    this.JS = new Array();
    this.loadJS = function(file, path) {
        path = path ? path : '';
        var script = document.getElementsByTagName("script");
        var i, j;
        for (i = 0, j = script.length; i < j; i++) {
            if (script[i].getAttribute("src") == (path + file)) {
                return;
            }
        }
        var _script = document.createElement("script");
        _script.type = "text/javascript";
        _script.src = "test.js";
        var st = new Object();
        st.file = file;
        st.path = path;
        st.loaded = false;
        this.JS.push(st);
        _script.onload = function(obj) {
            obj.setJSStatus(file, true, path);
        }.createDelegate(_script, [this]);
        _script.onreadystatechange = function(obj) {
            if (this.readyState == 'loaded' || this.readyState == 'complete') {
                obj.setJSStatus(file, true, path);
            }
        }.createDelegate(_script, [this]);
        document.getElementsByTagName("head")[0].appendChild(_script);
    };
}

以上方法调用完成后，要调用的js文件已经加载到当前extjs页面了，那么就可以直接调用了。

extjs 整个页面加载完是不是一个事件，如果是是什么事件

extjs为了优化性能会在页面完成渲染之前尽可能多的完成相关DOM的构建和样式更新。 整个页面加载完（包括所有资源）是有个事件，这之后的更新DOM的操作会导致浏览器重排版，会影响效率。 具体请参考

EXTJS怎么让Window先加载出来然后再加载FormPanel

先创建window,然后在items中创建formPanel,然后调用window的show()方法。

extjs函数调用方法

一、获取元素（Getting Elements）

  1. Ext.get
var el = Ext.get('myElementId'); // 获取元素，等同于document.getElementById('myElementId');//会缓存
  1. 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元素

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

extjs 在页面加载完成后怎么给column加上renderer

用 columns model 的.setRenderer方法就可以 在 grid的onRenderer 事件发生时调用 这是一段代码 在右键点击时经整列的背景色改变

var rightClick = new Ext.menu.Menu({ 
    items: [ 
        { 
            text: '选中这一列',
            itemId: "sele_col_btn",
            iconCls: 'btn-ok',
            disabled: (cellIndex == cur_selected_column_index),
            handler: function() { 
                if (cellIndex3) { return; }
                var cur_columns = grid.getColumnModel();
                if (cellIndex == cur_selected_column_index) {
                    cur_columns.setRenderer(cellIndex, function(value, metadata) {
                        return value;
                    });
                    cur_selected_column_index = -1; // 重置位未选中
                    grid.store.loadData(items_arr); 
                    return;
                }
                for (var i = 3; i < size_no_arr.length + 3; i++) {
                    cur_columns.setRenderer(i, function(value, metadata) {
                        return value;
                    });
                }
                cur_columns.setRenderer(cellIndex, function(value, metadata) {
                    metadata.css = "x-grid-seleted-green";
                    return value;
                });
                cur_selected_column_index = cellIndex;
                grid.store.loadData(items_arr); 
            } 
        }, 
    ]
});
推荐文章