请问一下在java的一个panel中如何去绘制一条直线，谢谢-中国学网-中国IT综合门户网站
> 请问一下在java的一个panel中如何去绘制一条直线，谢谢
请问一下在java的一个panel中如何去绘制一条直线，谢谢
转载 编辑：李强
为了帮助网友解决“请问一下在java的一个panel中如何”相关的问题，中国学网通过互联网对“请问一下在java的一个panel中如何”相关的解决方案进行了整理,用户详细问题包括:RT,我想知道:请问一下在java的一个panel中如何去绘制一条直线，谢谢，具体解决方案如下：解决方案1：import java.awt.G
import javax.swing.JF
import javax.swing.JP
public class FrameDemo extends JFrame {
private JP
public FrameDemo(){
jp=new JPanel();
linePanel lp = new linePanel();
this.add(jp);
this.add(lp);
this.setSize(300, 300);
this.setVisible(true);
this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
public class linePanel extends JPanel{
public void paint(Graphics g){
g.drawLine(0,0,10,20);
public static void main(String[] args) {
FrameDemo fd=new FrameDemo();
}通过对数据库的索引,我们还为您准备了：import java.awt.G import javax.swing.JF import javax.swing.JP public class FrameDemo extends JFrame { private JP public FrameDemo(){ jp=n...===========================================不需要啊 只要监听一个Panel就可以了 因为 你打字和玩游戏不可能个同时进行 你设置... 你必须设置 一个方法 切换焦点 比如 在游戏panel中 按Esc切换到聊天的panel, 那么,...===========================================不需要啊 只要监听一个Panel就可以了 因为 你打字和玩游戏不可能个同时进行 你设... 你必须设置 一个方法 切换焦点 比如 在游戏panel中 按Esc切换到聊天的panel, 那么...===========================================同时补充一下自己的java基础。 import java.awt.C import java.awt.FlowL ... ); JButton b3 = new JButton("B3"); //分别把button加入到对应panel中 p1.a...===========================================一下,现在运行没问题了,你看看吧。完整的程序如下:(改动的地方见注释)import java.aw... ; panel = new JPanel(); //这里JPanel panel=new JPanel();改成panel=new JPanel(); JBut...===========================================你到底你想怎么实现?不仿具体说下. Panel 是最简单的容器类。应用程序可以将其他组... 布局管理器。 panle只是一种容器,没有print方法. 你说一下你具体想怎么实现????说...=========================================== import java.awt.R import java.awt.image.BufferedI import java.io.File... ).log(Level.SEVERE, null, ex); } } } 看看把,参考一下!===========================================如何对事件做出响应。 从网上找的ppt中的一个图: 3.实例:处理按钮点击事件 为了加深... 以一个简单的例子来说明(《Core&Java》书中例子)。 这个例子中:在一个面板中放...===========================================不同的panel有不同的名字,你找到你所谓的paint方法使用的事哪个panel不就可以了,然后你自己根据自己的需要改动需要使用的panel。===========================================一个面板,按钮一按下-面板画出一个圆,按钮二--矩形 我说一下思路吧: 首先建议你用swi... ,总之面板的画图都在这里面操作了,通过paintComponent(Graphics g)中的g进行操作,另...===========================================
本文欢迎转载，转载请注明：转载自中国学网： []
用户还关注
可能有帮助imagepanel download | SourceForge.net
imagepanel
Description
A class for Java Swing that extends the classic Panel to allow for the load of an existing image and resize accordingly to fill the entire Panel.
Categories
KEEP ME UPDATED
By clicking on "Follow" below, you are agreeing to the
Invalid email address. Please try again.
Sent to None.
You seem to have CSS turned off.
Please don't fill out this field.
You seem to have CSS turned off.
Please don't fill out this field.
User Reviews
Be the first to
of imagepanel!
Additional Project Details
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-0-0');trackbacks-0
开发环境：
System：Windows
WebBrowser：IE6+、Firefox3+
JavaEE Server：tomcat5.0.2.8、tomcat6
IDE：eclipse、MyEclipse 6.5
开发依赖库：
JavaEE5、ext 2.2.2
Email：hoojo_&#
一、Ext.ux.panel.DDTabPanel组件
可以拖动tabPanel的组件
需要用到的文件
DDTabPanel组件文件：Ext.ux.panel.DDTabPanel.js
DDTabPanel运行示例文件：Ext.hoo.form.DDTabPanel.js
dd-arrow-down.gif
ddTabPanelExample.htm
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&&html&
&title&Basic Component -- imageChooser&/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="content-Type" content="text/ charset=utf-8"/&
&meta http-equiv="author" content="hoojo"/&
&meta http-equiv="email" content="hoojo_@126.com"/&
&meta http-equiv="ext-lib" content="version 3.2"/&
&meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo"/&
&link rel="stylesheet" type="text/css" href="../ext2/resources/css/ext-all.css"/&
&link rel="stylesheet" type="text/css" href="../css/Ext.ux.ImageChooser.css"/&
&link rel="stylesheet" type="text/css" href="../css/style.css"/&
&script type="text/javascript" src="../ext2/adapter/ext/ext-base.js"&&/script&
&script type="text/javascript" src="../ext2/ext-all.js"&&/script&
&script type="text/javascript" src="../ext2/build/locale/ext-lang-zh_CN-min.js"&&/script&
&script type="text/javascript" src="Ext.ux.form.ImageField.js"&&/script&
&script type="text/javascript" src="Ext.ux.ImageChooser.js"&&/script&
&script type="text/javascript" src="chooser.js"&&/script&
&script type="text/javascript" src="Ext.hoo.form.FoodImageField.js"&&/script&
&div id="show" style="margin: <span style="color: #"&&/div&
&div id="showField" style="margin: <span style="color: #"&&/div&
&div id="buttons" style="margin:<span style="color: #"&&/div&
&div id="images" style="margin:<span style="color: #width:<span style="color: #0"&&/div&
&/body&&/html&
DDTabPanel.css
.dd-arrow-down.dd-arrow-down-invisible {
visibility: }&.dd-arrow-down {
background-image: url(../images/dd-arrow-down.gif);
visibility:
z-index: <span style="color: #000;
width: <span style="color: #
height: <span style="color: #
background-repeat: no-}&html, body {
font: 10pt "Segoe UI","Tahoma","Helvetica","Arial",sans-
padding: <span style="color: #}&#container {
margin: <span style="color: #px 10}
Ext.ux.panel.DDTabPanel.js
/*global Ext*/Ext.namespace('Ext.ux.panel');/** * &p&A tab panel which supports drag and drop behaviour for tabs. Usage and configuration are identical to {@link Ext.TabPanel}, with the sole exception of two extra configuration options to adjust the drop arrow indicator position.&/p& * &p&This extension can also be created using the &b&ddtabpanel&/b& xtype.&br/&&&/p& * &p&Based on the code of &a href="/forum/member.php?u=22731"&thommy&/a& and &a href="/forum/member.php?u=37284"&rizjoj&/a& in the topic &a href="/forum/showthread.php?t=23264"&Draggable Panel in a TabPanel&/a&.&/p& * &p&Demo link: &a href="http://extjs-ux.org/repo/authors/Matti/trunk/Ext/ux/panel/DDTabPanel/demo.html"&http://extjs-ux.org/repo/authors/Matti/trunk/Ext/ux/panel/DDTabPanel/demo.html&/a& * &br /&Forum thread: &a href="/forum/showthread.php?p=264712"&/forum/showthread.php?p=264712&/a&&br/&&&/p& * &b&CSS Styles:&/b& * &pre&&code&.dd-arrow-down.dd-arrow-down-invisible {
visibility:}.dd-arrow-down {
background-image: url( &your_down_arrow_image& );
visibility:
z-index: 20000;
height: 16
left: 0;}&/code&&/pre& * &br /&&b&Example Usage:&/b& * &pre&&code&var tabs = new Ext.ux.panel.DDTabPanel({
renderTo: Ext.getBody(),
title: 'Tab 1',
html: 'A simple tab'
title: 'Tab 2',
html: 'Another one'
}]});&/code&&/pre& * @class Ext.ux.panel.DDTabPanel * @extends Ext.TabPanel * @author Original by &a href="/forum/member.php?u=22731"&thommy&/a& and &a href="/forum/member.php?u=37284"&rizjoj&/a&&br /&Published and polished by: Mattias Buelens (&a href="/forum/member.php?u=41421"&Matti&/a&) * @license Licensed under the terms of the Open Source &a href="http://www.gnu.org/licenses/lgpl.html"&LGPL 3.0 license&/a&. Commercial use is permitted to the extent that the code/component(s) do NOT become part of another Open Source or Commercially licensed development library or toolkit without explicit permission.
* @version 1.0.2 (Dec 18, 2008) */Ext.ux.panel.DDTabPanel = Ext.extend(Ext.TabPanel, {
* @cfg {Number} arrowOffsetX
* The horizontal offset for the drop arrow indicator, in pixels (defaults to -9).
arrowOffsetX: -9,
* @cfg {Number} arrowOffsetY
* The vertical offset for the drop arrow indicator, in pixels (defaults to -8).
arrowOffsetY: -8,&
// Overwritten: assign the drag and drop group id
/** @private */
initComponent: function() {
Ext.ux.panel.DDTabPanel.superclass.initComponent.call(this);
this.ddGroupId = 'dd-tabpanel-group-' + Ext.ux.panel.DDTabPanel.superclass.getId.call(this);
// Overwritten: declare the tab panel as a drop target
/** @private */
initEvents: function(){
Ext.ux.panel.DDTabPanel.superclass.initEvents.call(this);
// Create a drop target for this tab panel
var tabsDDGroup = this.ddGroupId;
this.dd = new Ext.ux.panel.DDTabPanel.DropTarget(this, {
ddGroup: tabsDDGroup
// Create a drop arrow indicator
this.arrow = Ext.DomHelper.append(
Ext.getBody(),
'&div class="dd-arrow-down dd-arrow-down-invisible"&&/div&',
//this.arrow.dom.style.display = "none";//初始化的时候隐藏
this.arrow.setStyle({display: "none"});
// Overwritten: init the drag source after (!) rendering the tab
/** @private */
initTab: function(tab, index){
Ext.ux.panel.DDTabPanel.superclass.initTab.call(this, tab, index);
// Set the initial tab position
tab.position = (index + 1) * 2; // 2, 4, 6, 8, ... (2n)
tab.on('render', function(tab){
// Make this tab a drag source
var id = this.id + '__' + tab.
var tabsDDGroup = this.ddGroupId;
tab.ds = new Ext.dd.DragSource(id, {
ddGroup: tabsDDGroup,
dropEl: tab,
dropElHeader: Ext.get(id, true)
// Activate this tab before starting the drag action
tab.ds.beforeDragEnter = function(target, event, id){
target.tabpanel.activate(this.dropEl);
//target.tabpanel.arrow.dom.style.display = "block";//显示放入的时候，显示图标
//target.tabpanel.arrow.setStyle({display: "block"});
// Activate this tab on mouse down
// Fixed bug which prevents a tab from being activated by clicking it
tab.ds.onMouseDown = (function(event){
this.activate(tab);
}).createDelegate(this);
// Force the tab to render
tab.show();
}});&// Ext.ux.panel.DDTabPanel.DropTarget// Implements the drop behavior of the tab panel/** @private */Ext.ux.panel.DDTabPanel.DropTarget = Ext.extend(Ext.dd.DropTarget, {
constructor: function(tabpanel, config){
this.tabpanel =
// The drop target is the header area of the given tab panel
var target = Ext.select('div.x-tab-panel-header', false, tabpanel.getEl().dom).elements[0];
Ext.ux.panel.DDTabPanel.DropTarget.superclass.constructor.call(this, target, config);
notifyOver: function(dd, e, data){
var tabs = this.tabpanel.
var last = tabs.&
if (last & 2) {
return 'x-dd-drop-nodrop';
var larrow = this.tabpanel.&
// Getting the absolute X,Y coordinates by encapsulating the dom
// element into an Ext.Element and using getX() and getY() methods.
var panelDom = new Ext.Element(this.el.dom);
var tabPanelLeft = panelDom.getX();
var tabPanelTop = panelDom.getY();&
var eventPosX = e.getPageX();&
for (var i = 0; i & i++) {
var tab = tabs.itemAt(i);
// Is this tab target of the drop operation?
var tabDom = tab.ds.dropElHeader.
// Getting the absolute X,Y coordinates by encapsulating the dom
// element into an Ext.Element and using getX() and getY() methods.
var tabLeft = new Ext.Element(tabDom).getX();
var tabMiddle = tabLeft + tabDom.clientWidth / 2;&
if (eventPosX &= tabMiddle) {
left = tabL
if (typeof(left) == 'undefined') {
var lastTab = tabs.itemAt(last - 1);
var dom = lastTab.ds.dropElHeader.
left = (tabPanelLeft + dom.offsetLeft + dom.clientWidth) + 3;
larrow.setTop(tabPanelTop + this.tabpanel.arrowOffsetY);
larrow.setLeft(left + this.tabpanel.arrowOffsetX);
larrow.removeClass('dd-arrow-down-invisible');
larrow.setStyle({display: "block"});
return 'x-dd-drop-ok';
notifyDrop: function(dd, e, data){
this.tabpanel.arrow.addClass('dd-arrow-down-invisible');&
var tabPanelOffset = this.tabpanel.el.dom.offsetL
var tabs = this.tabpanel.&
// At this point the items in 'tabs' are sorted by their positions
var tabDom = new Ext.Element(this.tabpanel.el.dom);
// Getting the absolute X,Y coordinates by encapsulating the dom
// element into an Ext.Element and using getX() and getY() methods.
var eventPosX = e.getPageX() - tabDom.getX();&
var last = tabs.
var newPos =
dd.dropEl.position = last * 2 + 1; // default: 'behind the rest'&
for (var i = 0; i & i++) {
var tab = tabs.itemAt(i);
// Is this tab target of the drop operation?
var dom = tab.ds.dropElHeader.
var tabLeft = tabPanelOffset + dom.offsetL
var tabRight = tabLeft + dom.clientW
var tabMiddle = tabLeft + dom.clientWidth / 2;&
if (eventPosX &= tabRight) {
dd.dropEl.position = eventPosX & tabMiddle ? tab.position + 1 : tab.position - 1;
newPos = eventPosX & tabMiddle ? i + 1 :
dd.proxy.hide();&
dd.el.dom.parentNode.insertBefore(dd.el.dom, dd.el.dom.parentNode.childNodes[newPos]);&
// Sort tabs by their actual position
tabs.sort('ASC', function(a, b){
return a.position - b.
// Adjust tab position values
tabs.each(function(tab, index){
tab.position = (index + 1) * 2;
var larrow = this.tabpanel.
larrow.setStyle({display: "none"});
//this.tabpanel.arrow.dom.style.display = "none";
return true;
notifyOut: function(dd, e, data) {
this.tabpanel.arrow.addClass('dd-arrow-down-invisible');
}});&Ext.reg('ddtabpanel', Ext.ux.panel.DDTabPanel);
Ext.hoo.form.DDTabPanel.js
/** * @function 可以拖拽的tabPanel * @auhor: hoojo * @createDate: Sep 16, :12 PM * @blog: blog.csdn.net/IBM_hoojo * @email: hoojo_&# * @class Ext.hoo.form.DDTabPanel * @extends Ext.ux.panel.DDTabPanel */Ext.ns("Ext.hoo.form");Ext.hoo.form.DDTabPanel = Ext.extend(Ext.ux.panel.DDTabPanel, {
constructor: function () {
Ext.hoo.form.DDTabPanel.superclass.constructor.call(this, {
renderTo: Ext.getBody(),
height: 500,
title: "我的主页",
html: "这是一个主页"
title: "站内新闻",
html: "重大新闻"
title: "关于我们",
html: "网址建设"
}});&Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "../ext2/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "qtip";
new Ext.hoo.form.DDTabPanel();});
二、Images choose选择控件
可以选择图片、过滤图片，及显示图片详情
需要用到的文件
Ext.ux.ImageChooser.css
chooser.js
chooser组件：Ext.ux.form.ImageField.js
Ext.ux.ImageChooser.js
示例：Ext.hoo.form.FoodImageField.js
imageSelectedExample.htm
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&&html&
&title&Basic Component -- imageChooser&/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="content-Type" content="text/ charset=utf-8"/&
&meta http-equiv="author" content="hoojo"/&
&meta http-equiv="email" content="hoojo_@126.com"/&
&meta http-equiv="ext-lib" content="version 3.2"/&
&meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo"/&
&link rel="stylesheet" type="text/css" href="../ext2/resources/css/ext-all.css"/&
&link rel="stylesheet" type="text/css" href="../css/Ext.ux.ImageChooser.css"/&
&link rel="stylesheet" type="text/css" href="../css/style.css"/&
&script type="text/javascript" src="../ext2/adapter/ext/ext-base.js"&&/script&
&script type="text/javascript" src="../ext2/ext-all.js"&&/script&
&script type="text/javascript" src="../ext2/build/locale/ext-lang-zh_CN-min.js"&&/script&
&script type="text/javascript" src="Ext.ux.form.ImageField.js"&&/script&
&script type="text/javascript" src="Ext.ux.ImageChooser.js"&&/script&
&script type="text/javascript" src="chooser.js"&&/script&
&script type="text/javascript" src="Ext.hoo.form.FoodImageField.js"&&/script&
&div id="show" style="margin: <span style="color: #"&&/div&
&div id="showField" style="margin: <span style="color: #"&&/div&
&div id="buttons" style="margin:<span style="color: #"&&/div&
&div id="images" style="margin:<span style="color: #width:<span style="color: #0"&&/div&
&/body&&/html&
Ext.ux.ImageChooser.css
/* * Ext JS Library 2.0 * Copyright(c) , Ext JS, LLC. * licensing&# *
* /license */&#img-chooser-dlg .details{
padding: <span style="color: #
text-align:
} #img-chooser-dlg .details-info{
border-top: <span style="color: #px solid #
font: 11px Arial, Helvetica, sans-
margin-top: <span style="color: #
padding-top: <span style="color: #
text-align:
} #img-chooser-dlg .details-info b{
color: #555555;
margin-bottom: <span style="color: # } #img-chooser-dlg .details-info span{
margin-bottom: <span style="color: #
margin-left: <span style="color: # } &#img-chooser-view{
background:
font: 11px Arial, Helvetica, sans-} #img-chooser-view .thumb{
background: #
padding: <span style="color: # } #img-chooser-view .thumb img{
height: <span style="color: #
width: <span style="color: # } #img-chooser-view .thumb-wrap{
margin: <span style="color: #
margin-right: 0;
padding: <span style="color: #} #img-chooser-view .thumb-wrap span{
text-align:
} #img-chooser-view .x-view-over{
border:<span style="color: #px solid #
background: #efefef url(../resources/images/default/grid/row-over.gif) repeat-
padding: <span style="color: # }#img-chooser-view .x-view-selected{
background: #DFEDFF;
border: <span style="color: #px solid #6593
padding: <span style="color: # } #img-chooser-view .x-view-selected .thumb{
background: }#img-chooser-view .x-view-selected span{
color:#1A4D8F;}#img-chooser-view .loading-indicator {
font-size:<span style="color: #
background-image:url('../resources/images/grid/loading.gif');
background-repeat: no-
background-position:
padding-left:<span style="color: #
margin:<span style="color: # }
.x-form-field-wrap .x-form-trigger{
background:transparent url(../ext2/resources/images/default/form/search-trigger.gif) no-repeat 0 0 !}.x-form-imagefield {
text-align:
padding-right:<span style="color: #}.ext-safari .x-form-field-wrap .x-form-trigger {
right:-17px !}.x-form-imagefield-image {
width:<span style="color: #
height:<span style="color: #
background:#
border: <span style="color: #px solid #B5B8C8;}.images-view .x-window-body{
background: #
color: #000000;}.images-view .thumb{
border:<span style="color: #px solid #
padding: <span style="color: #
height: <span style="color: #
width: <span style="color: #}
.images-view .thumb-wrap{
margin: <span style="color: #
margin-right: 0;
padding: <span style="color: #
.images-view .x-view-over{
border:<span style="color: #px solid #
background: #
padding: <span style="color: #
.images-view .x-view-selected{
background: #
border:<span style="color: #px solid #6699
padding: <span style="color: #
.images-view .x-view-selected .thumb{
border:<span style="color: #px solid #6699
chooser.js
/* * Ext JS Library 2.2.1 * Copyright(c) , Ext JS, LLC. * licensing&# *
* /license */&/* * Ext JS Library 2.0 * Copyright(c) , Ext JS, LLC. * licensing&# *
* /license */ var ImageChooser = function(config){
this.config =}&ImageChooser.prototype = {
// cache data by image name for easy lookup
lookup : {},
show : function(el, callback){
if(!this.win){
this.initTemplates();
this.store = new Ext.data.JsonStore({
url: this.config.url,
root: 'images',
'name', 'url',
{name:'size', type: 'float'},
{name:'lastmod', type:'date', dateFormat:'timestamp'}
listeners: {
'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
this.store.load();
var formatSize = function(data){
if(data.size & 1024) {
return data.size + " bytes";
return (Math.round(((data.size*10) / 1024))/10) + " KB";
var formatData = function(data){
data.shortName = data.name.ellipse(15);
data.sizeString = formatSize(data);
data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
this.lookup[data.name] =
this.view = new Ext.DataView({
tpl: this.thumbTemplate,
singleSelect: true,
overClass:'x-view-over',
itemSelector: 'div.thumb-wrap',
emptyText : '&div style="padding:<span style="color: #"&No images match the specified filter&/div&',
store: this.store,
listeners: {
'selectionchange': {fn:this.showDetails, scope:this, buffer:100},
'dblclick'
: {fn:this.doCallback, scope:this},
'loadexception'
: {fn:this.onLoadException, scope:this},
'beforeselect'
: {fn:function(view){
return view.store.getRange().length & 0;
prepareData: formatData.createDelegate(this)
var cfg = {
title: 'Choose an Image',
id: 'img-chooser-dlg',
layout: 'border',
minWidth: 500,
minHeight: 300,
modal: true,
closeAction: 'hide',
border: false,
id: 'img-chooser-view',
region: 'center',
autoScroll: true,
items: this.view,
text: 'Filter:'
xtype: 'textfield',
id: 'filter',
selectOnFocus: true,
width: 100,
listeners: {
'render': {fn:function(){
Ext.getCmp('filter').getEl().on('keyup', function(){
this.filter();
}, this, {buffer:500});
}, scope:this}
}, ' ', '-', {
text: 'Sort By:'
id: 'sortSelect',
xtype: 'combo',
typeAhead: true,
triggerAction: 'all',
width: 100,
editable: false,
mode: 'local',
displayField: 'desc',
valueField: 'name',
lazyInit: false,
value: 'name',
store: new Ext.data.SimpleStore({
fields: ['name', 'desc'],
data : [['name', 'Name'],['size', 'File Size'],['lastmod', 'Last Modified']]
listeners: {
'select': {fn:this.sortImages, scope:this}
id: 'img-detail-panel',
region: 'east',
split: true,
width: 150,
minWidth: 150,
maxWidth: 250
buttons: [{
id: 'ok-btn',
text: 'OK',
handler: this.doCallback,
scope: this
text: 'Cancel',
handler: function(){ this.win.hide(); },
scope: this
key: 27, // Esc key
handler: function(){ this.win.hide(); },
scope: this
Ext.apply(cfg, this.config);
this.win = new Ext.Window(cfg);
this.reset();
this.win.show(el);
this.callback =
this.animateTarget =
initTemplates : function(){
this.thumbTemplate = new Ext.XTemplate(
'&tpl for="."&',
'&div class="thumb-wrap" id="{name}"&',
'&div class="thumb"&&img src="{url}" title="{name}"&&/div&',
'&span&{shortName}&/span&&/div&',
this.thumbTemplate.compile();
this.detailsTemplate = new Ext.XTemplate(
'&div class="details"&',
'&tpl for="."&',
'&img src="{url}"&&div class="details-info"&',
'&b&Image Name:&/b&',
'&span&{name}&/span&',
'&b&Size:&/b&',
'&span&{sizeString}&/span&',
'&b&Last Modified:&/b&',
'&span&{dateString}&/span&&/div&',
this.detailsTemplate.compile();
showDetails : function(){
var selNode = this.view.getSelectedNodes();
var detailEl = Ext.getCmp('img-detail-panel').
if(selNode && selNode.length & 0){
selNode = selNode[0];
Ext.getCmp('ok-btn').enable();
var data = this.lookup[selNode.id];
detailEl.hide();
this.detailsTemplate.overwrite(detailEl, data);
detailEl.slideIn('l', {stopFx:true,duration:.2});
Ext.getCmp('ok-btn').disable();
detailEl.update('');
filter : function(){
var filter = Ext.getCmp('filter');
this.view.store.filter('name', filter.getValue());
this.view.select(0);
sortImages : function(){
var v = Ext.getCmp('sortSelect').getValue();
this.view.store.sort(v, v == 'name' ? 'asc' : 'desc');
this.view.select(0);
reset : function(){
if(this.win.rendered){
Ext.getCmp('filter').reset();
this.view.getEl().dom.scrollTop = 0;
this.view.store.clearFilter();
this.view.select(0);
doCallback : function(){
var selNode = this.view.getSelectedNodes()[0];
var callback = this.
var lookup = this.
this.win.hide(this.animateTarget, function(){
if(selNode && callback){
var data = lookup[selNode.id];
callback(data);
onLoadException : function(v,o){
this.view.getEl().update('&div style="padding:<span style="color: #"&Error loading images.&/div&');
}};&String.prototype.ellipse = function(maxLength){
if(this.length & maxLength){
return this.substr(0, maxLength-3) + '...';
Ext.ux.form.ImageField.js
Ext.namespace('Ext.ux.form');&/** * @class Ext.form.ImageField * @extends Ext.BoxComponent * Class for form image fields that provides event handling value handling and other functionality. * @constructor * Creates a new ImageField * @param {Object} config Configuration options */Ext.ux.form.ImageField = Ext.extend(Ext.BoxComponent, {&
* @cfg {String} fieldLabel The label text to display next to this field (defaults to '')
* @cfg {String} labelStyle A CSS style specification to apply directly to this field's label (defaults to the
* container's labelStyle value if set, or ''). For example, &code&labelStyle: 'font-weight:'&/code&.
* @cfg {String} labelSeparator The standard separator to display after the text of each form label (defaults
* to the value of {@link Ext.layout.FormLayout#labelSeparator}, which is a colon ':' by default).
To display
* no separator for this field's label specify empty string ''.
* @cfg {Boolean} hideLabel True to completely hide the label element (defaults to false)
* @cfg {String} clearCls The CSS class used to provide field clearing (defaults to 'x-form-clear-left')
* @cfg {String} itemCls An additional CSS class to apply to the wrapper's form item element of this field (defaults
* to the container's itemCls value if set, or '').
Since it is applied to the item wrapper, it allows you to write
* standard CSS rules that can apply to the field, the label (if specified) or any other element within the markup for
* the field. NOTE: this will not have any effect on fields that are not part of a form.
* @cfg {String} inputType The type attribute for this field -- this is required for all form fields
* to render properly in a FormLayout as it does check this value to determine whether of not to render it.
* 'image' is the default and only value for this property.
inputType : 'image',
* @cfg {Mixed} value A value to initialize this field with (defaults to '').
value : '',
* @cfg {String} name The field's HTML name attribute (defaults to "").
name : '',
* @cfg {String} cls A custom CSS class to apply to the field's underlying element (defaults to "").
* @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-imagefield-invalid")
invalidClass : "x-form-imagefield-invalid",
* @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided
* (defaults to "The value in this field is invalid")
invalidText : "This field is required",
* @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
automatic validation (defaults to false).
validationEvent : 'change',
* @cfg {Number} validationDelay The length of time in milliseconds after a validation event occurs until validation
* is initiated (defaults to 250)
validationDelay : 250,
* @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "input", type: "text", size: "20", autocomplete: "off"})
defaultAutoCreate : {tag: "div"},
* @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-image")
fieldClass : "x-form-imagefield",
* @cfg {String} msgTarget The location where error text should display.
Should be one of the following values
* (defaults to 'qtip'):
msgTarget : 'qtip',
* @cfg {String} msgFx &b&Experimental&/b& The effect used when displaying a validation message under the field
* (defaults to 'normal').
msgFx : 'normal',
* @cfg {Boolean} disabled True to disable the field (defaults to false).
disabled : false,
* @cfg {Boolean} optional True allow the image field to not have a value (value == '')
* Set this to true when the image field is not required to be specified
* (defaults to false)
optional : false,
* @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
hideTrigger : false,
* @cfg {String} triggerClass A CSS class to apply to the trigger
triggerClass : '',
* @cfg {String} defaultImage The default image to display in the field (default to Ext.BLANK_IMAGE_URL)
defaultImage: Ext.BLANK_IMAGE_URL,
* @cfg {Number} browserWidth The width of the image browser window
browserWidth: 300,
* @cfg {Number} browserHeight The height of the image browser window
browserHeight: 300,
* @cfg {String} browserTitle The title of the image browser window
browserTitle: '请选择图片',
* @cfg {Boolean} alwaysLoadStore True reload the data store every time the image browser opens
alwaysLoadStore: false,
* @cfg {Object} windowConfig Additional configuration for the image browser window
windowConfig: {},
* @cfg {Object} view The {Ext.DataView} of the image browser
* @cfg {String} valueField The data store field to return as the field's value
valueField : 'url',
// Private
isStoreLoaded: false,
// private
isFormField : true,
// Private
selections: [],
// Private
selectedRecords: [],
// private
initComponent : function(){
Ext.ux.form.ImageField.superclass.initComponent.call(this);
this.addEvents(
* @event change
* Fires if the field value has changed.
* @param {Ext.ux.form.ImageField} this
* @param {String} newValue The new value
* @param {String} oldValue The original value
* @event invalid
* Fires after the field has been marked as invalid.
* @param {Ext.ux.form.ImageField} this
* @param {String} msg The validation message
'invalid',
* @event valid
* Fires after the field has been validated with no errors.
* @param {Ext.ux.form.ImageField} this
* @event expand
* Fires when the image browser is expanded
* @param {Ext.ux.form.ImageField} this
* @param {Ext.DataView} view The Ext.DataView of the image browser
* @event collapse
* Fires when the image browser is collapsed
* @param {Ext.ux.form.ImageField} this
* @param {Ext.DataView} view The Ext.DataView of the image browser
'collapse'
// if store was auto loaded, mark it as loaded
if (this.view.store.autoLoad) {
this.isStoreLoaded =
* Returns the name attribute of the field if available
* @return {String} name The field name
getName: function(){
return this.rendered && this.hiddenField.dom.name ? this.hiddenField.dom.name : '';
getSelectedRecords : function(){
this.selections = this.view.getSelectedIndexes();
this.selectedRecords = this.view.getSelectedRecords();
return this.selectedR
// private
onRender : function(ct, position){
Ext.ux.form.ImageField.superclass.onRender.call(this, ct, position);
if(!this.el){
var cfg = this.getAutoCreate();
this.el = ct.createChild(cfg, position);
this.imageEl = this.el.insertFirst({tag: 'img', src: this.defaultImage });
// create hidden field to hold the value for the image field
this.hiddenField = this.imageEl.insertSibling({tag:'input', type:'hidden', name: this.name, id: this.id + '-hidden'}, 'before');
this.el.addClass([this.fieldClass, this.cls]);
this.imageEl.addClass(this.fieldClass + '-image');
this.initValue();
// wrap it up
this.wrap = this.imageEl.wrap({cls: "x-form-field-wrap"});
this.trigger = this.wrap.createChild({tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger"});
if(this.hideTrigger){
this.trigger.setDisplayed(false);
this.initTrigger();
// private
initTrigger : function(){
this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
this.trigger.addClassOnOver('x-form-trigger-over');
this.trigger.addClassOnClick('x-form-trigger-click');
// private
onDestroy : function(){
if(this.trigger){
this.trigger.removeAllListeners();
this.trigger.remove();
this.wrap.remove();
Ext.ux.form.ImageField.superclass.onDestroy.call(this);
// private
onDisable : function(){
this.wrap.addClass('x-item-disabled');
this.hiddenField.dom.disabled =
// private
onEnable : function(){
this.wrap.removeClass('x-item-disabled');
this.hiddenField.dom.disabled =
// private
onShow : function(){
this.wrap.dom.style.display = '';
this.wrap.dom.style.visibility = 'visible';
// private
onHide : function(){
this.wrap.dom.style.display = 'none';
// private
onSelect: function(){
var selectedRecords = '';
var returnValue = (this.getSelectedRecords().length & 0) ? this.selectedRecords[0].get(this.valueField) : '';
if (returnValue !== this.value) {
this.setValue(returnValue);
this.window.hide();
this.fireEvent('collapse', this, this.view);
* The function that should handle the trigger's click event.
This method does nothing by default until overridden
* by an implementing function.
* @method
* @param {EventObject} e
onTriggerClick : function(e){
if(this.disabled){
// load the data store
if (!this.isStoreLoaded) {
this.view.store.load();
this.isStoreLoaded =
} else if (this.alwaysLoadStore === true) {
this.view.store.reload();
// setup window with forced config
this.windowConfig = Ext.apply(this.windowConfig, {
title: this.browserTitle,
width: this.browserWidth,
height: this.browserHeight,
draggable: false,
resizable: false,
closable: false,
autoScroll: true,
layout: 'fit',
text: '选择',
handler: this.onSelect,
scope: this
text: '取消',
handler: function(){
this.view.clearSelections();
this.window.hide();
this.fireEvent('collapse', this, this.view);
}, scope: this
items: this.view
shadow: false,
frame: true
// create the image browser window
if(!this.window){
this.window = new Ext.Window(this.windowConfig);
this.window.setPagePosition(this.trigger.getRight(), this.trigger.getTop());
this.view.on('dblclick', this.onSelect, this);
// show the image browser window
this.window.show();
this.fireEvent('expand', this, this.view);
// private
initValue : function(){
if(this.value !== undefined){
this.hiddenField.dom.value = (this.value === null || this.value === undefined ? '' : this.value);
this.hiddenField.dom.value = '';
* Returns true if this field has been changed since it was originally loaded and is not disabled.
isDirty : function() {
if(this.disabled) {
return String(this.getValue()) !== String(this.originalValue);
// private
afterRender : function(){
Ext.ux.form.ImageField.superclass.afterRender.call(this);
this.initEvents();
* Resets the current field value to the originally loaded value and clears any validation messages
reset : function(){
this.setValue(this.originalValue);
this.clearInvalid();
// private
initEvents : function(){
if(this.validationEvent !== false){
this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
// reference to original value for reset
this.originalValue = this.getValue();
* Returns whether or not the field value is currently valid
* @param {Boolean} preventMark True to disable marking the field invalid
* @return {Boolean} True if the value is valid, else false
isValid : function(preventMark){
if(this.disabled){
var restore = this.preventM
this.preventMark = preventMark ===
var v = this.validateValue(this.processValue(this.getRawValue()));
this.preventMark =
* Validates the field value
* @return {Boolean} True if the value is valid, else false
validate : function(){
if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
this.clearInvalid();
// protected - should be overridden by subclasses if necessary to prepare raw values for validation
processValue : function(value){
// private
validateValue : function(value){
if (this.hiddenField.dom.value === '') {
this.markInvalid();
* Mark this field as invalid, using {@link #msgTarget} to determine how to display the error and
* applying {@link #invalidClass} to the field's element.
* @param {String} msg (optional) The validation message (defaults to {@link #invalidText})
markInvalid : function(msg){
if(!this.rendered || this.preventMark){ // not rendered
this.el.addClass(this.invalidClass);
msg = msg || this.invalidT
switch(this.msgTarget){
case 'qtip':
this.el.dom.qtip =
this.el.dom.qclass = 'x-form-invalid-tip';
if(Ext.QuickTips){ // fix for floating editors interacting with DND
Ext.QuickTips.enable();
case 'title':
this.el.dom.title =
case 'under':
if(!this.errorEl){
var elp = this.getErrorCt();
this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
this.errorEl.setWidth(elp.getWidth(true)-20);
this.errorEl.update(msg);
Ext.ux.form.ImageField.msgFx[this.msgFx].show(this.errorEl, this);
case 'side':
if(!this.errorIcon){
var elp = this.getErrorCt();
this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
this.alignErrorIcon();
this.errorIcon.dom.qtip =
this.errorIcon.dom.qclass = 'x-form-invalid-tip';
this.errorIcon.show();
this.on('resize', this.alignErrorIcon, this);
var t = Ext.getDom(this.msgTarget);
t.innerHTML =
t.style.display = this.msgD
this.fireEvent('invalid', this, msg);
// private
getErrorCt : function(){
return this.el.findParent('.x-form-element', 5, true) || // use form element wrap if available
this.el.findParent('.x-form-field-wrap', 5, true);
// else direct field wrap
// private
alignErrorIcon : function(){
this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
* Clear any invalid styles/messages for this field
clearInvalid : function(){
if(!this.rendered || this.preventMark){ // not rendered
this.el.removeClass(this.invalidClass);
switch(this.msgTarget){
case 'qtip':
this.el.dom.qtip = '';
case 'title':
this.el.dom.title = '';
case 'under':
if(this.errorEl){
Ext.ux.form.ImageField.msgFx[this.msgFx].hide(this.errorEl, this);
case 'side':
if(this.errorIcon){
this.errorIcon.dom.qtip = '';
this.errorIcon.hide();
this.un('resize', this.alignErrorIcon, this);
var t = Ext.getDom(this.msgTarget);
t.innerHTML = '';
t.style.display = 'none';
this.fireEvent('valid', this);
* Returns the raw data value which may or may not be a valid, defined value.
To return a normalized value see {@link #getValue}.
* @return {Mixed} value The field value
getRawValue : function(){
var v = this.rendered ? this.hiddenField.getValue() : Ext.value(this.value, '');
* Returns the normalized data value (undefined will be returned as '').
To return the raw value see {@link #getRawValue}.
* @return {Mixed} value The field value
getValue : function(){
if(!this.rendered) {
return this.
var v = this.hiddenField.getValue();
if(v === undefined){
* Sets the underlying DOM field's value directly, bypassing validation.
To set the value with validation see {@link #setValue}.
* @param {Mixed} value The value to set
setRawValue : function(v){
return this.hiddenField.dom.value = (v === null || v === undefined ? '' : v);
* Sets a data value into the field and validates it.
To set the value directly without validation see {@link #setRawValue}.
* @param {Mixed} value The value to set
setValue : function(v){
var original = this.
this.value =
if(this.rendered){
this.hiddenField.dom.value = (v === null || v === undefined ? '' : v);
this.imageEl.dom.src = (v === null || v === undefined ? '' : v);
this.fireEvent('change', this, original, v);
this.validate();
}&});&// anything other than normal should be considered experimentalExt.ux.form.ImageField.msgFx = {
normal : {
show: function(msgEl, f){
msgEl.setDisplayed('block');
hide : function(msgEl, f){
msgEl.setDisplayed(false).update('');
show: function(msgEl, f){
msgEl.slideIn('t', {stopFx:true});
hide : function(msgEl, f){
msgEl.slideOut('t', {stopFx:true,useDisplay:true});
slideRight : {
show: function(msgEl, f){
msgEl.fixDisplay();
msgEl.alignTo(f.el, 'tl-tr');
msgEl.slideIn('l', {stopFx:true});
hide : function(msgEl, f){
msgEl.slideOut('l', {stopFx:true,useDisplay:true});
}};&Ext.reg('imagefield', Ext.ux.form.ImageField);
Ext.ux.ImageChooser.js
Ext.ux.ImageChooser = function(config) {
this.config =
this.initTemplates();
this.store = new Ext.data.JsonStore({
url: this.config.url,
root: 'images',
'name', 'url'
listeners: {
//'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
this.store.load();&
this.view = new Ext.DataView({
tpl: this.thumbTemplate,
singleSelect: true,
overClass:'x-view-over',
itemSelector: 'div.thumb-wrap',
emptyText : '&div style="padding:<span style="color: #"&没有图片，请上传&/div&',
store: this.store,
listeners: {
'selectionchange': {fn:this.setHideValue, scope:this, buffer:100},
'dblclick' : {fn:this.canelSelect, scope:this, buffer:100}
var cfg = {
id: 'img-chooser-dlg',
layout: 'border',
border: false,
id: 'img-chooser-view',
region: 'center',
autoScroll: true,
items: this.view
}//,{xtype:'textfield',id: this.hideId}
Ext.apply(cfg, this.config);
this.hideId = this.config.hideId;
Ext.ux.ImageChooser.superclass.constructor.call(this, cfg);
if(this.hideId) this.add({xtype:'hidden',id: this.hideId});};&Ext.extend(Ext.ux.ImageChooser, Ext.Panel, {
initTemplates : function(){
this.thumbTemplate = new Ext.XTemplate(
'&tpl for="."&',
'&div class="thumb-wrap" id="{name}"&',
'&div class="thumb"&&img src="{url}" title="{name}"&&/div&',
'&/div&',//&span&{shortName}&/span&
this.thumbTemplate.compile();
setHideValue : function(){
var selNodes = this.view.getSelectedNodes();
var hideObj = Ext.getCmp(this.hideId);
if(selNodes&&selNodes.length&0)
hideObj.setValue(selNodes[0].id);
setValue : function(value){
this.view.select(value);
canelSelect : function(view,index,node,e){
view.deselect(index);
var hideObj = Ext.getCmp(this.hideId);
hideObj.setValue('');
Ext.hoo.form.FoodImageField.js
/** * @function 可以选择图片的field * @auhor: hoojo * @createDate: Sep 17, :58 PM * @blog: blog.csdn.net/IBM_hoojo * @email: hoojo_&# * @class Ext.hoo.form.FoodImageField * @extends Ext.ux.ImageChooser */Ext.ns("Ext.hoo.form");Ext.hoo.form.FoodImageChooser = Ext.extend(Ext.ux.ImageChooser, {
constructor: function () {
Ext.hoo.form.FoodImageChooser.superclass.constructor.call(this, {
renderTo: "show",
hideId: 'iconImagesURL',
//fieldLabel: '图标',
url: 'images.json',
height: 120,
width: 225
}});&&Ext.hoo.form.FoodImageField = Ext.extend(Ext.ux.form.ImageField, {
constructor: function () {
this.store = new Ext.data.JsonStore({
autoLoad: true,
url: "images.json",
root: 'images',
'name', 'url'
listeners: {
//'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
this.tpl =
new Ext.XTemplate(
'&tpl for="."&',
'&div class="thumb-wrap" id="{name}"&',
'&div class="thumb"&&img src="{url}" title="{name}"&&/div&',
'&/div&',//&span&{shortName}&/span&
this.view = new Ext.DataView({
singleSelect: true,
emptyText : '&div style="padding:<span style="color: #"&没有图片，请上传&/div&',
store: this.store,
tpl: this.tpl
Ext.hoo.form.FoodImageField.superclass.constructor.call(this, {
renderTo: "showField",
//fieldLabel: '图标',
defaultImage: '../images/2.png',
height: 120,
width: 225
}});&Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "../ext2/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "qtip";
//new Ext.hoo.form.FoodImageChooser();
//new Ext.hoo.form.FoodImageField();
var chooser,&
function insertImage(data){
Ext.DomHelper.append('images', {
tag: 'img', src: data.url, style:'margin:<span style="color: #visibility:'
}, true).show(true).frame();
btn.focus();
function choose(btn){
if(!chooser){
chooser = new ImageChooser({
url:'images2.json',
width:515,
height:350
chooser.show(btn.getEl(), insertImage);
btn = new Ext.Button({
text: "Insert Image",
handler: choose,
renderTo: 'buttons'
images.json
{images:[{
name:'水果1号',url:'../images/2.png'},{
name:'水果2号',url:'../images/2.png'},{
name:'水果3号',url:'../images/2.png'},{
name:'水果4号',url:'../images/2.png'},{
name:'水果5号',url:'../images/2.png'},{
name:'水果6号',url:'../images/2.png'}]}
images2.json
{images:[{
name:'水果1号',url:'../images/2.png',size: 22.2, lastmod: },{
name:'水果2号',url:'../images/2.png',size: 52.2, lastmod: },{
name:'水果3号',url:'../images/2.png',size: 44.2, lastmod: },{
name:'水果4号',url:'../images/2.png',size: 25.7, lastmod: },{
name:'水果5号',url:'../images/2.png',size: 55.3, lastmod: },{
name:'水果6号',url:'../images/2.png',size: 77.8, lastmod: ""}]}
阅读(1618)
hoojo 所有文章遵循，要求署名、非商业、保持一致。在满足的基础上可以转载，但请以超链接形式注明出处。
262728291234567891011121314151618192021222324252627282930311234567
随笔分类(210)
随笔档案(60)
积分与排名
阅读排行榜
评论排行榜
