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相關的資料

友情鏈接