Ext基础

介绍

ExtJS是一种用于在客户端创建丰富多彩的web应用程序界面，可以用来开发RIA的AJAX应用，是完全基于纯Html/CSS+JS技术的Ajax框架，提供了丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层（VIEW）的负荷真正减轻，从而达到客户端的MVC应用。

API 和一些参考资料

在平台的作用

是平台的基础架构 版本是4.2.6

如何把开发extjs插件并挂接到平台

先在插件项目写一个exts插件面板

p-suanbanyun/src/ext:
└── extDemo                      // 模块名
     ├── controller           // 控制器目录
     |       └── ctr.js   // 控制器
     └── view                 // 视图目录
          ├── mainView.js     // 主面板

把插件挂载到平台

在开发->顶部菜单 创建数据

标题：EXTJS案例
编码：EXTJSANLI
类型：插件
图标：选一下
启用：打钩
配置信息：PRO.extDemo.view.mainView,PRO.extDemo.controller.ctr

在平台的应用介绍（主要）

主要的面板

列表 Ext.grid.PanelView

getGrid: function(){
    var me = this;
    var store = Ext.create('Ext.data.Store',{
        fields:['name','sex','age'],
        data:[
            {name:'唐僧',sex:'男',age:'18'},
            {name:'孙悟空',sex:'男',age:'18'},
            {name:'猪八戒',sex:'男',age:'18'},
            {name:'沙僧',sex:'男',age:'18'},
        ]
    });
    var grid={
        xtype:'gridpanel',
        store:store,
        columns: [
            {
                header: '姓名',
                dataIndex: 'name',
                width: 200
            },
            {
                header: '性别',
                dataIndex: 'sex',
                width: 200
            },
            {
                header: '年龄',
                dataIndex: 'age',
                width: 200
            }
        ]
    }
    return grid
 }

表单 Ext.form.PanelView

getForm: function(){
     var me = this;
     var form={
        xtype: "form",   
        labelWidth: 30,   
        defaultType: "textfield",    
        frame:true,   
        items:    
        [   
            {    
                fieldLabel:"姓名",   
                name:"name",  
                width:300, 
                allowBlank:false    
            },   
            {    
                fieldLabel:"性别",   
                name:"sex",  
                width:300,
            },   
            {    
                fieldLabel: "年龄",   
                xtype:'numberfield',   
                name: "age",    
                width:300,    
            }   
        ]
     }
     return form
 }

树 Ext.tree.PanelView

getTree: function(){
    var me = this
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [
                { text: "detention", leaf: true },
                { text: "homework", expanded: true, children: [
                    { text: "book report", leaf: true },
                    { text: "alegrbra", leaf: true}
                ] },
                { text: "buy lottery tickets", leaf: true }
            ]
        }
    });
    var tree = {
        xtype:'treepanel',
        store: store,
        rootVisible: false,
    }
    return tree;
 }

dataView Ext.view.ViewView

getDataView: function(){
    var me = this;
    var store = Ext.create('Ext.data.Store',{
        fields:['name','sex','age'],
        data:[
            {name:'唐僧',sex:'男',age:'18'},
            {name:'孙悟空',sex:'男',age:'18'},
            {name:'猪八戒',sex:'男',age:'18'},
            {name:'沙僧',sex:'男',age:'18'},
        ]
    });
    var dataView = {    
        xtype:'dataview',
        store:store,
        tpl:[
            '<tpl for=".">',
                '<span>姓名：{name}、性别：{sex}、年龄：{age}</span>',
            '</tpl>'
        ]
    }
    return dataView;
 }

box

getBox: function(){
     var me = this;
     var box = {
        xtype:'box',
        data:[
            {name:'唐僧',sex:'男',age:'18'},
            {name:'孙悟空',sex:'男',age:'18'},
            {name:'猪八戒',sex:'男',age:'18'},
            {name:'沙僧',sex:'男',age:'18'},
        ],
        tpl:[
            '<tpl for=".">',
                '<span>姓名：{name}、性别：{sex}、年龄：{age}</span>',
            '</tpl>'
        ]
    }
    return box
 }

主要的布局

border

东南西北中的自适应布局

layout:'border',
defaults: {
    collapsible: true,
    split: true,
    bodyStyle: 'padding:15px'
},
items: [{
    title: 'Footer',
    region: 'south',
    height: 150,
    minSize: 75,
    maxSize: 250,
    cmargins: '5 0 0 0'
},{
    title: 'Navigation',
    region:'west',
    margins: '5 0 0 0',
    cmargins: '5 5 0 0',
    width: 175,
    minSize: 100,
    maxSize: 250
},{
    title: 'Main Content',
    collapsible: false,
    region:'center',
    margins: '5 0 0 0'
}]

fix

一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

layout:'fit',
items: {
    title: 'Fit Panel',
    html: 'Content',
    border: false
}

vbox

纵向布局 设置子面的高度，宽度充满父面板

layout: {
    type: 'vbox'
    align : 'stretch',
    pack  : 'start',
},
items: [
    {html:'panel 1', flex:1},
    {html:'panel 2', height:150},
    {html:'panel 3', flex:2},

hbox

横向布局 设置子面的宽度，高度充满父面板

layout: {
    type: 'hbox',
    pack: 'start',
    align: 'stretch'
},
items: [
    {html:'panel 1', flex:1},
    {html:'panel 2', width:150},
    {html:'panel 3', flex:2}
]

column

把整个容器看成一列,然后向容器放入子元素时

layout:'column',
items: [{
    title: 'Width = 25%',
    columnWidth: .25,
    html: 'Content'
},{
    title: 'Width = 75%',
    columnWidth: .75,
    html: 'Content'
},{
    title: 'Width = 250px',
    width: 250,
    html: 'Content'
}]

如何快速的找到你想要的面板对象

表单一个字段值改变怎么找到表单上子功能集合的grid

var form = field.up('[xtype=jeformview]');
var childfuncfield_1 = form.down('[name=childfuncfield_1]');
var grid = childfuncfield_1.down('[xtype=grid]');

表单一个字段值改变怎么找到列表选中的数据

var form = field.up('[xtype=jeformview]');
var jemainview = form.up('jemainview');
var grid = jemainview.down('jegridview');
var selected = grid.getSelectionModel().getSelection();