w3extjs_extjs 51 免费版支持html5吗

㈠ extjs怎样做图片上传

1.代码如下：
复制代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
10 
11 <script type="text/javascript">
12 Ext.onReady(function () {
13 //初始化标签中的Ext:Qtip属性。
14 Ext.QuickTips.init();
15 Ext.form.Field.prototype.msgTarget = 'side';
16 //创建div组件
17 var imagebox = new Ext.BoxComponent({
18 autoEl: {
19 style: 'width:150px;height:150px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:20px;margin-bottom:10px',
20 tag: 'div',
21 id: 'imageshow',
22 html: '暂无图片'
23 }
24 });
25 //创建文本上传域
26 var file = new Ext.form.TextField({
27 name: 'imgFile',
28 fieldLabel: '文件上传',
29 inputType: 'file',
30 allowBlank: false,
31 blankText: '请浏览图片'
32 });
33 //提交按钮处理方法
34 var btnsubmitclick = function () {
35 if (form.getForm().isValid()) {
36 form.getForm().submit({
37 waitTitle: "请稍候",
38 waitMsg: '正在上传...',
39 success: function (form, action) {
40 Ext.MessageBox.alert("提示", "上传成功！");
41 document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';
42 },
43 failure: function () {
44 Ext.MessageBox.alert("提示", "上传失败！");
45 }
46 });
47 }
48 }
49 //重置按钮"点击时"处理方法
50 var btnresetclick = function () {
51 form.getForm().reset();
52 }
53 //表单
54 var form = new Ext.form.FormPanel({
55 frame: true,
56 fileUpload: true,
57 url: '/App_Ashx/Demo/Upload.ashx',
58 title: '表单标题',
59 style: 'margin:10px',
60 items: [imagebox, file],
61 buttons: [{
62 text: '保存',
63 handler: btnsubmitclick
64 }, {
65 text: '重置',
66 handler: btnresetclick
67 }]
68 });
69 //窗体
70 var win = new Ext.Window({
71 title: '窗口',
72 width: 476,
73 height: 374,
74 resizable: true,
75 modal: true,
76 closable: true,
77 maximizable: true,
78 minimizable: true,
79 buttonAlign: 'center',
80 items: form
81 });
82 win.show();
83 });
84 </script>
85 </head>
86 <body>
87 
107 </body>
108 </html>
复制代码
其中与service交互用上传图片的一般处理程序文件，源码如下：
/App_Ashx/Demo/Upload.ashx
复制代码
1 using System;
2 using System.Web;
3 using System.IO;
4 using System.Globalization;
5
6 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
7 {
8 public class Upload : IHttpHandler
9 {
10 public void ProcessRequest(HttpContext context)
11 {
12 //虚拟目录，建议写在配置文件中
13 String strPath = "/Upload/Image/";
14 //文件本地目录
15 String dirPath = context.Server.MapPath(strPath);
16 //接收文件
17 HttpPostedFile imgFile = context.Request.Files["imgFile"];
18 //取出文件扩展名
19 String fileExt = Path.GetExtension(imgFile.FileName).ToLower();
20 //重新命名文件
21 String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
22 //文件上传路径
23 String filePath = dirPath + newFileName;
24 //保存文件
25 imgFile.SaveAs(filePath);
26 //客户端输出
27 context.Response.Write("{success:true,path:'" + strPath + newFileName + "'}");
28 }
29
30 public bool IsReusable
31 {
32 get
33 {
34 return false;
35 }
36 }
37 }
38 }
复制代码
2.效果如下：
无废话extjs
3.说明：
(1)上传域不光可以上传图片，还要以上传其他文件。这里我们以图片为例。
(2)在实际开发中，我们还要对图片格式，大小等进行校验，这个示例测重于上传，没有加入任何校验。

㈡ extjs 5.1 免费版支持html5吗

支持的。

新建两个文件，分别命名为mydemo.html, mydemo.js以后，将对应的HTML源代码

与JavaScript代码到各自的文件中，在同一目录下使用Google Chrome浏览器

