Extjs Ext.ux.IFrame의 사용법 및 모/자 창 간 함수 호출
3552 단어 iframe
Extjs Ext.ux.IFrame의 사용법 및 모/자 창 간 함수 호출
Ext.ux.IFrame Extjs 공식에서 제공하는 구성 요소로 편리하게 사용할 수 있습니다.
이렇게 하면 간단한 IFrame의 사용을 완성할 수 있다. Extjs의 확장을 통해 모든 용기에 넣을 수 있는 구성 요소가 되고 부모 용기의 레이아웃을 지원할 수 있다. var iframe = Ext.create("Ext.ux.IFrame", {
frameName: 'hello',
src: "MyJsp.jsp"
});
Ext.create("Ext.Panel", {
layout: "fit",
items: iframe,
renderTo: Ext.getBody(),
width: 300,
height: 300,
title: "Panel Iframe"
});
Ext.ux.IFrame에서 자주 사용하는 몇 가지 방법은 문서에 없습니다. 원본을 볼 때 알 수 있습니다!
getWin()
iframe의 창 대상을 되돌려줍니다. (윈도우)
getFrame()
iframe 요소의dom 대상을 되돌려줍니다. ()
getDoc()
iframe 창의doucment 대상을 되돌려줍니다.
getBody()
iframe 창의 body의 DOM 요소를 되돌려줍니다.
load(src)
src 자체 자원 불러오기
설명이 필요한 문제
원본 코드에 이런 함수가 있습니다. initEvents는 이 방법으로 우리 구성 요소에 이벤트를 추가할 수 있습니다.me.iframeEl은 DOM 요소 패키지를 Ext.dom이라고 합니다.Element 객체
이렇게 하면 이 요소에 이벤트를 추가할 수 있다.여기에load의 이벤트를 주의하십시오. [문서: Only supported by window, frames, objects and images.]
windon frames objects images 이 네 가지 요소만 지원한다는 설명입니다. initEvents : function() {
var me = this;
me.callParent();
me.iframeEl.on('load', me.onLoad, me);
}
원본 코드에 이런 함수가 있습니다. 구성 요소가renderTpl을 사용할 때renderSelectors라는 속성을 사용하여renderTpl 안의 요소를 생성할 수 있습니다
Ext.Element 객체.
Ext.apply(this.renderSelectors, {
iframeEl: 'iframe'
});
Ext.create('Ext.Component', {
renderTo: Ext.getBody(),
renderTpl: [
'<h1 class="title">{title}</h1>',
'<p>{desc}</p>'
],
renderData: {
title: "Error",
desc: "Something went wrong"
},
renderSelectors: {
titleEl: 'h1.title',
descEl: 'p'
},
listeners: {
afterrender: function(cmp){
// After rendering the component will have a titleEl and descEl properties
cmp.titleEl.setStyle({color: "red"});
}
}
});
JavaScript 네이티브 모/자 창 간 상호 호출
하위 창에서 부모 창 윈도우를 호출합니다.parent.func();
부모 창에서 하위 창 윈도우를 호출합니다.frames['iframeName'].func();
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
puppeteer로 iframe의 요소를 조작합니다.
iframe내에 버튼을 준비해, 그 버튼을 누르면 버튼의 색이 바뀌는 만큼의 페이지를 만듭니다.
app/index.html
app/iframe.html
puppeteer의 코드를 작성합니다.
app/script.js...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
var iframe = Ext.create("Ext.ux.IFrame", {
frameName: 'hello',
src: "MyJsp.jsp"
});
Ext.create("Ext.Panel", {
layout: "fit",
items: iframe,
renderTo: Ext.getBody(),
width: 300,
height: 300,
title: "Panel Iframe"
}); initEvents : function() {
var me = this;
me.callParent();
me.iframeEl.on('load', me.onLoad, me);
}Ext.apply(this.renderSelectors, {
iframeEl: 'iframe'
});Ext.create('Ext.Component', {
renderTo: Ext.getBody(),
renderTpl: [
'<h1 class="title">{title}</h1>',
'<p>{desc}</p>'
],
renderData: {
title: "Error",
desc: "Something went wrong"
},
renderSelectors: {
titleEl: 'h1.title',
descEl: 'p'
},
listeners: {
afterrender: function(cmp){
// After rendering the component will have a titleEl and descEl properties
cmp.titleEl.setStyle({color: "red"});
}
}
});이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
puppeteer로 iframe의 요소를 조작합니다.iframe내에 버튼을 준비해, 그 버튼을 누르면 버튼의 색이 바뀌는 만큼의 페이지를 만듭니다. app/index.html app/iframe.html puppeteer의 코드를 작성합니다. app/script.js...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
