ext | 易学教程

ExtJS Form无刷新文件上传

阅读更多关于 ExtJS Form无刷新文件上传

文件上传在Web程序开发中必不可少，ExtJS Form中有一个filefield字段，用来选择文件并上传。今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传。首先，我们创建一个Form，它包含一个filefield字段然后，我们通过Form的submit方法进行提交，此时，ExtJS会自动判断，如果Form中包含filefield字段，Form的method会设置为post 最后，我们通过服务器接收form提交的数据，并返回一段json字符串 ExtJS Form代码如下： Ext.create("Ext.form.FormPanel", { title: "ExtJS 无刷新文件上传", width: 350, height: 300, x: 30, y: 30, layout: "form", bodyPadding: "5", defaultType: "textfield", fieldDefaults: { labelAlign: "left", labelWidth: 55 }, items: [ { xtype: "filefield", name: "File", fieldLabel: "选择文件", buttonText: "浏览", allowBlank: false } ], buttons: [ { text:

Extjs MVC开发模式详解

阅读更多关于 Extjs MVC开发模式详解

在JS的开发过程中，大规模的JS脚本难以组织和维护，这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题，在 Extjs 4 .x版本中引入了MVC开发模式，开始将一个JS（Extjs）应用程序分割成Model-View-Controller三层，为JS应用程序的如何组织代码指明了方向，同时使得大规模JS代码变得更加易于重用和维护；这就是 Extjs MVC 开发模式的初衷。在官方给出的MVC例子中，我们可以看到一个简单的列表编辑功能，这篇文章就围绕这个功能进行详细的讲解，让我们一起来揭开Extjs MVC的神秘面纱！常规开发模式下的列表编辑功能实现我们先来看一下这个例子，它的功能非常简单：在页面打开的时候加载一个列表，当双击列表中一行数据的时候打开编辑窗口，编辑完成之后点击保存按钮，然后更新列表。截图如下： extjs-mvc-in-detail 在常规的开发模式下，要实现这个功能非常简单，代码如下： Ext.onReady(function () { //1.定义Model Ext.define("MyApp.model.User", { extend: "Ext.data.Model", fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' }, { name:

Extjs GridPanel用法详解

阅读更多关于 Extjs GridPanel用法详解

创建GridPanel 要使用GridPanel，首先要定义Store，而在创建Store的时候必须要有Model，因此我们首先来定义Model： //1.定义Model Ext.define("MyApp.model.User", { extend: "Ext.data.Model", fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' }, { name: 'phone', type: 'string' } ] }); 然后创建Store： //2.创建store var store = Ext.create("Ext.data.Store", { model: "MyApp.model.User", autoLoad: true, pageSize: 5, proxy: { type: "ajax", url: "GridHandler.ashx", reader: { root: "rows" } } }); 接下来才是GridPanel的代码： //3.创建grid var grid = Ext.create("Ext.grid.Panel", { xtype: "grid", store: store, width: 500, height: 200, margin: 30,

Ext js-02 -官方API文档使用

阅读更多关于 Ext js-02 -官方API文档使用

官方API文档地址： http://docs.sencha.com/extjs/6.5.3/classic/Ext.html 打开网页如下： 1.选择所使用的Ext js版本，后面offline docs是离线文档的下载 2.搜索功能：查找类，组件等需要注意这个API下面modern是手机端对应的组件，classic对用的是电脑端的组件的介绍例子：搜索messagebox,选择第二个Ext.window.MessageBox，打开如下： 3.看懂API对组件的介绍：如单例对象，组件类，xtype，config配置，properties配置，methods方法，events事件，继承体系等（1）单例对象与组件类：点击左侧的Ext ,在显示的界面上会看到一个SINGLETON的标识，表示这是一个单例对象（注意，单例对象前面显示的是红色的图标），在整个应用当中，只有一个Ext对象，下边configs,properties，methods是这个单例对象具有的一些属性，方法等搜索messagebox时，会出现Ext.window.MessageBox，和Ext.MessageBox，后者是一个单例对象，如上图，而Ext.window.MessageBox是一个组件（每一个组件都是一个类），Ext.window.MessageBox 指明了 Ext

GitHub开源项目Hyperspectral-Classification的解析

阅读更多关于 GitHub开源项目Hyperspectral-Classification的解析

GitHub链接： Hyperspectral-Classification Pytorch 。项目简介项目的作者是 Xidian university ，是基于PyTorch的高光谱图像地物目标的分类程序。该项目兼容Python 2.7和Python 3.5+，基于PyTorch深度学习和GPU计算框架，并使用Visdom可视化服务器。预定义的公开的数据集有：帕维亚大学帕维亚中心肯尼迪航天中心印度松树博茨瓦纳用户也可添加自定义的数据集，示例是“数据融合大赛2018的高光谱数据集”DFC2018_HSI。开发人员应该为CUSTOM_DATASETS_CONFIG变量添加一个新条目，并为其用例定义特定的数据加载器。该工具实现了scikit-learn库中的几个SVM变体以及PyTorch中实现的许多最先进的深度网络： SVM（带网格搜索的线性，RBF和多核） SGD（使用随机梯度下降的线性SVM进行快速优化）基线神经网络（4个完全连接的层，有丢失） 1D CNN（用于高光谱图像分类的深度卷积神经网络，Hu等人，Journal of Sensors 2015）半监督的1D CNN（Autoencodeurs pour la visualization d’images hyperspectrales，Boulch et al。，GRETSI 2017） 2D

ExtJs页面布局总结(转载)

阅读更多关于 ExtJs页面布局总结(转载)

转自： http://www.blogjava.net/liuyz2006/articles/387305.html EXT标准布局类面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种： ContainerLayout（容器布局） FitLayout（自适应布局） AccordionLayout（折叠布局） CardLayout（卡片式布局） AnchorLayout（锚点布局） AbsoluteLayout（绝对位置布局） FormLayout（表单布局） ColumnLayout（列布局） TableLayout（表格布局） BorderLayout（边框布局）接下来分别介绍这10种布局类的特点及使用方式。 1 ContainerLayout容器布局 Ext.layout.ContainerLayout 提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过 new 关键字直接创建。如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建，表5-4是主要配置项。表5-4 Ext.layout

ext--fileset控件示例

阅读更多关于 ext--fileset控件示例

效果如图： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'select.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http

Ext.form.FormPanel中使用column布局（经典示例）

阅读更多关于 Ext.form.FormPanel中使用column布局（经典示例）

转自： http://hi.baidu.com/java513/item/010f0c260c60a9899c63d1c6 最终效果图：源代码： <html> <head> <title>04.form</title> <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/> <scripttype="text/javascript"src="../../adapter/ext/ext-base.js"></script> <scripttype="text/javascript"src="../../ext-all.js"></script> <scripttype="text/javascript"src="../../source/locale/ext-lang-zh_CN.js"></script> <scripttype="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.form.FormPanel({ labelAlign: 'right', labelWidth: 60, title: 'form', frame:true, width: 450, url

ext--formPanel之column布局

阅读更多关于 ext--formPanel之column布局

/** * myuser综合示例测试 */ Ext.onReady(function(){ Ext.QuickTips.init(); //定义序号 var rownum =new Ext.grid.RowNumberer({header:'NO',width:28}); //定义列模型 var cm = new Ext.grid.ColumnModel([ {header:'id',dataIndex:'id',sortable:true,width:200,hidden:true},//隐藏ID列 rownum, {header:'姓名',dataIndex:'name',sortable:true,width:200}, {header:'爱好',dataIndex:'hobby',sortable:true,width:300}, {header:'性别',dataIndex:'sex',width:100}, {header:'出生日期',dataIndex:'birthday',width:100}, {header:'所在部门',dataIndex:'deptid',width:100} ]); //数据存储器 var store = new Ext.data.JsonStore({ url:'myuser.ered?reqCode=findAll' , root:

Ext FieldSet 布局 -

阅读更多关于 Ext FieldSet 布局 -

转自： http://fireinjava.iteye.com/blog/501592 var panelExt=new Ext.Panel({ layout:'form', items :[{ layout : 'column', items : [{ columnWidth : 0.5, layout : 'form', items : [expCustomerId,expMemberId,maxRepeatTimes] },{ columnWidth : 0.5, layout : 'form', items : [intervalMinutes,duringMinutes] }] }] }) var fieldset = new Ext.form.FieldSet({ checkboxToggle : true, checkboxName :'expAccountFlag', title : 'Fieldset', autoHeight : true, defaultType : 'textfield', defaults : { bodyStyle : 'padding: 0px;' }, collapsed : true, items :[panelExt] }); 转载于:https://www.cnblogs.com/summer520/archive/2013

订阅 ext