初学extJS,一个简单的表单添加页面

因为工作需要，不得不学习下EXTJS，不过没有时间，就直接上手，做了个简单的页面，高手来指点下，新手跟我一起来学习！

做了两个页面，一个引用页面，一个JS页面，都很简单的，大家来看下！

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>index.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
<link rel="stylesheet" type="text/css" href="/EXT/resources/css/ext-all.css" />
<script src="/EXT/adapter/ext/ext-base.js"></script>
<script src="/EXT/ext-all.js"></script>
<script src="form.js"></script>
</head>
<body>
</body>
</html>
关于路径地址大家自己变通下1

form.js

Ext.onReady(function() {
Ext.QuickTips.init();
// 返回一个grid
function getFileListGrid() {
   var store = new Ext.data.Store({
    // load using HTTP
    url : 'fileList.xml',
    // the return will be XML, so lets set up a reader
    reader : new Ext.data.XmlReader({
     // records will have an "Item" tag
     record : 'Item',
     id : 'ASIN',
     totalRecords : '@total'
    }, [
      // set up the fields mapping into the xml doc
      // The first needs mapping, the others are very
      // basic
      {
       name : 'fileType',
       mapping : 'ItemAttributes > fileType'
      }, 'fileType', 'softwareInfo', 'fileContent'])
   });
   var downLoadRenderer = function(val) {
    return '<a href="'
      + val
      + '"><img src="resources/save.gif" width="16" height="16" border="0"></a>';
   }
   var grid = new Ext.grid.GridPanel({
    store : store,
    border : false,
    // frame : true, "/knowledge/WebRoot/fileList.xml"
    viewConfig : {
     forceFit : true
    },//
    margins : '0 0 0 0',
    bodyStyle : 'padding:0px',
    columns : [new Ext.grid.RowNumberer(), {
     header : "文件类型",
     width : '100',
     dataIndex : 'fileType',
     sortable : true
    }, {
     header : "文件信息",
     width : '100',
     dataIndex : 'uploadDate',
     sortable : true
    }, {
     header : "下载",
     dataIndex : 'downloadUrl',
     renderer : downLoadRenderer,
     sortable : true
    }],
    bbar : [{
     text : '添加',
     id : 'upload-show-button',
     iconCls : 'ext-ux-uploaddialog-addbtn',
     handler : function() {
      var LoadMasks = new Ext.LoadMask(Ext.getCmp('know-new-win')
        .getEl(), {
       msg : '上传文件',
       id : 'fileUploadMasks'
      });
      LoadMasks.show();
      var dialog = new Ext.ux.UploadDialog.Dialog({
       url : 'file-upload.php',
       reset_on_hide : false,
       allow_close_on_upload : true,
       mask : LoadMasks
        // upload_autostart: true
      });

dialog.show('upload-show-button');

     }
    }, {
     text : '删除',
     iconCls : 'ext-ux-uploaddialog-removebtn'
    }, {
     text : '清空',
     iconCls : 'ext-ux-uploaddialog-resetbtn'
    }]
   });

   store.load({
    params : {
     start : 0,
     limit : 10
    }
   });
   return grid;
}
// 知识类别下拉框
var abc = [['classic', '创新型'], ['creative', '经典型'], ['经验型', '经验型'],
    ['software', '软件实体'], ['mechanic', '结构实体']];

var store = new Ext.data.SimpleStore({
   fields : ['abbr', 'state'],
   data : abc
    // from states.js
});
var combo = new Ext.form.ComboBox({
   store : store,
   displayField : 'state',
   typeAhead : true,
   mode : 'local',
   editable : false,
   fieldLabel : '类型',
   triggerAction : 'all',
   emptyText : 'ｓｅｌｅｃｔ a state...',
   selectOnFocus : true,
   width : '95%'
});

var f = new Ext.FormPanel({
labelWidth : 45,
frame : true,

   width : 800,
   items : [{
    layout : 'column',
    border : false,

    items : [{
     columnWidth : .6,
     layout : 'form',
     items : [{
      xtype : 'textfield',
      fieldLabel : '标题',
      name : 'title',
      allowBlank : false,
      width : '95%'
     }]
    }, {
     layout : 'form',
     items : [combo]
    }]

   }, {
    columnWidth : 1,
    layout : 'form',
    items : [{
     fieldLabel : '关键字',
     xtype : 'textfield',
     name : 'first name',
     width : '95%'
    }]
   }, {
    columnWidth : 1,
    xtype : 'textarea',
    fieldLabel : '摘要',
    height : 40,
    anchor : '95%'
   }, {
    columnWidth : 1,
    border : false,
    title : '附件列表',
    bodyStyle : 'padding:0px',
    border : true,
    layout : 'fit',
    // frame : true,
    items : getFileListGrid(),
    width : '95%'
   }, {
    columnWidth : 1,
    xtype : 'htmleditor',
    fieldLabel : '内容',
    height : 20,
    anchor : '95%'
   }, {
    columnWidth : 1,
    xtype : 'textarea',
    fieldLabel : '目标',
    height : 40,
    anchor : '95%'
   }, {
    columnWidth : 1,
    xtype : 'textarea',
    fieldLabel : '意义',
    height : 40,
    anchor : '95%'
   }, {
    columnWidth : 1,
    xtype : 'textarea',
    fieldLabel : '不足',
    height : 40,
    anchor : '95%'
   }, {
    layout : 'column',
    border : false,

    items : [{
     columnWidth : .5,
     layout : 'form',
     items : [{
      xtype : 'textfield',
      fieldLabel : '作者',
      name : 'title',
      allowBlank : false,
      width : '95%'
     }]
    }, {
     columnWidth : .5,
     layout : 'form',
     items : [{
      xtype : 'textfield',
      fieldLabel : '版本',
      name : 'title',
      allowBlank : false,
      width : '88%'
     }]
    }]

   }],
   buttons : [{
    text : '提交'
   }, {
    text : '重置'
   }]
})

var w = new Ext.Window({

   title : '发布新知识',
   closable : true,
   width : 800,
   autoScroll : true,
   // border:false,
   plain : true,

items : [f]
})
w.show(this);

})

初学extJS,一个简单的表单添加页面

猜你喜欢