VPF::Многострочный ComboBox. EXT JS - Форум программистов

maxxi

Дата 15.6.2011, 23:30 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 56
Регистрация: 22.4.2007

Репутация: нет
Всего: нет

Здравствуйте, у меня такой вопрос.

Есть комбо-бокс, в котором находится длинный текст.

При загрузке страницы текст появляется однострочным.
При нажатии на комбо бокс он открывается и длинный текст показывается в нескольких строках.

Вот примерно такой комбо бокс:
http://s13.radikal.ru/i186/1106/8a/a0ed51c5c515.jpg

Возможно ли отображать длинные тексты при загрузке комбо бокса в нескольких строках, а не в одной строке?

спасибо за ответы

нуп

Дата 16.6.2011, 06:35 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Сделайте скрытую textarea и по клику покажите её, а input скройте. smile

maxxi

Дата 16.6.2011, 09:16 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 56
Регистрация: 22.4.2007

Репутация: нет
Всего: нет

Цитата(нуп @ 16.6.2011, 06:35)

Сделайте скрытую textarea и по клику покажите её, а input скройте. smile

спасибо за ответ. а именно в комбобоксе нельзя многострочный текст разместить?

нуп

Дата 16.6.2011, 09:29 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Не встречал такого, погуглите smile

maxxi

Дата 16.6.2011, 10:01 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 56
Регистрация: 22.4.2007

Репутация: нет
Всего: нет

вот получилось такое -

http://s009.radikal.ru/i307/1106/e7/5610e43abf54.jpg

Код


Ext.namespace('extVia.dev.proto.epob.cat','extVia.module.epob');    
 


