`
JavaSky66
  • 浏览: 38688 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

extjs hb

 
阅读更多

<link rel="stylesheet" type="text/css" href="<%=rootPath%>/scripts/extjs/lib/resources/css/ext-all.css" />
  <script type="text/javascript" src="<%=rootPath%>/scripts/extjs/lib/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="<%=rootPath%>/scripts/extjs/lib/ext-all-debug.js"></script>
  <script type="text/javascript" src="<%=rootPath%>/scripts/extjs/lib/locale/ext-lang-zh_CN.js"></script>

<html>
 <head>
  <title></title> 

<style type="text/css">
       .x-grid-cell-line-back{
           background-color:#FFFFFF;
           border-top-width: 0px;
           border-bottom-width: 0px;
       }
       .x-grid-cell-row-line{
           border-bottom: 1px dotted #999999;
                 border-top-color: #FFFFFF;
                 cursor: pointer;
       }
       .x-grid-cell-row-line2{
           border-bottom: 1px dotted #999999;
                 border-top-color: #FFFFFF;
                 cursor: default;
       }
       .x-grid3-row {
           border-top-width: 0px;
           border-bottom-width: 0px;
       }
  </style>
  <script type="text/javascript">
  
    Ext.onReady(function(){ 
       Ext.QuickTips.init();
       Ext.form.Field.prototype.msgTarget = 'side';
 
    var dataGr = [
             ['','北京','13434','34545','645345'],
             ['中国','上海','2343','64345','44545'],
             ['','广州','4343','75656','53454'],
             ['','深圳','33434','7535','4545']
         ];
 var consolidateStore =  new Ext.data.SimpleStore({
  fields:['calculationIndex', 'indexName', 'firstValue', 'secondValue','thirdValue'],
  data : dataGr
 });
 var cm = new Ext.grid.ColumnModel([{
        header: '国际',
        dataIndex: 'calculationIndex',
        align: 'center',
        renderer:function(value, cellmeta, record,rowIndex,columnIndex ) {
              cellmeta.css='x-grid-cell-line-back'; 
              return value;
        }         
    }, {
        header: '城市',
        dataIndex: 'indexName',
        align: 'left',
        renderer:function(value, cellmeta, record,rowIndex,columnIndex ) {
              cellmeta.css='x-grid-cell-row-line2'; 
              return value;
        }
    }, {
        header: '2009',
        dataIndex: 'firstValue',
        align: 'right',
        editor: new Ext.form.NumberField({
   decimalPrecision:2,
   maxLength:20,
   maxLengthText:'输入字数不能超过20位'
  }),
        renderer:function(value, cellmeta, record,rowIndex,columnIndex ) {
              cellmeta.css='x-grid-cell-row-line'; 
              return value;
        }
    }, {
        header: '2010',
        dataIndex: 'secondValue',
        align: 'right',
        editor: new Ext.form.NumberField({
   decimalPrecision:2,
   maxLength:20,
   maxLengthText:'输入字数不能超过20位'
  }),
        renderer:function(value, cellmeta, record,rowIndex,columnIndex ) {
              cellmeta.css='x-grid-cell-row-line'; 
              return value;
        }
    }, {
        header: '2011',
        dataIndex: 'thirdValue',
        align: 'right',
        editor: new Ext.form.NumberField({
   decimalPrecision:2,
   maxLength:20,
   maxLengthText:'输入字数不能超过20位'
  }),
        renderer:function(value, cellmeta, record,rowIndex,columnIndex ) {
              cellmeta.css='x-grid-cell-row-line'; 
              return value;
        }
    }]);
    var grid = new Ext.grid.EditorGridPanel({
        store:consolidateStore,
     mode:'local',
        //columnLines: true,
        clicksToEdit:1,
        stripeRows: true,
     cm: cm,
     //autoWidth:true,
     autoHeight:true,
        //height:200,
        width:550,
        title: 'ExtJS4 EditGrid(可编辑的Grid)',
        frame: true,
        loadMask: true
      });
     grid.on({
        cellclick:function(g,rowIndex,columnIndex,e){
                var gridRecord = g.getStore().getAt(rowIndex);
                var fieldName = g.getColumnModel().getDataIndex(columnIndex);
                if('author'==fieldName){
                }
            }   
      }); 
     grid.render(Ext.getBody());
 });  
  
</script>
 </head>
 <body>
           
 </body>
</html>

 

分享到:
评论

相关推荐

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...

    Extjs 2.2 Extjs 3.21 js

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...

    包含各种类型的extjs小图标,Extjs4小图标

    ExtJS 是一个流行的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据管理功能以及强大的用户界面(UI)元素。在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...

    ExtJS 7.6 SDK trial

    ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...

    Extjs4.1 小例子(适合extjs初学者学习使用)

    ExtJS 是一个强大的JavaScript前端框架,用于构建富客户端应用程序。版本4.1是该框架的一个重要里程碑,提供了许多新功能和改进。对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs...

    ExtJS经典皮肤集合

    ExtJS是一款功能强大的JavaScript前端框架,它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...

    EXTJS讲解个人项目经历

    EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构,允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...

    extjsapi/extjs3.4

    extjsapi,extjs文档,api手岫

    ExtJS 界面设计器

    ExtJS是一款强大的JavaScript库,主要用于构建富客户端的Web应用程序。其界面设计器,正如标题所示,是一种可视化的开发工具,能够极大地提升开发效率和用户体验。这个工具允许开发者通过拖放组件和直观地调整属性来...

    ExtJS4ExtJS5MD5 加密

    适用于ExtJS4、ExtJS5 MD5加密算法!

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    ExtJs学习笔记 ExtJs Api

    适合ExtJs开发人员extjs技术上手以及深入

    JBPM4 SSH EXTJS JBPM SSH EXTJS

    JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS 希望对大家有帮助。

    extjs 3.4 开发前准备

    【EXTJS 3.4 开发前准备】 EXTJS 是一款强大的JavaScript库,主要用于构建桌面级的Web应用程序,提供丰富的用户界面组件和交互效果。3.4版本是EXTJS的一个重要里程碑,它提供了稳定的基础和丰富的组件库。本文将...

    extJS4升级至extJS6.6所遇问题及解决方案

    项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议

Global site tag (gtag.js) - Google Analytics