小编Edw*_*uay的帖子

如何在另一个Ext.Panel中彼此左右放置两个Ext.Panel?

我正在尝试在ExtJS中创建一个布局,该布局在顶部和底部左右两边都有一个网格,一个基本的父/子,主/明细布局:

wrapper_panel
panel_top
  [grid]
panel_bottom
  [left_area     right_area]
Run Code Online (Sandbox Code Playgroud)

但是,其中的两个区域位于panel_bottom彼此的顶部,而不是位于左侧和右侧

var left_area = new Ext.Panel({
    region: 'west',
    layout: 'fit',
    width: 100,
    items: []
});

var right_area = new Ext.Panel({
    region: 'center',
    layout: 'fit',
    width: 100,
    items: []
});


var panel_bottom = new Ext.Panel({
    //layout: 'border',
    region: 'south',
    items: [ left_area, right_area ]
})
Run Code Online (Sandbox Code Playgroud)

看起来像这样:

在此处输入图片说明

如果我创建了panel_bottom,layout: border则左右区域将完全消失。

我需要在底部区域面板中进行哪些更改,以便它们左右对齐?

附录

@vimvds,如果我添加width: 200或例如width: 300,我得到这个:

在此处输入图片说明

感谢您的回答,这使我放弃了它并改用table布局,这使我想到另一个问题,即如何定义百分比而不是height / width的绝对值

javascript extjs

2
推荐指数
1
解决办法
7516
查看次数

如何使用JQuery获取第一个图像的图像源?

在下面的代码中,我希望在页面加载时显示第一个图像,但是,它不会显示任何内容,并且Firebug中没有错误.

我怎样才能使这条线工作:

$('img#main').attr('src', $('img:first').src);
Run Code Online (Sandbox Code Playgroud)

