ExtJS 4 【Ext.panel.Panel】

Ext.panel.Panel.html

<div id="content"></div>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Ext.panel.Panel.js

/// <reference path="~/Scripts/ext-4.2.1.883/ext-all-dev.js" />
Ext.onReady(function () {
    Ext.create(‘Ext.panel.Panel‘,
    {
        title: ‘面板头部‘,
        tbar: [
        {
            text: ‘Button 1‘,
            handler: function () { alert(‘Button 1‘) }
        }],
        bbar: [‘底端工具栏‘],
        height: 200,
        width: 300,
        frame: true,
        renderTo: ‘content‘,
        bodyPadding: 5,
        bodyStyle: ‘background-color:#fff‘,
        html: ‘面板体‘,
        tools: [
            { id: ‘save‘},
            { id: ‘toggle‘ },
            { id: ‘close‘ },
            { id: ‘maximize‘ }
        ],
        buttons: [
        {
            text: ‘面板底部‘
        }]
    });
});

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

时间: 11-20

ExtJS 4 【Ext.panel.Panel】的相关文章

ExtJS 4 【Ext.tab.Panel】

  Ext.onReady(function () { Ext.create('Ext.tab.Panel', { title: 'Ext.tab.Panel 示例', frame: true, height: 150, width: 300, activeTab: 1, renderTo: 'content', items: [ { title: '1', html: '1' }, { title: '2', html: '2' }, { title: '3', html: '3' } ] }

ExtJS 4 【Ext.container.Viewport】

  Ext.onReady(function(){ Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ title: '1', region: 'north', html: ' <a href="../../Default.html">首页</a>', height: 100 }, { title: '2', region: 'west', width: 150, html: 'l

Extjs学习笔记--Ext.tree.Panel

Ext.create('Ext.tree.Panel', { title: 'Simple Tree', width: 200, height: 150, store: store, rootVisible: false, //是否显示根节点 lines:false,//是否显示树节点前面的虚线 参考图A,B renderTo: Ext.getBody() });            图片A                           图片B

ExtJS 4 【Ext.data.proxy.Ajax】

namespace ExtJSProject.WebApi.Models { [Serializable] [DataContract] public class Person { [DataMember] public string Name { get; set; } [DataMember] public int Age { get; set; } } }   namespace ExtJSProject.WebApi.Controllers { [RoutePrefix("api/Per

【extjs】 extjs5 Ext.grid.Panel 搜索示例

先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore = Ext.create('Ext.data.Store', { fields: ['type', 'name'], data : [ {"type":"1", "name":"登录日志"}, {"type":

【extjs】 ext5 Ext.grid.Panel 分页,搜索

带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" pageEncoding="UTF-8" %> <html> <head> <jsp:include page="../common/resource_classic.jsp"

【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局

Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的,有基础的可以看下,可以百度到PDF文档的. Ext.Net与ExtJS代码比较 上一篇中我们创建了一个使用Ext.Net创建了一个window窗口,代码非常简单: <ext:Window runat="server" ID="win" Title="示

Extjs MVC架构 (官方文档翻译)【带源码】

原文地址:http://docs.sencha.com/extjs/4.2.5/#!/guide/application_architecture [翻译 by 明明如月 QQ 605283073  源码在文章最后] 大型客户端应用经常比较难写.难组织.难维护. 当你添加更多的函数(功能)和开发人员时它们容易失去控制. Ext JS 4 带来了新的应用架构,不仅能够帮助组织你的代码同时也能够减少代码量. 我们的应用架构遵循MVC模式.有很多MVC架构,它们之间也彼此有少许区别. 这里我们定义我们

【Ext.Net学习笔记】01:在ASP.NET WebForm中使用Ext.Net

Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http://www.ext.net/download/示例地址:http://examples.ext.net/ 1.首先下载Ext.Net,地址:http://www.ext.net/download/ ,有两种框架选择,选择下载WebForms 当前版本是2.5.1,压缩包里面包含了不同版本,分别用在相应.

Ext.grid.Panel表格分页存储过程

/*首先需要引入两个Extjs插件类 Ext.ux.data.PagingMemoryProxy和Ext.ux.ProgressBarPager这两个类*/ /*下面是控制弹出窗体放大缩小时窗体居中的方法*/ 1 var HotalOrderResizeCenterWindow; 2 Ext.EventManager.onWindowResize(function() { 3 if (HotalOrderResizeCenterWindow) { 4 HotalOrderResizeCenter