Ext.onReady(function(){


     Ext.QuickTips.init();


////////////// superSizeCombo START ////////////
var longvalues = [
        ['FA', 'Habe nun, ach! \n Philosophie, Juristerei und Medizin \n Und leider auch Theologie! \n Durchaus studiert, mit heißem Bemühn. ', 'Faust'],
        ['AK', 
        
'Da steh ich nun, ich armer Tor! '+
'Und bin so klug als wie zuvor; '+
'Heiße Magister, heiße Doktor gar, '+
'Und ziehe schon an die zehen Jahr '+
'Herauf, herab und quer und krumm '+
'Meine Schüler an der Nase herum - '+
'Und sehe, daß wir nichts wissen können! '+
'Das will mir schier das Herz verbrennen.' , 'The Land of the Midnight Sun'],
      
        ['SC',        
        ' Zu Dionys, dem Tyrannen, schlich '+
'Damon, den Dolch im Gewande: '+
'Ihn schlugen die Häscher in Bande, '
, 'Die Bürgschaft '],


        ['SC2',        
'"Was wolltest du mit dem Dolche? sprich!" '+
'Entgegnet ihm finster der Wüterich. '+
'"Die Stadt vom Tyrannen befreien!" '+
'"Das sollst du am Kreuze bereuen." '
, 'Die Bürgschaft '],



        ['AR', 'longvalues Arkansas longvalues ', 'The Natural State'],
        ['CA', 'longvalues California longvalues ', 'The Golden State'],
        ['CO', 'longvalues Colorado longvalues ', 'The Mountain State'],
        ['CT', 'longvalues Connecticut longvalues ', 'The Constitution State'],
        ['DE', 'longvalues Delaware longvalues ', 'The First State']
    ];

    // simple array store
    var store = new Ext.data.ArrayStore({
        fields: ['abbr', 'state', 'nick'],
        data : longvalues
    });
   




var combo = new Ext.form.ComboBox({
        xtype: 'combo',
        id:'longtextsCombo',
        store: store,
         defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},

        autoHeight: true,

        
        displayField:'state',
        width:300,
        height: 300,
        
        autoHeight: true,
        
        //plugins: [extVia.dev.proto.epob.cat.ComboListAutoSizer()], 
        typeAhead: true,
        editable: true,
        grow: true,
        readOnly:false,


style:"white-space:normal;",
        
        id:'superComboTest',
        mode: 'local',
      //  listeners: {'focus': this.expand},
        forceSelection: true,
        hidesTrigger:true,
    
        triggerAction: 'all',
        emptyText:'Select a long value...',
        listWidth:400, 
        growMax:  300,
        grow:true,
        tpl: '<tpl for="."><div ext:qtip="{state}. {nick}"  style="border-bottom:dashed 1px #99bbe8;white-space:normal;heixght:70px" class="x-combo-list-item">{state}</div></tpl>' ,




  selectOnFocus:true,
        applyTo: 'longtexts',  
        
  listeners: {
            select: function(){
               //alert("longtextsCombo blur");
               document.getElementById("longtextsDisplay").innerHTML=this.getValue();
               
            }
         } 

    });

html:

Код


<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Content Attribute Grid Example</title>

    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- overrides to base library -->

    <!-- page specific -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    <link rel="stylesheet" type="text/css" href="grid-examples.css" />

    <style type=text/css>
        /* style rows on mouseover */
        .x-grid3-row-over .x-grid3-cell-inner {
            font-weight: bold;
        }


        .xty_dscrRig{text-align:right; font-size:10pt !important; padding-top:3px;color:#15428B;font-weight:bold !important;}
        .xty_dscr, .xty_topicDscr, .xty_subtopicDscr{ text-align:right;font-weight:bold !important; font-size:10pt !important; padding-top:3px;color:#15428B !important}
        .xty_topicDscr{height:28px; position:absolute;font-size:11pt !important;font-weight:bold !important;color:#8aa0c5 !important}
        .xty_subtopicDscr{color:#8aa0c5 !important; text-align:center;}
        
        .xty_filler{background-color:#fafafb !important;}
        .xty_nbDscr{background-color:#faf7f7 !important;}
        

        .xty_form-dict-trigger{ background-image: url(../viamedici39/img/dict-trigger.gif) !important; background-position:-17px 0px !important; }
        .xty_form-dict-trigger{ background-image: url(../viamedici39/img/dictTriggerGRAY.gif) !important;  }

        .x-grid3-cell DIV.x-grid3-cell-inner{border-right:1px solid #eee;}
        
    </style>

    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="../../ext-all.js"></script>

    <!-- overrides to base library -->

    <!-- page specific -->
    <script type="text/javascript" src="ComboBox_.js"></script>
    <script type="text/javascript" src="ComboListAutoSizer.js"></script>
    <script type="text/javascript" src="catGrid.js"></script>
    


</head>
<body>

    
<div>
    <input type="textarea" id="longtexts" cols="20" rows="10" />   
</div> 

<br>

<!--  <div>

    <input type="textarea" id="longtexts1" cols="20" rows="10" wrap="virtual />   
</div>  -->

<table style="z-index:9999;margin-top:-20px;margin-left:-2px;">

<td id="longtextsDisplay" style="border:solid 1px #ddd;width:276px;white-space:normal;heigsht:70px; padding-left:2px" class="x-combo-list-item  x-form-text x-form-field  x-form-focus" >
   
</td>


<td id="longtexts1Display" style="border:solid 1px #ddd;width:276px;white-space:normal;heigsht:70px; padding-left:2px" class="x-combo-list-item  x-form-text x-form-field  x-form-focus" >
   
</td>


</tr>
</table>
<br>



 
    <div id="skip-grid"></div>
    <br>
    <div id="rave-grid"></div>
    <br>
    <div id="brave-grid"></div>
    <br>


    <div id="values-grid"></div>
    <br>

<a href="http://192.168.100.40/viaMEDICI/jsp/js/extjs/ext-3.0.0/examples/grid/catGrid.html" target="_blank">40</a><br><br>

</body>
</html>

в первои строке комбо можно редактировать текст.

последующие строки, стоящие ниже - нет.
можно и их как нибудь сделать редактируемыми?

Это сообщение отредактировал(а) maxxi - 16.6.2011, 10:06

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »