将html页面用extjs显示

最新推荐文章于 2021-06-16 23:31:52 发布
最新推荐文章于 2021-06-16 23:31:52 发布
阅读量4.3k 收藏
点赞数
分类专栏： extjs 文章标签： extjs html function input stylesheet button

Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = 'http://www.cnblogs.com/resources/images/default/s.gif';
    Ext.QuickTips.init();
    /**//**
     * button
     */
    var objArray = Ext.DomQuery.select("input[type=submit]");
    Ext.each(objArray, function(obj) {
        var btn = new Ext.Button({
            text : obj.value,
            applyTo : obj,
            handler : obj.onclick,
            type : obj.type
        });
        btn.getEl().replace(Ext.get(obj));
    });
    var objArray = Ext.DomQuery.select("input[type=reset]");
    Ext.each(objArray, function(obj) {
        var btn = new Ext.Button({
            text : obj.value,
            applyTo : obj,
            handler : obj.onclick,
            type : obj.type
        });
        btn.getEl().replace(Ext.get(obj));
    });
    var objArray = Ext.DomQuery.select("input[type=button]");
    Ext.each(objArray, function(obj) {
        var btn = new Ext.Button({
            text : obj.value,
            applyTo : obj,
            handler : obj.onclick,
            type : obj.type
        });
        btn.getEl().replace(Ext.get(obj));
    });
    /**//**
     * text and textarea and password and file
     */
    var objArray = Ext.DomQuery.select("input[type=text]");
    Ext.each(objArray, function(obj) {
        var txtField = new Ext.form.TextField({
            applyTo : obj,
            validationEvent : 'blur',
            validator : function() {
                Ext.Ajax.request({
                    url : '1.htm',
                    success : function(response) {
                        txtField.clearInvalid();
                        txtField.markInvalid(response.responseText);
                    },
                    failure : function() {
                        alert(1);
                    }
                });
            },
            allowBlank : ((obj.attributes.getNamedItem("notNull") || obj.attributes
                    .getNamedItem("notnull")) ? false : true),
            blankText : '该字段不能为空'
        });
    });
    var objArray = Ext.DomQuery.select("input[type=password]");
    Ext.each(objArray, function(obj) {
        var txtField = new Ext.form.TextField({
            applyTo : obj,
            inputType : 'password'
        });
    });
    var objArray = Ext.DomQuery.select("input[type=file]");
    Ext.each(objArray, function(obj) {

    });
    var objArray = Ext.DomQuery.select("textarea");
    Ext.each(objArray, function(obj) {
        var txtArea = new Ext.form.TextArea({
            applyTo : obj
        });
    });
    /**//**
     * checkbox and radio
     */
    var objArray = Ext.DomQuery.select("input[type=checkbox]");
    Ext.each(objArray, function(obj) {
        var checkbox = new Ext.form.Checkbox({
            applyTo : obj
        });
    });
    var objArray = Ext.DomQuery.select("input[type=radio]");
    Ext.each(objArray, function(obj) {
        var radio = new Ext.form.Radio({
            applyTo : obj
        });
    });
    /**//**
     * select or comboBox
     */
    var objArray = Ext.DomQuery.select("select");
    Ext.each(objArray, function(obj) {
        var btn = new Ext.form.ComboBox({
            typeAhead : true,
            triggerAction : 'all',
            transform : obj,
            forceSelection : true
        });
    });

})
原型页面
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>test</title>
        <link rel="stylesheet" type="text/css"
            href="resources/css/ext-all.css" />
        <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-all-debug.js"></script>
        <script type="text/javascript" src="example-form.js"></script>
    </head>
    <body>
        <form>
            <input type="submit" value="asdqweqwe" οnclick="alert(2)">
            <input type="text" notnull>
            <input type="text">
            <input type="password">
            <input type="file">
            <textarea></textarea>
            <input type="checkbox">
            <input type="radio" name="q">qweqwe</input>
            <input type="radio" name="q">qweqwe</input>
            <select name="s">
                <option value="kkkkk">
                    pp
                </option>
                <option value="gg">
                    ww
                </option>
            </select>
        </form>
    </body>
</html>