或者IE9.0打开html文件即可看到效果！

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1">
<title>Example</title>
<linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
<linkrel="stylesheet"type="text/css"href="../shared/example.css"/>
<scripttype="text/javascript"src="../../bootstrap.js"></script>
<scriptlanguage="javascript"src="mydemo.js"></script>
</head>
<body>
<h1>ExtJSwithHTML5Demo</h1>
<p>.See<ahref="mydemo.js">sourcecode</a>.</p>
	<divid="my-demo"></div>
</body>
</html>

ExtJS的代码如下：

/**
*HTML5CanvasDemo
*/
//createnamespace
Ext.namespace('Test');

//createapplication
Test.app=function(){

return{
//publicmethods
init:function(){


vargrid=newExt.Panel({
renderTo:'my-demo',
title:'SimpleHTML5CanvasDemo',
bodyStyle:'padding:10px;',
borders:true,
plain:true,
xtype:'panel',
width:400,
	height:400,
	html:'<canvasid="canvas"width="400"height="400"></canvas>'
});

},//endofinit

onDraw:function(){
	this.canvas=document.getElementById('canvas');
this.ctx=this.canvas.getContext("2d");

		//createablankimagedata
		varcanvas2Data=this.ctx.createImageData(this.canvas.width,this.canvas.height);
		for(varx=0;x<canvas2Data.width;x++){
			for(vary=0;y<canvas2Data.height;y++){

				//Indexofthepixelinthearray
				varidx=(x+y*canvas2Data.width)*4;
				
				//assigngrayscalevalue
				vardistance=Math.sqrt((x-canvas2Data.width/2)*(x-canvas2Data.width/2)+(y-canvas2Data.height/2)*(y-canvas2Data.height/2));
				varcvalue=(128.0+(128.0*Math.sin(distance/8.0)));
				canvas2Data.data[idx+0]=cvalue;//Redchannel
				canvas2Data.data[idx+1]=cvalue;//Greenchannel
				canvas2Data.data[idx+2]=cvalue;//Bluechannel
				canvas2Data.data[idx+3]=255;//Alphachannel
			}
		}
		this.ctx.putImageData(canvas2Data,0,0);//atcoords0,0
		
//drawauthorinfomation
		this.ctx.fillStyle="red";
		this.ctx.font="24pxTimesNewRoman";
		this.ctx.fillText("HTML5Demo-bygloomyfish",50,60);

}
};
}();
//endofapp
Ext.onReady(function(){
	Test.app.init();
	Test.app.onDraw()
//alert('ext.onready')
});
//Ext.onReady(Test.app.init,Test.app);

㈢解决extjs grid 不随窗口大小自适应的改变问题

在使用grid的时候窗口改变了但是grid却不能自适应，下面有个不粗的解决方法，大家可以参考下
最近遇到的问题，在使用grid的时候窗口改变了但是grid却不能自适应的改变于是加了一条这行语句
问题就解决了，效果图

拖大后的效果

添加的语句：

代码如下:
Ext.EventManager.onWindowResize(function(){
grid1.getView().refresh()
})

