ExtJs3.2 批量上传图片文件及在线预览的问题
[问题点数：60分，结帖人lyp1985929]
ExtJs3.2 批量上传图片文件及在线预览的问题
[问题点数：60分，结帖人lyp1985929]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。当前位置：
ExtJs实现图片批量显示，上传，删除【附示例源码】
来源： 联系QQ： 作者： Admin
发布时间： 10/07/10
先看一下效果图：【】
上一篇资讯：
下一篇资讯：
文章排行榜二次元同好交流新大陆
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
出身数学,爱好文学,从事软件开发工作。一个阳光、幽默、热爱生活的男孩子,在追求理想的路上风雨无阻,勇往直前,崇尚“梦想有多远,我们就走多远”！
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
这两个统计效果现实方式类似，没什么特别的不同。图二是结合最近做的一个综合查询(详见： )而改进的效果。
实现：（主要代码）
首先定义承载GridPanl(数据列表)、Chart（图形）、Grid查询TopToolbar,很简单，没什么可讲的。
&table width="1024"&
&td valign="top"&&div id="Grid"&&/div&&/td&
&td valign="top"&&div id="LineChart"&&/div&&div id="ColumnChart"&&/div&&/td&
&div id="QueryCondition" class="x-hidden"&
&td&&input id="FDuName" type="text" /&&/td&
&td&&input id="BeginDate" type="text" sign="datefield"/&&/td&
&td&&input id="EndDate" type="text" sign="datefield"/&&/td&
&td&&div id="OneWeek" value="
&td&&div id="OneMonth" value="
&td&&div id="OneYear" value="
* Author:xuzhihong
* Create Date:
* Description:
.onkeydown() {
if (event.keyCode == 13) {
Vars.BtnQuery();
.Chart.CHART_URL = '/JS/Extjs3.1.1/resources/charts.swf';& //
(function() {
Twi.Renderer.Single.TextField('FDuName', { width: 190 });
Vars.BeginDate = Twi.Renderer.Single.DateField("BeginDate", { width: 100 });
Vars.EndDate = Twi.Renderer.Single.DateField("EndDate", { width: 100 });
Vars.Grid = self.GridPanel();
self.Toolbar.AdvancedToolbar();
Vars.ChartStore = self.Store.ChartStore();
Vars.LineChartPanel = self.ChartPanel.LineChart();
Vars.ColumnChartPanel = self.ChartPanel.ColumnChart();
.Statistics.WorkLoadByDuName =
&&& Url: 'StatisticsWorkLoadByDuName.aspx',
&&& QTUrl: 'QueryTask.aspx',
&&& Grid: null,
&&& Keys: [],
&&& Values: [],
&&& ChartStore: null,
&&& LineChartPanel: null,
&&& ColumnChartPanel: null
//end Vars
ChartStore: function() {
var store = Twi.Data.JsonStore({
Url: Vars.Url,
autoLoad: true,
baseParams:
sign: 'Chart',
duName: Ext.fly('FDuName').dom.value,
beginDate: Ext.fly('BeginDate').dom.value,
endDate: Ext.fly('EndDate').dom.value
return store;
} //end ChartStore
GridPanel: function() {
var store = Twi.Data.JsonStore(
&&& Url: Vars.QTUrl,
&&& autoLoad: true,
&&& baseParams: {
&&&&&&& sign: 'Grid',
&&&&&&& dateSign: 'FDelegateDate',
&&&&&&& beginDate: Ext.fly('BeginDate').dom.value,
&&&&&&& endDate: Ext.fly('EndDate').dom.value,
&&&&&&& keys: Vars.Keys.join(','),
&&&&&&& values: Vars.Values.join(','),
&&&&&&& start: 0,
&&&&&&& limit: Twi.Grid.PageSize
var columns = Twi.Grid.GetColumns([[', { width: 60}], [', { width: 60}], ['], [', { width: 60}], [', { width: 80}], [', { width: 70}], [', { width: 80}], [', { width: 80}], ['], [', { width: 60}], [', { width: 60}], [', { width: 60}], [', { width: 60}]]);
var toolbar = self.Toolbar.GridToolbar();
var grid = Twi.QuickGrid({
store: store,
columns: columns,
renderTo: 'Grid',
width: 600,
tbar: toolbar,
grid.on('rowdblclick', function(g, rowIndex, e) {
var record = g.store.getAt(rowIndex).data;
Ext.fly('FDuName').dom.value = record.FDuName;
return grid;
} //end GridPanel
, ChartPanel:
LineChart: function() {
var store = Vars.ChartStore;
var chartPanel = new Ext.Panel({
store: store,
renderTo: 'LineChart',
width: 420,
height: 265,
layout: 'fit',
xtype: 'linechart',
store: store,
xField: 'InYearMonth',
yField: 'TaskCount',
yAxis: new Ext.chart.NumericAxis({
&&&&&&&&&&&&&&&&&//title: '
maximum:50,&&&&&&&&&&&
displayName: 'TaskCount'
//majorUnit:30
tipRenderer: function(chart, record) {
return record.data.InYearMonth + ' .util.Format.number(record.data.TaskCount, '0,0');
return chartPanel;
} //end LineChart
, ColumnChart: function() {
var store = Vars.ChartStore;
var chartPanel = new Ext.Panel({
store: store,
renderTo: 'ColumnChart',
width: 420,
height: 265,
layout: 'fit',
xtype: 'columnchart',
store: store,
xField: 'InYearMonth',
yField: 'TaskCount',
&&yAxis: new Ext.chart.NumericAxis({
//title: '
maximum: 50,
snapToUnits:true,
displayName: 'TaskCount'//,
// majorUnit:15
tipRenderer: function(chart, record) {
return record.data.InYearMonth + ' .util.Format.number(record.data.TaskCount, '0,0');
return chartPanel;
} //end ColumnChart
, Toolbar:
GridToolbar: function() {
var toolbar = new Ext.Toolbar(
&&& items: [
&&& text: '
&&& iconCls: 'ico_table',
&&& handler: Vars.BtnOneWeek
&&& text: '
&&& iconCls: 'ico_table',
&&& handler: Vars.BtnOneMonth
&&& text: '
&&& iconCls: 'ico_table',
&&& handler: Vars.BtnOneYear
}, '-&', {
&&& text: '
&&& iconCls: 'ico_search',
&&& handler: Vars.BtnQuery
return toolbar;
} //end GridToolbar
, AdvancedToolbar: function() {
var toolbar = new Ext.Toolbar({
renderTo: Vars.Grid.tbar,
contentEl: 'QueryCondition'
return toolbar;
} //end AdvancedToolbar
= GS.JL.Statistics.WorkLoadByDuName;
= self.Vars;
= function() {
Vars.Keys = [];
Vars.Values = [];
var content = Ext.fly('FDuName').dom.value;
if (content.trim() != '') {
Vars.Keys.push("FDuName");
Vars.Values.push(content);
Vars.Grid.store.baseParams =
&&& Url: Vars.QTUrl,
&&& sign: 'Grid',
&&& dateSign: 'FDelegateDate',
&&& beginDate: Ext.fly('BeginDate').dom.value,
&&& endDate: Ext.fly('EndDate').dom.value,
&&& keys: Vars.Keys.join(','),
&&& values: Vars.Values.join(','),
&&& start: 0,
&&& limit: Twi.Grid.PageSize
Vars.ChartStore.reload();
Vars.ChartStore.baseParams =
&&& sign: 'Chart',
&&& duName: Ext.fly('FDuName').dom.value,
&&& beginDate: Ext.fly('BeginDate').dom.value,
&&& endDate: Ext.fly('EndDate').dom.value
Vars.ChartStore.reload();
= function() {
var beginDate = Ext.fly("BeginDate").dom;
var endDate = Ext.fly('EndDate').dom;
var arrDate = GetBetweenDate(7);
beginDate.value = arrDate[0];
endDate.value = arrDate[1];
= function() {
var beginDate = Ext.fly("BeginDate").dom;
var endDate = Ext.fly('EndDate').dom;
var arrDate = GetBetweenDate(30);
beginDate.value = arrDate[0];
endDate.value = arrDate[1];
= function() {
var beginDate = Ext.fly("BeginDate").dom;
var endDate = Ext.fly('EndDate').dom;
var arrDate = GetBetweenDate(365);
beginDate.value = arrDate[0];
endDate.value = arrDate[1];
= function(days) {
var arrDate = [];
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth() + 1;
var d = today.getDate();
today.setHours = 0;
today.setMinutes = 0;
today.setSeconds = 0;
today.setMilliseconds = 0;
m = m & 9 ? m : "0" + m;
d = d & 9 ? d : '0' + d;
var EndDate = y + '-' + m + '-' + d;
var daysBefore = Date.parse(today) - days * 24 * 60 * 60 * 1000;
var t = new Date();
t.setTime(daysBefore);
var y7 = t.getFullYear();
var m7 = t.getMonth() + 1;
var d7 = t.getDate();
m7 = m7 & 9 ? m7 : "0" + m7;
d7 = d7 & 9 ? d7 : '0' + d7;
var BeginDate = y7 + '-' + m7 + '-' + d7;
arrDate.push(BeginDate);
arrDate.push(EndDate);
return arrDate;
/// &summary&
/// &/summary&
/// &param name="duName"&&/param&
/// &param name="beginDate"&&/param&
/// &param name="endDate"&&/param&
/// &returns&&/returns&
public DataTable StatisticsChartWorkLoadByDuName(string duName,DateTime beginDate,DateTime endDate)
SqlParameter sqlParaDuName = new SqlParameter("@DuName", duName);
SqlParameter sqlParaBeginDate = new SqlParameter("@BeginDate", beginDate);
SqlParameter sqlParaEndDate = new SqlParameter("@EndDate", endDate);
ArrayList listPara = new ArrayList();
listPara.Add(sqlParaDuName);
listPara.Add(sqlParaBeginDate);
listPara.Add(sqlParaEndDate);
IDataParameter[] IPara = (IDataParameter[])listPara.ToArray(typeof(IDataParameter));
string tableName = "ChartData";
DataSet ds = DbHelperSQL2.RunProcedure("sp_StatisticsChartWorkLoadByDuName", IPara, tableName);
return ds.Tables[tableName];
-- ==============================================
-- Author:xuzhihong
-- Create Date:
-- Description:业务量统计Chart
-- ==============================================
ALTER PROCEDURE [dbo].[sp_StatisticsChartWorkLoadByDuName]
@DuName nvarchar(500),
@BeginDate datetime,
@EndDate datetime
select InYearMonth = cast(InYear as varchar(4))+'年'+cast(InMonth as varchar(2))+'月',
&&&&&&& InYear,InMonth, count(InMonth) as TaskCount
from(select InYear = Year(T.FDelegateDate), InMonth = Month(T.FDelegateDate)
WHERE FDuName LIKE '%'+@DuName+'%' and Cast(FDelegateDate as Datetime) between @BeginDate& and& @EndDate
)A& group by InYear,InMonth order by InYear,InMonth
测试查询结果：
Feitianxinhong &&
阅读(8815)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_094068',
blogTitle:'Extjs 轻松实现统计图表',
blogAbstract:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}