hfy211
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs 引入html页面,Extjs嵌入html
weixin_32307599的博客
06-09 2232
方式一：使用组件的html属性嵌入html代码，如果html代码中存在参数可以使用字符串拼接的方式拼接html代码。html页面：Extjs中嵌入htmlExtjs代码：Ext.Loader.setConfig({enabled : true});Ext.Loader.setPath('Ext.ux', '../extjs/ux');Ext.require([ 'Ext.form.*', 'Ext...
ExtJS页面路由
05-07
这种机制是通过URL哈希值（#）或者HTML5 History API来实现的，允许用户在浏览器地址栏中看到当前的“页面”状态，同时也便于书签和后退功能的正常使用。 在ExtJS框架中，路由系统通常与`Ext.app.Router`类相关联，...
EXtJS资源，非常好的html页面模版
05-21
EXtJS资源，非常好的html页面模版
extjs显示html页面布局,ExtJs实现显示html代码
weixin_39573535的博客
06-03 290
public string formatHtml(string jsonName, IList IL){StringBuilder Json = new StringBuilder();Json.Append("{" + jsonName + ":[");if (IL.Count > 0){for (int i = 0; i < IL.Count; i++){T obj = Activ...
ExtJs4 load加载html页面
だ冷悦清风だ的专栏
08-09 3247
function getReceiveBoxPanel(){ var receiveBoxPanel = Ext.getCmp('receiveBoxPanel'); if(!receiveBoxPanel){ receiveBoxPanel = Ext.create('Ext.panel.Panel', { id:'receiveBoxPanel', title:'收件箱', clo
extjs显示html页面,ExtJS Combo 下拉列表正常显示HTML标签内容
weixin_39942351的博客
06-04 178
解决问题:原问题是,需要在combo上显示一些HTML标签,如 xxx1. 如果简单的使用combo的话,会如下图 2. 换个思路,把store里面的东西转码下看看?var c = new Ext.form.ComboBox({fieldLabel: 'HTML标签',displayField: 'name',valueField: 'value',mode: 'local',triggerAct...
extjs grid显示html,Extjs grid column里添加button等html标签，并增加点击事件
weixin_34938347的博客
06-16 290
Extjs里有个actioncolumn,但actioncolumn只能添加一系列button，不能既有字又有button如何能在column里增加html标签，并给button添加事件呢？1. 首先，在column里重写renderer方法，方法里拼html语句View里主要代码如下：columns: [{header: 'Complex column',width: 90,renderer: ...
ExtJs使用IFrame的实现代码
10-29
在ExtJs中实现Iframe的嵌入功能，主要目的是为了在Web应用中集成外部页面或报表内容。ExtJs是一个用于开发富互联网应用的JavaScript库，它提供了强大的界面组件和数据处理机制。而Iframe（内联框架）标签是HTML的一...
extjs显示数据库
08-08
在本案例中，我们关注的是如何使用ExtJS框架显示来自MySQL数据库的信息，并通过Java进行后端处理，将数据转化为JSON格式，以供前端展示。 ### 详细知识点解析 #### 1. 构建数据库表结构 首先，创建一个名为`...
Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现
08-08
这篇博客文章"Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现"将详细介绍如何使用HtmlEditor以及如何实现图片上传和显示的功能。 首先，我们需要了解HtmlEditor的基本用法。HtmlEditor通常包含一个...
ExtJs中处理后台传过来的date对象显示到页面上
10-26
在使用ExtJs开发时会遇到这样的问题，后台传来一个java对象，里面有一个date类型的数据，现在要显示到页面上，我们该如何写才能不用将date转换成string的直接在页面上显示。下面解决办法：例如：在员工查询页面上，员工表中有个生日这一字段，在页面上我们需要显示日期即Date。从后台传过来的是employer这个对象，这个对象中有一个birthday这一字段（Date）类型。
HTML 和 ExtJS 组件
lic0112的专栏
12-01 239
当你要创建一个网页时， 经常会发现，你知道怎样用原生的html来创建，却不知道如何使用浩如烟海的ext组件来实现。本文将介绍一些使用ext组件创建html的一些技巧。 简介   组件的渲染 首先让我们用一个简单的例子了解一下组件是如何渲染的: /** The renderTo config option specifies a parent DOM element for * ...
ext中加载html,Extjs打开window窗口自动加载html网页
weixin_31869917的博客
05-31 924
Window inherits theautoLoadconfig option from Panel. Note that I included all config options below, where most are optional:var w = new Ext.Window({autoLoad: {url: "someApplicationURL",params: {first...
[Sencha ExtJS] HTML 和 ExtJS 组件
小桥流水丿小溪
09-06 1667
当你要创建一个网页时， 经常会发现，你知道怎样用原生的html来创建，却不知道如何使用浩如烟海的ext组件来实现。 本文将介绍一些使用ext组件创建html的一些技巧。 组件的渲染 首先让我们用一个简单的例子了解一下组件是如何渲染的: /** The renderTo config option specifies a parent DOM element for * renderi...
ExtJS显示窗口
zhelong111的专栏
07-04 148
[size=large]使用ExtJS显示一个窗口 [code] var win = new Ext.Window({ title : "Ext.Window1", resizable : true, width : 350, height :...
html加上 extjs右键,ExtJS：向htmleditor添加按钮
weixin_42131601的博客
05-30 109
您无需切换到HTML模式.只需将insertAtCursor函数与HTML模板一起使用即可.我做了一个简单的例子,说明如何添加插入水平标尺的按钮(< hr>标记)：Ext.ns('Ext.ux.form.HtmlEditor');Ext.ux.form.HtmlEditor.HR = Ext.extend(Ext.util.Observable, {init: function(cmp...
How to debug EXTJS
沉底的石头
09-18 6799
http://www.sencha.com/forum/showthread.php?46750-How-to-debug-EXTJS http://www.sencha.com/learn/debugging-ext-js-applications This content will be either moved or archived. Please visit th
ext引入html页面
YouareMyPanacea的博客
12-09 1001
ext引入html页面前言第一步在win里边定义html：""第二找到queryform定义的按钮 前言 今天在工作的时候需要做一个三方确认表 我们前端用的框架是extjs 但是三方确认表需要打印必须是ext里边嵌套一个html。下面来说说是怎么实现的。 第一步在win里边定义html："" 如下 Ext.define(‘Sgai.view.prod.hrProdMeterConfirm.H...
text html 显示为网页,在textarea中显示html页面的javascript代码
weixin_29582621的博客
06-10 283
我想让textarea中写的html页面显示为html形式我知道有htmledit之类的工具 我用不了他的那么多的功能 我只要简单的显示就可以了1楼如果你只为显示的话，可以用document.write()如果还要编辑的话，我觉得你可能还是要用htmledit之类的工具，我现在在研究fckeditor，他有几中类型，有功能少的。嘿嘿，个人之见，希望对你有用。2楼function test(){x=...
extjs下拉框可查询html页面怎么写
最新发布
03-31
要实现ExtJS下拉框可查询HTML页面，需要使用ExtJS的ComboBox组件和Store组件。 首先，需要定义一个Store，用来存储下拉框的选项。这个Store可以从HTML页面中获取数据，例如： ```javascript var myStore = new Ext.data.Store({ proxy: { type: 'ajax', url: 'data.html', // HTML页面中存储下拉框选项的数据 reader: { type: 'json', rootProperty: 'data' } }, autoLoad: true }); ``` 然后，在ComboBox中使用这个Store，并设置一些属性，例如： ```javascript var myCombo = new Ext.form.ComboBox({ fieldLabel: 'My ComboBox', store: myStore, displayField: 'name', valueField: 'value', queryMode: 'remote', forceSelection: true, typeAhead: false, selectOnFocus: true, hideTrigger: true, minChars: 1, listConfig: { loadingText: 'Loading...', emptyText: 'No matching results found.', getInnerTpl: function() { return '<div>{name}</div>'; } } }); ``` 在这个ComboBox中，设置了以下属性： - `store`: 使用上面定义的Store。 - `displayField`: 显示在下拉框中的字段，例如`name`。 - `valueField`: 实际提交表单时使用的字段，例如`value`。 - `queryMode`: 查询模式，这里设置为`remote`，表示从服务器端查询数据。 - `forceSelection`: 是否强制选择下拉框中的选项。 - `typeAhead`: 是否启用自动完成。 - `selectOnFocus`: 是否在获得焦点时自动选择下拉框中的文本。 - `hideTrigger`: 是否隐藏下拉框的触发器。 - `minChars`: 在输入框中输入的最小字符数。 - `listConfig`: 下拉框中列表的配置，包括加载提示和空结果提示等。 最后，将这个ComboBox添加到页面中的某个容器中，例如： ```javascript var myPanel = new Ext.panel.Panel({ renderTo: Ext.getBody(), items: [myCombo] }); ``` 这样就可以实现ExtJS下拉框可查询HTML页面了。用户在下拉框中输入字符时，ComboBox会向服务器发送请求，获取符合条件的数据，并在下拉框中显示出来。用户可以从中选择一个选项，或者继续输入字符以缩小搜索范围。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值