参看完整代码；
代码如下:
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>grid</title>
<link
href="../ext/resources/css/ext-all.css"
rel="stylesheet"
type="text/css"
/>
<script
src="../ext/adapter/ext/ext-base.js"
type="text/javascript"></script>
<script
src="../ext/ext-all.js"
type="text/javascript"></script>
<script
type="text/javascript">
Ext.onReady(function()
{
function
renderAdmin()
{
return
"
<span
style='cursor:pointer;'
onclick='alert();'><img
src='../IMAGES/icons/email.jpg'/>
</a></span>";
}
var
sm=
new
Ext.grid.CheckboxSelectionModel();
//
var
sm1=
new
Ext.grid.RowSelectionModel({singleSelect:true}),
var
cm=new
Ext.grid.ColumnModel([
new
Ext.grid.RowNumberer(),
sm,
//
sm1,
{header:'<span
style="cursor:pointer;"><img
src="../IMAGES/icons/email.jpg"/>
</a></span>',dataIndex:'admin',width:30,renderer:renderAdmin,sortable:false},
{header:'ID',dataIndex:'id'},
{id:'name',header:'名称',dataIndex:'name'},
{header:'发送人',dataIndex:'from'},
{header:'收件人',dataIndex:'to'}
]);
var
data=[
['','001','收件单一','张三','李四'],
['','002','收件单二','张四','李五'],
['','003','收件单三','张六','李七']
];
var
store=
new
Ext.data.Store({
proxy:new
Ext.data.MemoryProxy(data),
reader:new
Ext.data.ArrayReader({},[
{name:'admin'},
{name:'id'},
{name:'name'}
,
{name:'from'},
{name:'to'}
])
});
store.load();
var
grid1=
new
Ext.grid.GridPanel({
renderTo:'grid1',
name:'grid1',
layout:'fit'
,
title:'收件单',
autoHeight:true,
autoWidth:true,
bodyStyle:'width:100%',
loadMask
:true,
//autoExpandColumn:'name',
autoWidth:true,
//
tbar:[{text:'发送',
//
icon:
'../Images/icons/application_edit.jpg',
//
cls:
'x-btn-text-icon'},
//
{text:'删除',
//
icon:
'../Images/icons/application_edit.jpg',
//
cls:
'x-btn-text-icon'}],
store:store,
frame:true,
cm:cm,
sm:sm,
viewConfig:{
forceFit:true},
listeners
:
{
rowdblclick
:
function(n)
{
//获取当前选中行，
输向
//
debugger;
var
iid=
grid.getSelectionModel().getSelected().data.id
;
window.location.href="SubFrame.html?id="+iid;
}
}
});
Ext.EventManager.onWindowResize(function(){
grid1.getView().refresh()
})
});
</script>
</head>
<body>
<div
id="grid1"
style="width:
100%;
height:
100%;">
</div>
</body>
</html>

㈣ ExtJS初学者执行代码出现对象不支持此属性或方法

把panel.render();这句给去掉

㈤ ExtJs读取后台数据进行分页

oStore = new Ext.data.JsonStore({
url: '/backend/getdata', // 这儿就是你说的后台
root: 'data',
totalProperty: 'total', // total 里面放记录总数
remoteSort: true,
fields: [ // 具体有哪些字段？
'field1',
'field2',
... ...
]
});
var selModel = new Ext.grid.CheckboxSelectionModel();
var colModel = new Ext.grid.ColumnModel([selModel, {
//表格列定义
... ...
]);

oGrid = new Ext.grid.GridPanel({
title: '标题',
iconCls:'icon_xxx', // 图标
ds: oStore,
cm: colModel,
sm: selModel,
loadMask: {
msg: 'Loading...'
},
tbar:[{ //头部工具条
text: '按钮1',
iconCls: 'icon-fileup',
tooltip: '按钮1的动作',
handler: function(btn, e){
//
}
}],
bbar: new Ext.PagingToolbar({ //底部工具条（分页在这儿实现）
store: oStore,
pageSize: 30, //每页显示的记录数
displayInfo: true,
plugins: [new Ext.ux.PageSizePlugin()], // 这是一个插件，在网上找找
emptyMsg: "没有数据"
}),
listeners: {
render: function() {
//加载首页数据
oStore.load({params:{start:0, limit:30}});
}
}
});

/backend/getdata 返回的数据应该是这样
{
data: [...],
total: 100
}

㈥ extjs中renderTo的作用意义

renderto的作用：指明控件要渲染的节点的，每一个控件都要指明该控件需要渲染到哪一个DOM节点。
renderTo的使用：
1、可以有el配置选项。
2、如果有el配置选项，则其指向的el元素充当了模板，并且必须存在。
3、renderTo所指向的el元素将作为对象渲染的入口，即render所产生的html代码将作为renderTo所指向的el元素的子节点。
4、如果有el配置选项，那么render会将el配置选项所指向的el元素作为模板然后产生html代码作为renderTo所指向的el元素的子节点。
5、示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>applyTo与renderTo的区别</title>
<link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"个人信息",
width:300,
height:300,
frame:true,
el:"elId",
renderTo:"appConId"
});
});
</script>
</head>
<body>
<div id="appId" style="padding:30px;width:500px;height:400px;background-color: blue;">
<div id="appConId" style="width:400px;height:400px;background-color:green;"></div>
</div>
<div id="elId" style="width:500px;height:400px;background-color:red;">
</div>
</body>
</html>

导航:首页 > 编程语言 > w3extjs

w3extjs

与w3extjs相关的资料

友情链接