1745人阅读
Extjs4.2开发实战（3）
1.在使用Extjs框架进行开发 过程发现,使用类似如下弹出消息框时候&提示内容&靠左:Ext.Msg.alert('标题','提示内容',function(){});
2.为了界面的美观,可能客户会提出要求内容居中的效果,可调整为:
Ext.Msg.alert('标题','提示内容',function(){})
.getEl().dom.children[1].querySelector('div table').align=¢er&
3.当然,在提示内容字数长度达到默认窗口一部分长度时,则并无影响:
Ext.Msg.alert('系统消息','恭喜你成功预定了小米5,请在24小时内完成付款',function(){});效果如下:
4.如果,字数没有那么多,又不想加一段js代码,可以选择使用如下方法降低字数:
Ext.Msg.show({
title:'系统消息',
msg:'请填写带*的必填项',
buttons:Ext.Msg.OK,
5.另外,在偶然的情况下,如下方法,也会居中,大致操作为多次弹框,然后弹出其他的消息框,再次弹出该消息框,弹出窗口自动变小,并居中,原因未知,代码如下:
Ext.Msg.alert('上传成功!',o.result.resultMsg);
执行 上传-&提示框-&删除-&确认删除-&上传
出现效果二:
代码复杂,不便整合,只是又是一个未知原因了,也希望大神们讨论指导下.
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：19719次
排名：千里之外
原创：11篇
转载：10篇
(1)(2)(1)(2)(1)(1)(1)(1)(2)(1)(2)(5)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'&利用Ext Js生成动态树
&&& 今天在公司帮同事写了个用Ext Js生成动态树的Demo，在这里分享一下，也好供以后自己查阅。
要求生成一颗部门树，初始只列出根部门
当点击一个部门节点时，动态载入该部门下的直属子部门，并展开该部门节点
部门节点要求支持右键单击事件，当点击右键时，列出相关操作菜单
二. 关键类
这里主要涉及Ext JS的两个类:
Ext.tree.TreeNode
Ext.menu.Menu
相关API可以参考：
三. 代码示例
1. 先看一下测试页面
&http-equiv="Content-Type"&content="text/&charset=utf-8"
Reorder&TreePanel
&rel="stylesheet"&type="text/css"&href="../../resources/css/ext-all.css"&
&type="text/javascript"&src="../../adapter/ext/ext-base.js"
&type="text/javascript"&src="../../ext-all.js"
&type="text/javascript"&src="reorder.js"
&rel="stylesheet"&type="text/css"&href="../shared/examples.css"&
&rel="stylesheet"&type="text/css"&href="../shared/lib.css"&
&type="text/javascript"
/**************
&&&&onload事件
***************/
window.onload=function(){
&&&&createTree(3);
&type="text/javascript"&src="../shared/examples.js"
现在要生成一颗动态树
&id="container"
2. 再看一下生成树的函数
function&createTree(n){
&&&&Ext.QuickTips.init();
&&&&var&mytree=new&Ext.tree.TreePanel({
&&&&&&el:"container",
&&&&&&animate:true,
&&&&&&title:"Extjs动态树",
&&&&&&collapsible:true,
&&&&&&enableDD:true,
&&&&&&enableDrag:true,
&&&&&&rootVisible:true,
&&&&&&autoScroll:true,
&&&&&&autoHeight:true,
&&&&&&width:"30%",
&&&&&&lines:true
&&var&root=new&Ext.tree.TreeNode({
&&&&&&id:"root",
&&&&&&text:"集团公司",
&&&&&&expanded:true
&&&&for(var&i=0;i&n;i++){
&&&&&&&&var&sub1=new&Ext.tree.TreeNode({
&&&&&&&&id:i+1,
&&&&&&&&text:"子公司"+(i+1),
&&&&&&&&singleClickExpand:true,
&&&&&&&&listeners:{
&&&&&&&&&&&&
&&&&&&&&&&&&"click":function(node){
&&&&&&&&&&&&&&&&myExpand(node);
&&&&&&&&&&&&},
&&&&&&&&&&&&
&&&&&&&&&&&&"contextmenu":function(node,e){
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&menu=new&Ext.menu.Menu([
&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&text:"打开当前节点",
&&&&&&&&&&&&&&&&&&&&icon:"list.gif",
&&&&&&&&&&&&&&&&&&&&handler:function(){
&&&&&&&&&&&&&&&&&&&&&&&&myExpand(node);
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&text:"编辑当前节点",
&&&&&&&&&&&&&&&&&&&&&&&&icon:"list.gif",
&&&&&&&&&&&&&&&&&&&&&&&&handler:function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&alert(node.id);
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&text:"删除当前节点",
&&&&&&&&&&&&&&&&&&&&&&&&icon:"list.gif",
&&&&&&&&&&&&&&&&&&&&&&&&handler:function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&alert(node.id);
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&}]);
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&menu.showAt(e.getPoint());
&&&&&&&&&&&&}
&&&&&&&&root.appendChild(sub1);
&mytree.setRootNode(root);
&mytree.render();
3. 展开子节点的代码
function&myExpand(node){
&&&&if(node.id=='1'){
&&&&if(node.item(0)==undefined){
&&&&&&&&&&&&node.appendChild(new&Ext.tree.TreeNode({
&&&&&&&&id:node.id+'1',
&&&&&&&&text:node.text+"的第一个儿子",
&&&&&&&&hrefTarget:"mainFrame",
&&&&&&&&listeners:{
&&&&&&&&&&"click":function(node,e){
&&&&&&&&&&&&expand2(node)
&&&&&&&&&&&&}
&&&&&&&&}));
&&&&node.expand();
&&&&}else&if(node.id=='2'){
&&&&&&&&node.appendChild(new&Ext.tree.TreeNode({
&&&&&&&&id:node.id+'2',
&&&&&&&&text:node.text+"的第一个儿子",
&&&&&&&&hrefTarget:"mainFrame",
&&&&&&&&listeners:{
&&&&&&&&&&"click":function(node){
&&&&&&&&&&&&expand2(node)
&&&&&&&&&&&&}
&&&&&&&&}));
&&&&}else{
&&&&&&&&alert(node.id+"没有子部门了");
&&&& 读者可以自己运行一下如上代码，会发现如下现象：无论点击“子公司1”多少次，只会列出“子公司1的第一个儿子”一个节点，而每点击一次“子公司2”，就会多出一个“子公司2的第一个儿子”节点，这是为什么呢？
因为每次点击都会激发myExpand函数，而“子公司1”上加了node.item(0)==undefined的判断，这里明白了？
即：如果该部门下没有子部门，则载入子部门，否则只展开，不重新载入。
好了，就到这里吧，困了，就不详细解释了o(∩_∩)o...哈哈
本文已收录于以下专栏：
相关文章推荐
这个是我从ITeye里看到的，最近也在做这个例子，觉得那边的写的非常的不错，现在拿过来分享下，等自己的例子写好，也会拿上来分享的
EXTJS动态树的实现举例
一、描述：通过dwr实现JS与...
示例功能      通过树实现动态加载以及实现添加节点、删除节点、修改节点文本已经通过拖动移动节点等功能。     先创建树的表结构：
      通过树实现动态加载以及实现添加节点、删除节点、修改节点文本已经通过拖动移动节点等功能。
     先创建树的表结构：
Today we’re excited to release the first in a series of brand new features in Ext JS 4. Over the nex...
Ext JS actioncolumn动态加载图标/提示
今天，我们很高兴发布了一系列全新的功能在Ext JS 4。在接下来的几个星期，我们将推出我们Ext JS的beta版本 - 包的包装。虽然我们原本计划推出一个完整的beta现在，有些部分的框架已经稳定...
Ext.onReady(function(){
var form = getSerchFrom();
var grid = getGrid();
版本:Ext 4.2
上网查了好多,都是老版本的,无奈看api加调试终于弄出来了
//1先定义一个面板
　　ValuePanel = new Ext.grid.GridPanel({
利用多叉树实现Ext JS中的无限级树形菜单（一种构建多级有序树形结构JSON的方法）                  ...
一、问题研究的背景和意义
目前在Web应用程序开发领域，Ext JS框架已经逐渐被广泛使用，它是富客户端开发中出类拔萃的框架之一。在Ext的UI控件中，树形控件无疑是最为常用的控件之一，它...
他的最新文章
讲师：王哲涵
讲师：王渊命
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Ext JS 4.2.0 - Sencha Docs
Ext JS 4.2.0 - Sencha Docs
What&s New
We have also been posting summaries of new features and changes to :
First, check out our
to see what has changed.
Sencha also offers
for companies wishing to use Ext JS 4.2.
SDK Updates
Ext 4.2.0 Released
Ext 4.1.3 Released (support subscribers only)
Ext 4.1.2 Released (support subscribers only)
Ext 4.1.1 Released
Ext 4.1.0 Released
Ext 4.0.7 Released
Ext 4.0.6 Released (support subscribers only)
Ext 4.0.5 Released (support subscribers only)
Ext 4.0.4 Released (support subscribers only)
Ext 4.0.3 Released (support subscribers only)
Ext 4.0.2a Released
Ext 4.0.1 Released
Ext 4.0.0 Final Released
Application Architecture
DOM & Browser
Containers & Panels
Components
Components
Form Actions
Drag & Drop
Component Utilities
Data Models
Data Readers & Writers
Data Proxies
Data Stores
Native Classes
Native Extensions
Enumerations
User Extensions
Ext.form.field.Checkbox
Ext.form.field.Display
Ext.form.field.File
Ext.form.field.HtmlEditor
Ext.form.field.Radio
Ext.form.field.Spinner
Ext.form.field.Text
Ext.form.field.TextArea
Ext.form.field.Trigger
Ext.grid.column.Action
Ext.grid.column.CheckColumn
Ext.grid.column.Column
Ext.grid.feature.AbstractSummary
Ext.grid.feature.Grouping
Ext.grid.feature.Summary
Ext.grid.header.Container
Ext.grid.property.Grid
Ext.layout.container.Accordion
Ext.layout.container.Anchor
Ext.layout.container.Auto
Ext.layout.container.Border
Ext.layout.container.Column
Ext.layout.container.Form
Ext.layout.container.HBox
Ext.layout.container.VBox
Ext.menu.Item
Ext.menu.Menu
Ext.panel.Header
Ext.panel.Panel
Ext.panel.Table
Ext.panel.Tool
Ext.picker.Color
Ext.picker.Date
Ext.resizer.Splitter
Ext.selection.CheckboxModel
Ext.selection.Model
Ext.slider.Multi
Ext.tab.Panel
Ext.tip.Tip
Ext.toolbar.Paging
Ext.toolbar.Toolbar
Ext.tree.View
Ext.tree.plugin.TreeViewDragDrop
Ext.util.CSS
Ext.util.Filter
Ext.util.Floating
Ext.util.Format
Ext.util.KeyMap
Ext.util.KeyNav
Ext.util.Observable
Ext.util.Point
Ext.ux.PreviewPlugin
Ext.ux.form.MultiSelect
Ext.ux.grid.filter.DateTimeFilter
Ext.view.BoundList
Ext.view.Table
Ext.view.View
Ext.window.MessageBox
Ext.window.Window
Global_CSS