`
lspgdut
  • 浏览: 199013 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

EditorGridPanel的sm设置

阅读更多

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = 'images/s.gif';
  Ext.QuickTips.init();

     var genres = new Ext.data.SimpleStore({
         fields: ['id', 'genre'],
         data : [['1','Comedy'],['2','Drama'],['3','Action']]
     });

  function genre_name(val){
   return genres.queryBy(function(rec){
    return rec.data.id == val;
   }).itemAt(0).data.genre;
  }

  function title_img(val, x, store){
   return  '<img src="images/'+store.data.coverthumb+'" width="50" height="68" align="left">'+
     '<b style="font-size: 13px;">'+val+'</b><br>'+
     'Director:<i> '+store.data.director+'</i><br>'+
     store.data.tagline;
  }

     var store = new Ext.data.Store({
   url: 'movies.json',
   reader: new Ext.data.JsonReader({
    root:'rows',
    id:'id'
   }, [
    'id',
    'coverthumb',
    'title',
    'director',
    {name: 'released', type: 'date', dateFormat: 'Y-m-d'},
    'genre',
    'tagline',
    {name: 'price', type: 'float'},
    {name: 'available', type: 'bool'}
   ]),

 pruneModifiedRecords:true

 

});

  store.load();

          var title_edit=new Ext.form.TextField();
          var director_edit=new Ext.form.TextField();
          var tagline_edit=new Ext.form.TextField({
             maxLength:45
          });
         var release_edit=new Ext.form.DateField({
             format:"m/d/Y"
         });

         var genre_edit=new Ext.form.ComboBox({
               typeAhead:true,
               triggerAction:"all",
               mode:"local",
               store:genres,
               displayField:'genre',
               valueField:"id"
         });

  var grid = new Ext.grid.EditorGridPanel({
   renderTo: Ext.getBody(),

  stripeRows:true,
   frame:true,
   title: 'Movie Database',
   height:600,
   width:850,
   store: store,
            clicksToEdit:1,
   autoExpandColumn: 'title',
            sm:new Ext.grid.RowSelectionModel({
               singleSelect:true
            }),
   columns: [
        {header: "Title", dataIndex: 'title', renderer: title_img, id: 'title', sortable: true,editor:title_edit},
        {header: "Director", dataIndex: 'director', hidden: false,editor:director_edit},
        {header: "Released", dataIndex: 'released', sortable: true,
     renderer: Ext.util.Format.dateRenderer('m/d/Y'),editor:release_edit},
        {header: "Genre", dataIndex: 'genre', renderer: genre_name, sortable: true,editor:genre_edit},
        {header: "Tagline", dataIndex: 'tagline', hidden: false,editor:tagline_edit},
     {header: "Price", dataIndex: 'price', renderer: 'usMoney', sortable: true,id:"price"},
              {header:"available",dataIndex:"available"}
      ],
            listeners:{
                 afteredit:function(e){
                     if(e.field == "director" && e.value =="Mel Gibson"){
                         Ext.Msg.alert("Eror","Mel Gibson movies not allowed");
                         e.record.reject(); //拒绝修改
                     }else{
                       //  e.record.commit();  //提交修改
                     }
                 }
            },
            /*
            sm:new Ext.grid.RowSelectionModel({
                 singleSelect:true,
                 listeners:{
                     "rowselect":function(sm,index,record){
                         Ext.Msg.alert("You Selected",record.data.title);
                     }
                 }
             }),*/
             tbar:[{
                 text:"Remove Movie",
                 icon:"images/table_delete.png",
                 cls:"x-btn-text-icon",
                 handler:function(btn,e){
                    var sm=grid.getSelectionModel();
                     var sel=sm.getSelected();
                     if(sm.hasSelection()){
                          Ext.Msg.show({
                              title:"Remove Movie",
                              buttons:Ext.MessageBox.YESNOCANCEL,
                              msg:'Remove '+sel.data.title+'?',
                              fn:function(btn){
                                  if(btn=="yes"){
                                      grid.getStore().remove(sel);
                                  }
                              }
                          });
                     }
                 }
             }]
   });

 });

分享到:
评论

相关推荐

    可编辑表格Ext.grid.EditorGridPanel

    3. 创建EditorGridPanel:传入Store和列模型,设置其他必要配置,如标题、高度等。 4. 添加事件监听:根据业务需求,添加编辑前、编辑后等事件的监听函数,处理数据保存、验证等逻辑。 五、示例代码 ```javascript ...

    Extjs可编辑的EditorGridPanel

    NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629

    解决editorgridpanel编辑时视图向右移动的问题

    1. **固定单元格宽度**:在配置EditorGridPanel时,为每一列设置固定的宽度,防止编辑时宽度变化。 2. **禁用滚动条自动调整**:可以监听编辑事件,当开始编辑时,临时禁用grid的滚动条自动调整功能,结束编辑后恢复...

    Extjs EditorGridPanel中ComboBox列的显示问题

    在EXTJS中,EditorGridPanel是一种可编辑的表格组件,它允许用户直接在表格单元格内编辑数据。然而,当在EditorGridPanel中嵌入ComboBox(下拉选择框)作为编辑器时,可能会遇到一个问题,即ComboBox显示的不是其...

    Ext可编辑的tree,EditorGridPanel

    因为项目的需求,实现一个可以编辑的tree,在网上找了一个牛人写的控件.Ext.ux.maximgb.tg.EditorGridPanel 把源码下载下来以后 不能运行,自己根据给出的列子,另写了一个小程序.不过并没有与数据库交互.

    Ext.grid.GridPanel右键菜单

    右键菜单的资料,代码已经详细描写。请仿照文件中所描述即可使用,不限于EXT4.0以上版本使用。

    GridPanel属性详解

    - **描述**:当设置为`true`时,表格将会每隔一行使用不同的背景颜色以增强视觉对比度。默认情况下,该属性为`false`。 5. **cm/colModel** - **描述**:`cm`和`colModel`均用于指定表格的列模型(`ColumnModel`...

    ext 读取xml 可编辑grid

    例如,你可以创建一个XMLReader实例,设置其root、record和fields属性,以便正确解析XML文档。 以下是一个简单的示例,展示了如何使用EXT JS从XML数据中创建一个可编辑的Grid: ```javascript // 创建XMLReader ...

    Ext TreePanel

    在描述中提到的`Ext.grid.EditorGridPanel`,是用于创建可编辑的表格面板,它继承自`GridPanel`。通过在列配置中指定`editor`属性,我们可以为每个单元格添加编辑器,例如`TextField`、`ComboBox`等,使得用户可以...

    extjs 导入导出 Exel

    5. 数据被加载到EditorGridPanel,可以设置编辑器以允许用户进一步修改。 ### 直接使用JavaScript 导出 除了服务器端处理,也有一些库如`js-导出到excel.rar`、`grid2excel.rar`,它们提供了纯JavaScript 方案,不...

    ExtJS下拉列表树控件

    然后,我们需要定义ComboBox Tree的配置项,例如`store`用于设置数据源,`displayField`用于显示节点的文本,`valueField`用于保存选中节点的值,以及`queryMode`通常设置为`local`,因为数据已经在本地。...

    Ext 3.2的一个TreeGrid

    感谢 Ericzhen 远离颠倒梦想,蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html

    ExtJS下grid的一些属性说明

    1.界面修改(css style): Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的... GroupingView, EditorGridPanel): Extjs的grid功能强大,如排序、隐藏列或移动列等,这些都有一些属

    给Extjs的GridPanel增加“合计”行

    在EXTJS中,GridPanel是一种常用的组件,用于展示表格数据。在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...

    ExtJS增删改查

    sm: sm, width: 200, height: 200, title: '举例', renderTo: Ext.get("testdiv") }); ``` #### 五、增删改查具体实现 1. **查询**: - 当点击按钮触发事件时,可以通过以下方式实现查询: ```javascript ...

    extjs实例与学习资料

    因为前段时间有两个专案要用到extjs技术,所以自己学了一段...grid,tree,显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel,还有代表应用程序窗口的Ext.Window,与数据库交付,希望对初学者带来帮助

    ExtJs扩展之GroupPropertyGrid代码

    这包括设置`groupField`属性以及适配数据加载和更新的方式。以下是修改后的代码: ```javascript Ext.ux.grid.GroupPropertyStore = function(grid, source) { this.grid = grid; this.store = new Ext.data....

Global site tag (gtag.js) - Google Analytics