[REF] web: stop duplicating web

Avoid duplicating web addon in enterprise by extracting a common basis.
Enterprise features stay in enterprise, but use that common basis.

Mainly:
 - JS refactoring and linting
 - Conversion of .sass into .less split into multiple files
 - Templates cleaning and DOM simplification
 - Re-generation of web.pot, and update of .po files

1 files changed, 305 insertions, 303 deletions

diff --git a/addons/web/static/src/js/widgets/data_export.js b/addons/web/static/src/js/widgets/data_export.js
index a73020ce9b2..4b87d45ff4a 100644
--- a/addons/web/static/src/js/widgets/data_export.js
+++ b/addons/web/static/src/js/widgets/data_export.js
@@ -11,212 +11,326 @@ var QWeb = core.qweb;
 var _t = core._t;
 
 var DataExport = Dialog.extend({
-    template: 'ExportTreeView',
+    template: 'ExportDialog',
     events: {
-        'click #add_field': function () {
+        'click .o_expand_parent': function(e) {
+            this.on_expand_action(this.records[$(e.target).closest('.o_export_tree_item').data('id')]);
+        },
+        'click .o_export_tree_item': function(e) {
+            e.stopPropagation();
+            var $elem = $(e.currentTarget);
+
+            var row_index = $elem.prevAll('.o_export_tree_item').length;
+            var row_index_level = $elem.parents('.o_export_tree_item').length;
+
+            if(e.shiftKey && row_index_level === this.row_index_level) {
+                var minIndex = Math.min(row_index, this.row_index);
+                var maxIndex = Math.max(row_index, this.row_index);
+
+                this.$records.filter(function() { return ($elem.parent()[0] === $(this).parent()[0]); })
+                             .slice(minIndex, maxIndex+1)
+                             .addClass('o_selected')
+                             .filter(':not(:last)')
+                             .each(process_children);
+            }
+
+            this.row_index = row_index;
+            this.row_index_level = row_index_level;
+
+            if(e.ctrlKey) {
+                $elem.toggleClass('o_selected').focus();
+            } else if(e.shiftKey) {
+                $elem.addClass('o_selected').focus();
+            } else {
+                this.$(".o_selected").removeClass("o_selected")
+                $elem.addClass("o_selected").focus();
+            }
+
+            function process_children() {
+                var $this = $(this);
+                if($this.hasClass('open')) {
+                    $this.children('.o_export_tree_item')
+                         .addClass('o_selected')
+                         .each(process_children);
+                }
+            }
+        },
+        'dblclick .o_export_tree_item': function(e) {
+            var $elem = $(e.currentTarget);
+            $elem.removeClass('o_selected');
+            this.add_field($elem.data('id'), $elem.find('.o_tree_column').first().text());
+        },
+        'keydown .o_export_tree_item': function(e) {
+            e.stopPropagation();
+            var $elem = $(e.currentTarget);
+            var record = this.records[$elem.data('id')];
+
+            switch(e.keyCode || e.which) {
+                case $.ui.keyCode.LEFT:
+                    if ($elem.hasClass('open')) {
+                        this.on_expand_action(record);
+                    }
+                    break;
+                case $.ui.keyCode.RIGHT:
+                    if (!$elem.hasClass('open')) {
+                        this.on_expand_action(record);
+                    }
+                    break;
+                case $.ui.keyCode.UP:
+                    var $prev = $elem.prev('.o_export_tree_item');
+                    if($prev.length === 1) {
+                        while($prev.hasClass('open')) {
+                            $prev = $prev.children('.o_export_tree_item').last();
+                        }
+                    } else {
+                        $prev = $elem.parent('.o_export_tree_item');
+                        if($prev.length === 0) {
+                            break;
+                        }
+                    }
+
+                    $elem.removeClass("o_selected").blur();
+                    $prev.addClass("o_selected").focus();
+                    break;
+                case $.ui.keyCode.DOWN:
+                    var $next;
+                    if($elem.hasClass('open')) {
+                        $next = $elem.children('.o_export_tree_item').first();
+                    } else {
+                        $next = $elem.next('.o_export_tree_item');
+                        if($next.length === 0) {
+                            $next = $elem.parent('.o_export_tree_item').next('.o_export_tree_item');
+                            if($next.length === 0) {
+                                break;
+                            }
+                        }
+                    }
+
+                    $elem.removeClass("o_selected").blur();
+                    $next.addClass("o_selected").focus();
+                    break;
+            }
+        },
+
+        'click .o_add_field': function() {
             var self = this;
-            this.$('#field-tree-structure tr.ui-selected')
-                .removeClass('ui-selected')
-                .find('a').each(function () {
-                    var id = $(this).attr('id').split('-')[1];
-                    var string = $(this).attr('string');
-                    self.add_field(id, string);
+            this.$('.o_field_tree_structure .o_selected')
+                .removeClass('o_selected')
+                .each(function() {
+                    var $this = $(this);
+                    self.add_field($this.data('id'), $this.children('.o_tree_column').text());
                 });
         },
-        'click #remove_field': function () {
-            this.$('#fields_list option:selected').remove();
+        'click .o_remove_field': function() {
+            this.$fields_list.find('option:selected').remove();
+        },
+        'click .o_remove_all_field': function() {
+            this.$fields_list.empty();
+        },
+        'click .o_move_up': function() {
+            var $selected_rows = this.$fields_list.find('option:selected');
+
+            var $prev_row = $selected_rows.first().prev();
+            if($prev_row.length){
+                $prev_row.before($selected_rows.detach());
+            }
+        },
+        'click .o_move_down': function () {
+            var $selected_rows = this.$fields_list.find('option:selected');
+
+            var $next_row = $selected_rows.last().next();
+            if($next_row.length){
+                $next_row.after($selected_rows.detach());
+            }
         },
-        'click #remove_all_field': function () {
-            this.$('#fields_list').empty();
+
+        'click .o_toggle_save_list': function(e) {
+            e.preventDefault();
+
+            var $saveList = this.$(".o_save_list");
+            if($saveList.is(':empty')) {
+                $saveList.append(QWeb.render('Export.SaveList'));
+            } else {
+                if($saveList.is(':hidden')) {
+                    $saveList.show();
+                    $saveList.find(".o_export_list_input").val("");
+                } else {
+                    $saveList.hide();
+                }
+            }
+        },
+        'click .o_save_list > button': function(e) {
+            var $saveList = this.$(".o_save_list");
+
+            var value = $saveList.find("input").val();
+            if(!value) {
+                Dialog.alert(this, _t("Please enter save field list name"));
+                return;
+            }
+
+            var fields = this.get_fields();
+            if (fields.length === 0) {
+                return;
+            }
+
+            $saveList.hide();
+
+            var self = this;
+            this.exports.create({
+                name: value,
+                resource: this.dataset.model,
+                export_fields: _.map(fields, function (field) {
+                    return [0, 0, {name: field}];
+                }),
+            }).then(function(export_list_id) {
+                if(!export_list_id) {
+                    return;
+                }
+                var $select = self.$(".o_exported_lists_select");
+                if($select.length === 0 || $select.is(":hidden")) {
+                    self.show_exports_list();
+                }
+                $select.append(new Option(value, export_list_id));
+            });
         },
-        'click #export_new_list': 'on_show_save_list',
-        'click #move_up':'on_click_move_up',
-        'click #move_down':'on_click_move_down',
     },
     init: function(parent, dataset) {
-        var self = this;
         var options = {
+            title: _t("Export Data"),
             buttons: [
-                {text: _t("Close"), click: function () { self.$el.parents('.modal').modal('hide'); }},
-                {text: _t("Export To File"), click: function () { self.on_click_export_data(); }}
+                {text: _t("Export To File"), click: this.export_data, classes: "btn-primary"},
+                {text: _t("Close"), close: true},
             ],
-            close: function () { self.close();}
         };
         this._super(parent, options);
         this.records = {};
         this.dataset = dataset;
-        this.exports = new data.DataSetSearch(
-            this, 'ir.exports', this.dataset.get_context());
-        this.set_title(_t("Export Data"));
+        this.exports = new data.DataSetSearch(this, 'ir.exports', this.dataset.get_context());
+        
+        this.row_index = 0;
+        this.row_index_level = 0;
     },
     start: function() {
         var self = this;
-        this._super.apply(this, arguments);
+        var waitFor = [this._super.apply(this, arguments)];
+
+        this.$fields_list = this.$('.o_fields_list');
+        this.$import_compat_radios = this.$('.o_import_compat input');
+
+        waitFor.push(this.rpc('/web/export/formats', {}).then(do_setup_export_formats));
 
         var got_fields = new $.Deferred();
-        this.$el.find('#import_compat').change(function() {
-            self.$el.find('#fields_list').empty();
-            self.$el.find('#field-tree-structure').remove();
-            var import_comp = self.$el.find("#import_compat").val();
+        this.$import_compat_radios.change(function(e) {
+            self.$fields_list.empty();
+            self.$('.o_field_tree_structure').remove();
+
             self.rpc("/web/export/get_fields", {
                 model: self.dataset.model,
-                import_compat: !!import_comp,
+                import_compat: !!$(e.target).val(),
             }).done(function (records) {
                 got_fields.resolve();
                 self.on_show_data(records);
             });
-        }).change();
+        }).eq(0).change();
+        waitFor.push(got_fields);
 
-        var got_domain = this.getParent().get_active_domain().then(function (domain) {
+        waitFor.push(this.getParent().get_active_domain().then(function (domain) {
             if (domain === undefined) {
                 self.ids_to_export = self.getParent().get_selected_ids();
                 self.domain = self.dataset.domain;
-            }
-            else {
+            } else {
                 self.ids_to_export = false;
                 self.domain = domain;
             }
             self.on_show_domain();
-        });
+        }));
 
-        return $.when(
-            got_fields,
-            got_domain,
-            this.rpc('/web/export/formats', {}).done(this.do_setup_export_formats),
-            this.show_exports_list());
-    },
-    on_click_move_up: function () {
-        var prev_row = this.$('#fields_list option:selected').first().prev();
-        if(prev_row.length){
-            var selected_rows = this.$('#fields_list option:selected').detach();
-            prev_row.before(selected_rows);
-        }
-    },
-    on_click_move_down: function () {
-        var next_row = this.$('#fields_list option:selected').last().next();
-        if(next_row.length){
-            var selected_rows = this.$('#fields_list option:selected').detach();
-            next_row.after(selected_rows);
+        waitFor.push(this.show_exports_list());
+
+        return $.when.apply($, waitFor);
+
+        function do_setup_export_formats(formats) {
+            var $fmts = self.$('.o_export_format');
+            
+            _.each(formats, function(format, i) {
+                var $radio = $('<input/>', {type: 'radio', value: format.tag, name: 'o_export_format_name'});
+                var $label = $('<label/>', {html: format.label});
+
+                if (format.error) {
+                    $radio.prop('disabled', true);
+                    $label.html(_.str.sprintf("%s — %s", format.label, format.error));
+                }
+
+                $fmts.append($("<div/>").append($radio, $label));
+            });
+
+            self.$export_format_inputs = $fmts.find('input');
+            self.$export_format_inputs.first().prop('checked', true);
         }
     },
-    do_setup_export_formats: function (formats) {
-        var $fmts = this.$el.find('#export_format');
-        _(formats).each(function (format) {
-            var opt = new Option(format.label, format.tag);
-            if (format.error) {
-                opt.disabled = true;
-                opt.replaceChild(
-                    document.createTextNode(
-                        _.str.sprintf("%s — %s", format.label, format.error)),
-                    opt.childNodes[0]);
-            }
-            $fmts.append(opt);
-        });
-    },
     show_exports_list: function() {
-        var self = this;
-        if (self.$el.find('#saved_export_list').is(':hidden')) {
-            self.$el.find('#ExistsExportList').show();
+        if (this.$('.o_exported_lists_select').is(':hidden')) {
+            this.$('.o_exported_lists').show();
             return $.when();
         }
+
+        var self = this;
         return this.exports.read_slice(['name'], {
             domain: [['resource', '=', this.dataset.model]]
-        }).done(function (export_list) {
+        }).then(function (export_list) {
             if (!export_list.length) {
                 return;
             }
-            self.$el.find('#ExistsExportList').append(QWeb.render('Exists.ExportList', {'existing_exports': export_list}));
-            self.$el.find('#saved_export_list').change(function() {
-                self.$el.find('#fields_list option').remove();
-                var export_id = self.$el.find('#saved_export_list option:selected').val();
-                if (export_id) {
-                    self.rpc('/web/export/namelist', {'model': self.dataset.model, export_id: parseInt(export_id, 10)}).done(self.do_load_export_field);
+            self.$('.o_exported_lists').append(QWeb.render('Export.SavedList', {'existing_exports': export_list}));
+            self.$('.o_exported_lists_select').on('change', function() {
+                self.$fields_list.empty();
+                var export_id = self.$('.o_exported_lists_select option:selected').val();
+                if(export_id) {
+                    self.rpc('/web/export/namelist', {
+                        model: self.dataset.model,
+                        export_id: parseInt(export_id, 10),
+                    }).then(do_load_export_field);
                 }
             });
-            self.$el.find('#delete_export_list').click(function() {
-                var select_exp = self.$el.find('#saved_export_list option:selected');
-                if (select_exp.val()) {
+            self.$('.o_delete_exported_list').click(function() {
+                var select_exp = self.$('.o_exported_lists_select option:selected');
+                if(select_exp.val()) {
                     self.exports.unlink([parseInt(select_exp.val(), 10)]);
                     select_exp.remove();
-                    self.$el.find("#fields_list option").remove();
-                    if (self.$el.find('#saved_export_list option').length <= 1) {
-                        self.$el.find('#ExistsExportList').hide();
+                    self.$fields_list.empty();
+                    if (self.$('.o_exported_lists_select option').length <= 1) {
+                        self.$('.o_exported_lists').hide();
                     }
                 }
             });
         });
-    },
-    do_load_export_field: function(field_list) {
-        var export_node = this.$el.find("#fields_list");
-        _(field_list).each(function (field) {
-            export_node.append(new Option(field.label, field.name));
-        });
-    },
-    on_show_save_list: function() {
-        var self = this;
-        var current_node = self.$el.find("#savenewlist");
-        if (!(current_node.find("label")).length) {
-            current_node.append(QWeb.render('ExportNewList'));
-            current_node.find("#add_export_list").click(function() {
-                var value = current_node.find("#savelist_name").val();
-                if (value) {
-                    self.do_save_export_list(value);
-                } else {
-                    alert(_t("Please enter save field list name"));
-                }
+
+        function do_load_export_field(field_list) {
+            _.each(field_list, function (field) {
+                self.$fields_list.append(new Option(field.label, field.name));
             });
-        } else {
-            if (current_node.is(':hidden')) {
-                current_node.show();
-                current_node.find("#savelist_name").val("");
-            } else {
-               current_node.hide();
-            }
         }
     },
-    do_save_export_list: function(value) {
-        var self = this;
-        var fields = self.get_fields();
-        if (!fields.length) {
+    on_expand_action: function(record) {
+        if(!record['children']) {
             return;
         }
-        this.exports.create({
-            name: value,
-            resource: this.dataset.model,
-            export_fields: _(fields).map(function (field) {
-                return [0, 0, {name: field}];
-            })
-        }).then(function (export_list_id) {
-            if (!export_list_id) {
-                return;
-            }
-            if (!self.$el.find("#saved_export_list").length || self.$el.find("#saved_export_list").is(":hidden")) {
-                self.show_exports_list();
-            }
-            self.$el.find("#saved_export_list").append( new Option(value, export_list_id) );
-        });
-        this.on_show_save_list();
-    },
-    on_click: function(id, record) {
-        var self = this;
-        if (!record['children']) {
-            return;
-        }
-        var model = record['params']['model'],
-            prefix = record['params']['prefix'],
-            name = record['params']['name'],
-            exclude_fields = [];
-        if (record['relation_field']) {
+
+        var model = record['params']['model'];
+        var prefix = record['params']['prefix'];
+        var name = record['params']['name'];
+        var exclude_fields = [];
+        if(record['relation_field']) {
             exclude_fields.push(record['relation_field']);
         }
 
-        if (!record.loaded) {
-            var import_comp = self.$el.find("#import_compat").val();
-            self.rpc("/web/export/get_fields", {
+        if(!record.loaded) {
+            var self = this;
+            this.rpc("/web/export/get_fields", {
                 model: model,
                 prefix: prefix,
                 parent_name: name,
-                import_compat: Boolean(import_comp),
+                import_compat: !!this.$import_compat_radios.filter(':checked').val(),
                 parent_field_type : record['field_type'],
                 exclude: exclude_fields
             }).done(function(results) {
@@ -224,200 +338,90 @@ var DataExport = Dialog.extend({
                 self.on_show_data(results, record.id);
             });
         } else {
-            self.showcontent(record.id);
+            this.show_content(record.id);
         }
     },
     on_show_domain: function() {
-        this.$el.find('tr').first().find('td').append(QWeb.render('ExportTreeView-Domain', {'record': this}));
+        this.$('p').first()
+                   .after(QWeb.render('Export.DomainMessage', {record: this}));
     },
-    on_show_data: function(result, after) {
+    on_show_data: function(records, expansion) {
         var self = this;
-
-        if (after) {
-            var current_tr = self.$el.find("tr[id='treerow-" + after + "']");
-            current_tr.addClass('open');
-            current_tr.find('img').attr('src','/web/static/src/img/collapse.gif');
-            current_tr.after(QWeb.render('ExportTreeView-Secondary.children', {'fields': result}));
+    
+        if(expansion) {
+            this.$('.o_export_tree_item[data-id="' + expansion + '"]')
+                .addClass('open')
+                .find('.o_expand_parent')
+                .toggleClass('fa-plus fa-minus')
+                .next()
+                .after(QWeb.render('Export.TreeItems', {'fields': records}));
         } else {
-            self.$el.find('#left_field_panel').append(QWeb.render('ExportTreeView-Secondary', {'fields': result}));
+            this.$('.o_left_field_panel').empty().append(
+                $("<div/>").addClass('o_field_tree_structure')
+                           .append(QWeb.render('Export.TreeItems', {'fields': records}))
+            );
         }
-        _.each(result, function(record) {
-            self.records[record.id] = record.value;
-            if (record.required) {
-                var required_fld = self.$el.find("tr[id='treerow-" + record.id + "']").find('#tree-column');
-                required_fld.addClass("oe_export_requiredfield");
-            }
-            self.$el.find("img[id='parentimg-" + record.id +"']").click(function() {
-                self.on_click(this.id, record);
-            });
 
-            self.$el.find("tr[id='treerow-" + record.id + "']").click(function(e) {
-                if (e.shiftKey) {
-                    var frst_click, scnd_click = '';
-                    if (self.row_index === 0) {
-                        self.row_index = this.rowIndex;
-                        frst_click = self.$el.find("tr[id^='treerow-']")[self.row_index-1];
-                        $(frst_click).addClass("ui-selected");
-                    } else {
-                        var i;
-                        if (this.rowIndex >=self.row_index) {
-                            for (i = (self.row_index-1); i < this.rowIndex; i++) {
-                                scnd_click = self.$el.find("tr[id^='treerow-']")[i];
-                                if (!$(scnd_click).find('#tree-column').hasClass("oe_export_readonlyfield")) {
-                                    $(scnd_click).addClass("ui-selected");
-                                }
-                            }
-                        } else {
-                            for (i = (self.row_index-1); i >= (this.rowIndex-1); i--) {
-                                scnd_click = self.$el.find("tr[id^='treerow-']")[i];
-                                if (!$(scnd_click).find('#tree-column').hasClass("oe_export_readonlyfield")) {
-                                    $(scnd_click).addClass("ui-selected");
-                                }
-                            }
-                        }
-                    }
-                }
-                self.row_index = this.rowIndex;
-
-                self.$el.find("tr[id='treerow-" + record.id + "']").keyup(function() {
-                    self.row_index = 0;
-                });
-                var o2m_selection = self.$el.find("tr[id='treerow-" + record.id + "']").find('#tree-column');
-                if ($(o2m_selection).hasClass("oe_export_readonlyfield")) {
-                    return false;
-                }
-                if (e.ctrlKey) {
-                    if ($(this).hasClass('ui-selected')) {
-                        $(this).removeClass('ui-selected').find('a').blur();
-                    } else {
-                        $(this).addClass('ui-selected').find('a').focus();
-                    }
-                } else if (!e.shiftKey) {
-                    self.$el.find("tr.ui-selected")
-                            .removeClass("ui-selected").find('a').blur();
-                    $(this).addClass("ui-selected").find('a').focus();
-                }
-                return false;
-            });
-
-            self.$el.find("tr[id='treerow-" + record.id + "']").keydown(function(e) {
-                var keyCode = e.keyCode || e.which;
-                var arrow = {left: 37, up: 38, right: 39, down: 40 };
-                var elem;
-                switch (keyCode) {
-                    case arrow.left:
-                        if ($(this).hasClass('open')) {
-                            self.on_click(this.id, record);
-                        }
-                        break;
-                    case arrow.right:
-                        if (!$(this).hasClass('open')) {
-                            self.on_click(this.id, record);
-                        }
-                        break;
-                    case arrow.up:
-                        elem = this;
-                        $(elem).removeClass("ui-selected");
-                        while (!$(elem).prev().is(":visible")) {
-                            elem = $(elem).prev();
-                        }
-                        if (!$(elem).prev().find('#tree-column').hasClass("oe_export_readonlyfield")) {
-                            $(elem).prev().addClass("ui-selected");
-                        }
-                        $(elem).prev().find('a').focus();
-                        break;
-                    case arrow.down:
-                        elem = this;
-                        $(elem).removeClass("ui-selected");
-                        while(!$(elem).next().is(":visible")) {
-                            elem = $(elem).next();
-                        }
-                        if (!$(elem).next().find('#tree-column').hasClass("oe_export_readonlyfield")) {
-                            $(elem).next().addClass("ui-selected");
-                        }
-                        $(elem).next().find('a').focus();
-                        break;
-                }
-            });
-            self.$el.find("tr[id='treerow-" + record.id + "']").dblclick(function() {
-                var $o2m_selection = self.$el.find("tr[id^='treerow-" + record.id + "']").find('#tree-column');
-                if (!$o2m_selection.hasClass("oe_export_readonlyfield")) {
-                   self.add_field(record.id, $(this).find("a").attr("string"));
-                }
-            });
-        });
-        self.$el.find('#fields_list').mouseover(function(event) {
-            if (event.relatedTarget) {
-                if (event.relatedTarget.attributes['id'] && event.relatedTarget.attributes['string']) {
-                    var field_id = event.relatedTarget.attributes["id"]["value"];
-                    if (field_id && field_id.split("-")[0] === 'export') {
-                        if (!self.$el.find("tr[id='treerow-" + field_id.split("-")[1] + "']").find('#tree-column').hasClass("oe_export_readonlyfield")) {
-                            self.add_field(field_id.split("-")[1], event.relatedTarget.attributes["string"]["value"]);
-                        }
-                    }
-                }
-            }
+        _.extend(this.records, _.object(_.pluck(records, 'id'), records));
+        this.$records = this.$(".o_export_tree_item");
+        this.$records.each(function(i, el) {
+            var $elem = $(el);
+            $elem.find('.o_tree_column').first().toggleClass('o_required', !!self.records[$elem.data('id')].required);
         });
     },
-    showcontent: function(id) {
-        // show & hide the contents
-        var $this = this.$el.find("tr[id='treerow-" + id + "']");
-        var is_open = $this.hasClass('open');
+    show_content: function(id) {
+        var $this = this.$('.o_export_tree_item[data-id="' + id + '"]');
         $this.toggleClass('open');
+        var is_open = $this.hasClass('open');
 
-        var first_child = $this.find('img');
-        if (is_open) {
-            first_child.attr('src', '/web/static/src/img/expand.gif');
-        } else {
-            first_child.attr('src', '/web/static/src/img/collapse.gif');
-        }
-        var child_field = this.$el.find("tr[id^='treerow-" + id +"/']");
+        $this.children('.o_expand_parent').toggleClass('fa-minus', !!is_open).toggleClass('fa-plus', !is_open);
+
+        var $child_field = $this.find('.o_export_tree_item');
         var child_len = (id.split("/")).length + 1;
-        for (var i = 0; i < child_field.length; i++) {
-            var $child = $(child_field[i]);
-            if (is_open) {
+        for (var i = 0 ; i < $child_field.length ; i++) {
+            var $child = $child_field.eq(i);
+            if(!is_open) {
                 $child.hide();
-            } else if (child_len == (child_field[i].id.split("/")).length) {
+            } else if(child_len === $child_field.eq(i).data('id').split("/").length) {
                 if ($child.hasClass('open')) {
                     $child.removeClass('open');
-                    $child.find('img').attr('src', '/web/static/src/img/expand.gif');
+                    $child.children('.o_expand_parent').removeClass('fa-minus').addClass('fa-plus');
                 }
                 $child.show();
             }
         }
     },
     add_field: function(field_id, string) {
-        var field_list = this.$el.find('#fields_list');
-        field_id = this.records[field_id] || field_id;
-        if (this.$el.find("#fields_list option[value='" + field_id + "']")
-                && !this.$el.find("#fields_list option[value='" + field_id + "']").length) {
-            field_list.append(new Option(string, field_id));
+        var $field_list = this.$('.o_fields_list');
+        if($field_list.find("option[value='" + field_id + "']").length === 0) {
+            $field_list.append(new Option(string, field_id));
         }
     },
     get_fields: function() {
-        var export_fields = this.$("#fields_list option").map(function() {
+        var $export_fields = this.$(".o_fields_list option").map(function() {
             return $(this).val();
         }).get();
-        if (!export_fields.length) {
-            alert(_t("Please select fields to save export list..."));
+        if($export_fields.length === 0) {
+            Dialog.alert(this, _t("Please select fields to save export list..."));
         }
-        return export_fields;
+        return $export_fields;
     },
-    on_click_export_data: function() {
+    export_data: function() {
         var self = this;
-        var exported_fields = this.$el.find('#fields_list option').map(function () {
-            // DOM property is textContent, but IE8 only knows innerText
-            return {name: self.records[this.value] || this.value,
-                    label: this.textContent || this.innerText};
+        var exported_fields = this.$('.o_fields_list option').map(function () {
+            return {
+                name: (self.records[this.value] || this).value,
+                label: this.textContent || this.innerText // DOM property is textContent, but IE8 only knows innerText
+            };
         }).get();
 
         if (_.isEmpty(exported_fields)) {
-            alert(_t("Please select fields to export..."));
+            Dialog.alert(this, _t("Please select fields to export..."));
             return;
         }
         exported_fields.unshift({name: 'id', label: 'External ID'});
 
-        var export_format = this.$el.find("#export_format").val();
+        var export_format = this.$export_format_inputs.filter(':checked').val();
 
         framework.blockUI();
         this.session.get_file({
@@ -428,16 +432,14 @@ var DataExport = Dialog.extend({
                 ids: this.ids_to_export,
                 domain: this.domain,
                 context: this.dataset.context,
-                import_compat: !!this.$el.find("#import_compat").val(),
+                import_compat: !!this.$import_compat_radios.filter(':checked').val(),
             })},
             complete: framework.unblockUI,
             error: crash_manager.rpc_error.bind(crash_manager),
         });
     },
-    close: function() {
-        this._super();
-    }
 });
 
 return DataExport;
+
 });