完整代码:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('jquery', '1.5');
            google.setOnLoadCallback(function() {

                $('img.thm').css({opacity: 0.7});
                $('img#main').attr('src', $('img:first').src); //doesn't work

                $('img.thm').width(80).click(function() {
                    $('img#main').attr('src', this.src);
                });
                $('img.thm').mouseover(function() {
                    $(this).css({opacity: 1.0});
                });
                $('img.thm').mouseout(function() {
                    $(this).css({opacity: 0.7});
                });
            });
        </script>
        <style type="text/css">
            img.thm {
                cursor: hand;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <img class="thm" src="images/test1.png"/>
            <img class="thm" src="images/test2.png"/>
            <img class="thm" src="images/test3.png"/>
        </div>
        <div id="content">
            <img id="main"/>
        </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

jquery

2
推荐指数
2
解决办法
2万
查看次数

两个变量如何都是JQuery对象,但.css属性不适用于其中一个?

在下面的代码中,如何能够thebodyapp.body都成为JQuery对象,但是.cssthebody工作中设置属性但不起作用app.body

var app = app || {};

app.show = function(html) {
    this.baseElement.html(html);
};

app.body = $('body');

app.init = function() {
    this.baseElement = $('div#app');
    var thebody = $('body');
    console.log(app.objectIsJquery(thebody)); //true
    console.log(app.objectIsJquery(app.body)); //true
    app.body.css('background-color', 'yellow'); //does not set the background color, no errors
    //thebody.css('background-color', 'yellow'); //sets color correctly
};

app.start = function() {
    this.baseElement.css('color', 'brown');
    this.show(dp.qstr.addStar('testing'));
};


app.objectIsJquery = function(obj) {
    return obj.selector != undefined;
}
Run Code Online (Sandbox Code Playgroud)

javascript jquery

2
推荐指数
1
解决办法
70
查看次数

如何在创建机器后查找shell命令的历史记录?

几个星期前我创建了一个Ubuntu虚拟机机器,从那以后一直在研究项目.

现在我想找到我在一周前在终端输入的一些命令的语法,但是我打开并关闭了终端窗口并多次重启机器.

如何让history命令返回到我创建机器后输入的第一个命令,或者是否有另一个地方将所有命令存储在Ubuntu中?

unix linux history

2
推荐指数
1
解决办法
2万
查看次数

如何使Bootstrap Badge按钮具有相同的宽度?

如何强制这些Bootstrap徽章按钮具有相同的宽度?

width:100px没有任何效果:

在此输入图像描述

http://jsfiddle.net/gbwgv71e/1/

<div style="width:100px" title="new flashcards" class="label label-danger label-as-badge" >0</div> 

<div style="width:100px" title="flashcards you have taken before" class="label label-warning label-as-badge">11</div> 

<div style="width:100px" title="flashcards you have to wait on before you take again" class="label label-default label-as-badge">222</div> 

<div style="width:100px" title="flashcards you've learned" class="label label-success label-as-badge">3333</div>
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap

2
推荐指数
2
解决办法
4323
查看次数

如何让德语语言环境在Bootstrap 3 Datepicker v4中运行?

我在一个jsfiddle中运行了Bootstrap 3 Datepicker,但我无法使德语语言环境工作:

$('#monthpicker').datetimepicker({
    defaultDate: '2015-09',
    format: 'MMM YYYY',
    locale: 'de'
});
Run Code Online (Sandbox Code Playgroud)

并且我知道我需要加载这两个资源:

http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0 /locales/bootstrap-datepicker.de.min.js

但它给了我这个错误:

TypeError:a.fn.datepicker未定义

TypeError:locale()locale de未从时刻区域设置加载!

我需要做些什么才能让德语语言环境起作用?

datepicker jsfiddle twitter-bootstrap

2
推荐指数
1
解决办法
1万
查看次数

如何使用 ngmodel 在 datetimepicker 中设置默认日期?

我创建了这个包装 jQuery 插件日期时间选择器的角度指令。

如何获取控制器中定义的默认日期以显示为控件中的默认日期?

http://jsfiddle.net/edwardtanguay/ef1o3c95/5

我尝试了多种变体,ngModel.$viewValue但无法让 yyyy-mm-dd 文本简单地显示在控件中。

<div ng-controller="mainController">

    <div class="form-group">
        <div class='input-group date' timepicker ng-model="date1">
            <input type='text' class="form-control" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div>{{date1 | date:'yyyy-MM-dd HH:mm'}}</div>  
    </div>

    <div class="form-group">
        <div class='input-group date' timepicker ng-model="date2">
            <input type='text' class="form-control" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div>{{date2 | date:'yyyy-MM-dd HH:mm'}}</div>
    </div>

</div>
Run Code Online (Sandbox Code Playgroud)
angular.module('myApp', [])
.controller('mainController', function($scope) {
    $scope.date1 = '2015-09-01 00:00';
    $scope.date2 = '2015-09-30 23:59';
})
.directive('timepicker', [

  function() {
    var link;
    link = function(scope, element, attr, …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-directive

2
推荐指数
1
解决办法
1万
查看次数

PhpStorm / SVN 中的棕色和红色文件夹是什么意思?

我们有 PhpStorm 10 并在 Windows 上使用 SVN。

在此输入图像描述

  • 我和一位同事注意到共同的 SVN 项目中的文件夹有不同颜色的文件夹,有些是棕色的,有些是红色的,但他的棕色文件夹和我的棕色文件夹不同
  • 将文件从 Windows 资源管理器粘贴到棕色文件夹时,它询问我是否要在 SVN 中跟踪它
  • 我的同事将文件从 Windows 资源管理器粘贴到棕色文件夹时,它会在不询问的情况下将其标记为在 SVN 中跟踪(不正确)
  • 他和我将文件粘贴到红色文件夹时,它不会询问我们是否要将它们添加到 SVN
  • 我有另一个文件夹,该文件夹被标记为不将文件签入到 SVN(位于“沙箱”下方),但其文本是灰色的,因此文件夹的棕色和红色似乎与隐藏表单 SVN 具有不同的含义

在此输入图像描述

这些棕色和红色文件夹的意义是什么?我们如何更改它们,以便使文件夹具有相同的颜色,并始终询问我们是否要跟踪 SVN 中添加的文件?

svn phpstorm

2
推荐指数
1
解决办法
2964
查看次数

为什么在 React 中使用 .map() 时需要展开运算符,而在纯 JavaScript 中则不需要?

在 React 应用程序中,我将此对象数组传递给组件:

const flashcards = [
    {
        "back": "bbb1",
        "front": "fff1",
        "id": 21
    },
    {
        "back": "bbb2",
        "front": "fff2",
        "id": 22
    },
    {
        "back": "bbb3",
        "front": "fff3",
        "id": 20
    }
];
Run Code Online (Sandbox Code Playgroud)

在组件中,当我映射数组时,为什么我需要一个扩展运算符才能将数组中的各个项目发送到下一个较低的组件(闪存卡),例如这样:

render() {
    return (
        <div className="app">
            <div>
                {this.props.flashcards.map(flashcard =>
                    <Flashcard {...flashcard} key={flashcard.id} />
                    )}
            </div>
        </div>
    );
}
Run Code Online (Sandbox Code Playgroud)

这似乎是多余的,因为当我在同一个数组上使用普通 JavaScript 中的 map 时,我不需要扩展运算符,例如:

flashcards.map(flashcard => console.log(flashcard.front));
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

2
推荐指数
1
解决办法
3481
查看次数

FontAwesome 微调器不会在 React 中旋转

我创建了一个 React 应用程序npx create-react-app

然后按照这些说明

https://fontawesome.com/how-to-use/on-the-web/using-with/react

我安装了 Font Awesome 依赖项:

npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome
Run Code Online (Sandbox Code Playgroud)

然后我改成App.js这样:

import logo from './logo.svg';
import './App.css';
import { FaSpinner } from 'react-icons/fa';

function App() {
  return (
    <div className="App">
          <FaSpinner icon="spinner" spin /> This is a test.
    </div>
  );
}

export default App;
Run Code Online (Sandbox Code Playgroud)

但它只显示一个不旋转的微调图标:

在此处输入图片说明

我如何让微调器旋转?

笔记:

在 React 之外,Font Awesome 运行良好,无需做任何额外的工作来为图标设置动画,例如这个简单的 HTML 代码显示了一个动画图标:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet"
          type="text/css"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <title>testspin</title>
</head> …
Run Code Online (Sandbox Code Playgroud)

font-awesome reactjs

2
推荐指数
2
解决办法
3022
查看次数