ExtJS — виджет Textarea на панели редактирования строк

ExtJS плагин RowEditing не похоже, обрабатывают входные текстовые поля, если они не сжаты до высоты строки, что делает их непригодными для использования.

Демо здесь http://jsfiddle.net/8SA34/

Ext.onReady(function () {
Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [{
        "name": "Lisa",
            "email": "[email protected]",
            "phone": "555-111-1224"
    }, {
        "name": "Bart",
            "email": "[email protected]",
            "phone": "555-222-1234"
    }, {
        "name": "Homer",
            "email": "[email protected]",
            "phone": "555-222-1244"
    }, {
        "name": "Marge",
            "email": "[email protected]",
            "phone": "555-222-1254"
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        editor: {
         xtype: 'textarea',
         allowBlank: false,
         height:100
        }
    }, {
        header: 'Email',
        dataIndex: 'email',
        flex: 1,
        editor: {
            xtype: 'textarea',
            allowBlank: false
        }
    }, {
        header: 'Phone',
        dataIndex: 'phone'
    }],
    selType: 'rowmodel',
    plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
    })],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
});

Есть ли исправление конфигурации для этого или существующий плагин?

В противном случае, как лучше всего создать текстовую область, которая выходит за пределы строки в фокусе?

  • Расширить текстовое поле?
  • Расширить плагин RowEditing?
  • CSS?

extjs extjs4 extjs4.2
person So You're A Waffle Man    schedule 24.01.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете сделать это просто с помощью CSS:

.x-grid-row-editor .x-panel-body{
    height: 68px !important;
}

.x-grid-editor .x-form-text,
.x-panel-body .x-box-inner{
    height: 60px !important;
}

.x-grid-row-editor-buttons-default-bottom{
    top: 69px !important;
}

.x-grid-row-editor-buttons-default-top{
    bottom: 69px !important;
}

Теперь вы можете вставлять текст в поле, которое имеет более одной строки, но если вы хотите выполнить перенос по вводу, вам придется перезаписать метод onEnterKey.

http://jsfiddle.net/8SA34/9/

person user1721713    schedule 24.01.2014
comment
Это полезно, спасибо, но часть моих требований заключается в том, чтобы панель rowEditor не увеличивалась, чтобы вместить поле. Это то, что я имел в виду, когда сказал создать текстовую область, которая выходит за пределы строки при фокусе в моем ОП, хотя я мог бы быть более ясным в этом отношении. DatePicker, Combo и т. д. могут быть высотой в одну строку, а затем расширяться, чтобы добавлять контент без изменения высоты панели rowEditor. Мне нужно текстовое поле, которое ведет себя аналогично. - person So You're A Waffle Man; 25.01.2014